【sinatra】ドットインストールsinatra入門の学習メモpart1

備忘録 Sinatra

ドットインストールのsinatra入門を終えたので、学習メモです。

主に環境整備から、controllerの基本的な記載方法とcontrollerのviewの呼び出し方法

0.準備

ローカル環境の整備がいる。今回のsinatra入門での学習環境の環境整備方法は
win:ローカル開発環境の構築 [Windows編]
mac:ローカル開発環境の構築 [macOS編]

にある。
自分用メモ。

またファイル転送(SFTP)としてGUIツールのCyberduckを使用。

cyberduck
cyberduck
頻繁に使うショートカットとして
「command」 + 「F」 ファイル作成
「command」 + 「shift」 + 「n」 フォルダ作成

また、gemでsinatra,sinatra-contrib,activerecord,sqlite3を入れる。
sinatra-contribを入れることで本来変更のたびにサーバリロードする必要があるが、それがなくなる。

1.起動

コマンド$ ip aでインターフェース(ローカル)のIPを調べることができる。
ルートディレクトリにapp.rbを作成しそこから、app.rb内に

get '/' do
    "Hoge"
end

とすれば/にルーティングできる。/にアクセスすることでHogeが出力される想定となる。
またコマンドから$ ruby app.rb -o [IPアドレス]を打つことでルートにapp.rbが読み込まれる。
あとばブラウザからhttp://[IPアドレス]:4567/にアクセス
終わるときはctrl + c

ちなみにルーティングが同じの場合、上部が優先される。

コントローラ変更のたびにサーバ再起動する必要をなくす方法

本来変更のたびにサーバ再起動する必要がある。ただしgemでsinatra-contribを入れてあげて、コントローラ(ここではapp.rb)に

require 'sinatra/reloader'

を入れてあげると再起動の必要がなくなる。

2.controllerの変数の受け取り方

 get '/hello/:name'
     "hello #{params[:name]}"
 end

みたくするとurlを/hello/tanakaみたくすることでtanakaをparamsで受け取ることができるのでhello tanakaと表示することができる。

また

get '/hello/:fname/?:lname?' do |f,l|
    "hello #{f} #{l}"
end

にするとすることで複数paramを受け取ることもできる。その際?(オプショナル)を設定することで必須ではなくなる。

ワイルドカード使用

 get '/hello/*/*' do 
     "hello #{params[:splat][0]} #{params[:splat][1]}"
 end

みたく*で任意の文字列を設定もできる。urlを/hello/hoge/piyoなどすることでparams[:splat][]で取得できる 。

次に、正規表現も使用できる。

get %r{/users/([0-9]*)} do
  "user id = #{params[:captures][0]}"
end

urlを/users/123などとし、params[:capture][]とすることで数値が取得できる。

3.controllerからerb読み込み

フォルダー/viewにindex.erbを作成してそれを読み込みたい場合

get '/' do
    erb :index
end

erb:indexで取得

複数erbの共通部分をまとめる

複数viewを作成した際に、共通部分をまとめたい場合

/view/layout.erb作成し、そこに書くことでまとめれることができる。 例:

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>
        <%= @title %>
    </title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="container">
        <%= yield %>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

<%= @title %>でコントローラ部で@titleを作った場合に変数代入 <%= yield %>で各viewを読み込める。

あとCSSとかも読み込める。その際、フォルダpublic/cssに作成する