#部分テンプレートとは?
部分テンプレートとは、
共通化しているHTML構造の部分を一括にまとめたものを部分テンプレートという。
共通化しているHTML構造の部分とは、
例えば、Twitterやfacebookのように、一つ一つのツイート構造は、以下の画像のように、トップに名前、横に画像、下にコメントテキスト、というようにまとまった形式をとっている。
https://gyazo.com/d80d3a6d9e44378319bc47bea2122f67
これが、共通化しているHTML構造の部分のことである。
#部分テンプレートのメリット
部分テンプレートのメリットとして以下のようなメリットがある。
・繰り返し再利用できる
・繰り返し書くコードを一回で済ます
・修正するときに修正箇所が少なく済む
また、ブログやチャットアプリで使えるコメントやメッセージでは、ユーザーの数が多くなればなるほど、特定のビューを複数回使い回す回数が増える。そのため、eachメソッドを用いて情報を一つ一つ呼び出すよりも、部分テンプレートをrenderメソッドでまとめて呼び出す方が、動作の速度が上がる。
よって、ブログやチャットアプリを作成する時は、大量のメッセージをやり取りすることが予想されるため、部分テンプレートを用いて実装をすることがオススメである。
#部分テンプレートの作成方法
既存のHTMLファイルから共通部分を切り出してコピーする。
以下のコードは、簡易なツイートアプリのコード
tweets/index.html.erb
<div class="contents row">
<% @tweets.each do |tweet| %>
<div class="content_post" style="background-image: url(<%= tweet.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li>
<%= link_to "詳細", tweet_path(tweet.id), method: :get %>
</li>
<% if user_signed_in? && current_user.id == tweet.user_id %>
<li>
<%= link_to '編集', "/tweets/#{tweet.id}/edit", method: :get %>
</li>
<li>
<%= link_to '削除', "/tweets/#{tweet.id}", method: :delete %>
</li>
<% end %>
</ul>
</div>
<%= simple_format(tweet.text) %>
<span class="name">
<a href="/users/<%= tweet.user_id %>">
<span>投稿者</span><%= tweet.user.nickname %>
</a>
</span>
</div>
<% end %>
<%= paginate(@tweets) %>
</div>
上記の例では、以下の部分を部分テンプレートとして切り出す
_tweet.html.erb
div class="content_post" style="background-image: url(<%= tweet.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li>
<%= link_to "詳細", tweet_path(tweet.id), method: :get %>
</li>
<% if user_signed_in? && current_user.id == tweet.user_id %>
<li>
<%= link_to '編集', "/tweets/#{tweet.id}/edit", method: :get %>
</li>
<li>
<%= link_to '削除', "/tweets/#{tweet.id}", method: :delete %>
</li>
<% end %>
</ul>
</div>
<%= simple_format(tweet.text) %>
<span class="name">
<a href="/users/<%= tweet.user_id %>">
<span>投稿者</span><%= tweet.user.nickname %>
</a>
</span>
</div>
ビューフォルダーに部分テンプレートファイルを作る。
そして、切り出した共通部分を貼り付ける。
部分テンプレートのファイル名をつけるときは、必ずアンダーバー「_」をつけること。
#部分テンプレートの呼び出し方法
部分テンプレートを呼び出すためには、renderメソッドを使う必要がある。
具体的には、render partialオプションを使う。
これは、メソッドに :partialというオプションをつけることで、明示的に部分テンプレート名を指定し、部分テンプレートを表示することができるものである。
tweets/index.html.erb
<div class="contents row">
<% @tweets.each do |tweet| %>
<%= render partial: "tweet", locals: { tweet: tweet } %>
<% end %>
<%= paginate(@tweets) %>
</div>
上記の例でいえば、以下のような記述になる。
render partial: "tweet"
また、render localsオプションを用いることで、部分テンプレート内において変数を使えるようになる。render localsオプションの使い方は、render partialオプションの後に続けて記述する。
<%= render partial: "tweet", locals: { tweet: tweet } %>
そして、locals: の右側の{ tweet: tweet }の記述において、右側のtweetは、eachメソッド内の変数としてのtweetを表している。一方、左側のtweetは、部分テンプレート内での変数の名前を表している。
#render時の記述の省略方法
= render partial: '部分テンプレート名', collection: @インスタンス変数名
複数形のインスタンス変数を部分テンプレートに渡したい場合、インスタンス変数の名前を単数形にしたものと、部分テンプレートの名前が同じなら、「render インスタンス変数」と省略形で記述することができる。
以上