16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

sinatra erbファイル分割のすヽめ

Last updated at Posted at 2018-02-08

sinatraはrubyのwebフレームワークであるが、Railsに比べ資料が少ない。
しかし、簡単なAPIサーバーなどを立てるためには非常に重宝する。
今回はsinatraである程度大きくなってしまったプロジェクトのために、erbファイルの分割について説明する。
renderの使い方を書いているページがなかった...(悲しかった

テンプレート化

layoutとは名前の通りWebページ全体の共通のlayoutを示す。
layout.erbを作成し、header・footerなどのテンプレートを作成する。
また、@titleなどグローバル変数を引数として渡すことでtitleなども変更できる。

app.rb
get '/' do
  @title = 'index'
  erb :index
end
index.erb
message
  • テンプレートのファイル
layout.erb
<html>
<head>
  <title><%= @title %>:page</title>
</head>
<body>
  <header>....</header>
  <%= yield %>
  <footer>...</footer>
</body>
</html>

yieldの間の部分にerbファイルの中身が表示されます。

<html>
<head>
  <title><%= @title %>:page</title>
</head>
<body>
  <header>....</header>
  message
  <footer>...</footer>
</body>
</html>

ファイル分割

renderを用いることによりファイルを分割し、役割ごとに簡潔に表記できる。
また、次のようなファイル構造の場合index.erbのようにrenderを用いて子供のファイルを呼び出せる。
データの参照関係についてはlocalsを用いてグローバルとの関係を分けることができる。
グローバルの値も参照できる。

  • index.erb
  • index
    • left.erb
    • center.erb
    • right.erb
app.rb
get '/room' do
  @title = 'room'
  @list = List.all[0...5]
  erb :index
end
  • 大枠のファイル
index.erb
<div class="row">
  <div class="col-4"><%= render :erb :'index/left'%></div>
  <div class="col-4"><%= render :erb :'index/center'%></div>
  <div class="col-4"><%= render :erb :'index/right'%></div>
</div>
  • 分割された子ファイル
left.erb
<div class="menu">
  <ul>
    <% @list.each do |item| %>
      <li><%= item.name %></li>
    <% end %>
  </ul>
</div>
16
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?