部分テンプレートの実装

部分テンプレートとは

同じHTML構造の部分を共通化することによって、無駄なくビューファイルを作成することができます。この共通化された部分を、 部分テンプレートといいます。

部分テンプレートを使用した場合、そのHTML構造を他のビューでも使いまわすことができるという利点も存在します。

また、部分テンプレートのファイル名は必ずアンダーバー「_」から始まります。

部分テンプレートを使用したい場所を切り取る

例えば、以下のeach文の中身を切り取る（command+x）。

app/views/posts/index.html.erb

<% @posts.each do |post| %>
  <div class="content">
    <div class="content__left">
      <div class="content__left--image"></div>
    </div>
    <div class="content__right">
      <div class="content__right__top">
        <%= link_to post.title, post_path(post.id), class: "content__right__top--title" %>
      </div>
      <div class="content__right__bottom">
        <div class="content__right__bottom--userName">
          <%= link_to post.user.nickname, user_path(post.user), class: "content__right__bottom--userName--btn" %>
        </div>
        <div class="content__right__bottom--date">
          <%= post.created_at %>
        </div>
      </div>
    </div>
  </div>
<% end %>

部分テンプレート用のファイルを作成

app/views/postsディレクトリに、部分テンプレート用のファイル_post.html.erbを作成します。

app/views/posts/_post.html.erb

<div class="content">
  <div class="content__left">
    <div class="content__left--image"></div>
  </div>
  <div class="content__right">
    <div class="content__right__top">
      <%= link_to post.title, post_path(post.id), class: "content__right__top--title" %>
    </div>
    <div class="content__right__bottom">
      <div class="content__right__bottom--userName">
        <%= link_to post.user.nickname, user_path(post.user), class: "content__right__bottom--userName--btn" %>
      </div>
      <div class="content__right__bottom--date">
        <%= post.created_at %>
      </div>
    </div>
  </div>
</div>

部分テンプレートを呼び出す

続いて、こちらの部分テンプレートを呼び出します。そのためには、renderメソッドを利用します。

厳密にいうと、renderメソッドにpartialオプションとlocalsオプションを加えて利用する。

partialオプションとは

renderメソッドで使用できるオプションです。 partialというオプションを付けることで、明示的に部分テンプレート名を指定し、部分テンプレートを表示することができます。
下の例では、_sample.html.erbという部分テンプレートを呼び出しています。

【例】

<% render partial: "sample", locals: { post: "hello!" } %>

localsオプションとは

renderメソッドで使用できるオプションです。 localsというオプションを付けることで、部分テンプレート内でその変数を使えるようになります。

【例】

<% render partial: "sample", locals: { post: "hello!" } %>

これで部分テンプレート内においてhello!という文字列の代入されたpostという変数が使えるようになります。

実装

app/views/posts/index.html.erb

<% @posts.each do |post| %>
  <%= render partial: "post", locals: { post: post } %>
<% end %>

ここでのrenderメソッドのlocalsオプションに注目してみます。{ post: post }の右側のpostはeachメソッドのブロックパラメータのpostで、Postのインスタンスを示しています。一方、左側のpostは部分テンプレート内での変数の名前を表しています。

以上！