0
4

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 3 years have passed since last update.

部分テンプレートとは

Last updated at Posted at 2020-03-03

##部分テンプレート
同じHTML構造の部分を共通化することによって、ビューファイルを作成することができます。この共通化された部分を、部分テンプレートといいます。
部分テンプレートを使用した場合、HTML構造を他のビューでも使いまわすことができます。
部分テンプレートのメリットとして
繰り返し書くコードを一回で済ませられる
修正するときに修正箇所が少なく済む
というメリットがあります。
部分テンプレートのファイル名は必ずアンダーバーから始まります。
例えばモデルがPostだとしてapp/views/posts/index.html.erbを部分テンプレートするとき、共通化してる部分を切り取りapp/views/posts/_post.html.erbに貼り付けます。
##renderメソッド
部分テンプレートを呼び出す際に利用するメソッドです。
partialオプションを付けることで、部分テンプレート名を指定し、部分テンプレートを表示することができます。partialは部分的という意味です。
【例】

<% render partial: "sample" %>

localsオプションを付けることで、部分テンプレート内でその変数を使えるようになります。
【例】

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

部分テンプレート内においてhogeという文字列の代入されたpostという変数が使えるようになります。
app/views/posts/index.html.erbに追記していきます。<% @posts.each do |post| %>、<% end %>は共通化してない部分なので部分テンプレートはしていません。
【例】

app/views/posts/index.html.erb
<% @posts.each do |post| %>
  <%= render partial: "post", locals: { post: post } %>
<% end %>

上記の{ post: post }の右側のpostはeachメソッド内の変数としてのpostでpostのインスタンスを示しています。一方、左側のpostは部分テンプレート内での変数の名前を表しています。

今回はapp/views/users/show.html.erbも部分テンプレートするとして
【例】

app/views/users/show.html.erb
<div class="XXXX">
  <%= @user.nickname %>さんの投稿一覧
</div>
<% @posts.each do |post| %>
  <%= render partial: "posts/post", locals: { post: post } %>
<% end %>

違うフォルダ内の部分テンプレートを呼び出すときはposts/postのようにどのフォルダの部分テンプレートを使用しているかを記載します。
postsはhttp://localhost:3000/postsでpostはフォルダの部分テンプレート名です。

0
4
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
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?