4
1

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.

Rails部分テンプレート(パーシャル)まとめ

Posted at

使い方1

before
xxx.html.erb

<%= @user.name %>
<%= @user.email %>
<%= @user.age %>
after
xxx.html.erb
<%= render partial: 'hoge', locals: {user: @user} %>

_hoge.html.erb
<%= user.name %>
<%= user.email %>
<%= user.age %>

※ 書き方:<%= render partial: 'ファイル名', locals: { '部分テンプレート内で使う変数': '変数に入れる値' } %>

※ ファイル名は、render記載のファイルと同じディレクトリにある_hogeならhoge

※ localsオプションを使った場合はpartialは省略できない。

※ partialを省略したいならlocalsオプションも省略しないといけない

(例:<%= render 'hoge', user: @user %>

※ メリット:コードがスッキリする。部分テンプレートを使いまわせるから便利&コードの保守性が上がる。


使い方2

before
xxx.html.erb

<% @users.each do |user| %>
  <%= user.name %>
  <%= user.email %>
  <%= user.age %>
<% end %>
after
xxx.html.erb

<% @users.each do |user| %>
  <%= render partial: 'user', user: user %> #使い方1と同じ
<% end %>
_user.html.erb
  <%= user.name %>
  <%= user.email %>
  <%= user.age %>

@usersの要素の個数分、部分テンプレートが呼び出されて表示される。


collectionオプションを使うと、下記のように__each文を省略__できる。
xxx.html.erb
<%= render partial: 'user', collection: @users %>
_user.html.erb
  <%= user.name %>
  <%= user.email %>
  <%= user.age %>

※ 書き方:<%= render partial: 'hoge', collection: 繰り返し表示する要素が入っているインスタンス %>

※ collectionオプションの部分にeachで回したかった変数を入れる

※ collectionに指定した変数の要素の分だけ部分テンプレートが繰り返し表示される

※ collectionオプションを使用した場合、partialで指定したファイルの名前がそのまま部分テンプレート内で使用する変数名になる


もし別の名前として変数を使いたい場合は`as`に変数名を指定する
<%= render partial: 'user', collection: @users, as: "hoge" %>
_user.html.erb
  <%= hoge.name %>
  <%= hoge.email %>
  <%= hoge.age %>

@usersに入っている要素が一つずつ取り出され、部分テンプレート_user.html.erb内の変数hogeに代入される。


※ 上のコード(asは除く)は以下の条件を全て満たしている時、省略できる。

・ viewsフォルダ内にあるusersフォルダに部分テンプレート_user.html.erbが存在する

・部分テンプレート内で使う変数がuserである

まとめると、views/hoges/_hoge.html.erb内で変数hogeを使っていることが省略の条件

なので、

<%= render @users %>

と書けば、上述したeach文collection記法と意味は同じ

#3つとも意味は同じ
xxx.html.erb

<%= render @users %>

<% @users.each do |user| %>
  <%= render partial: 'user', user: user %>
<% end %>

<%= render partial: 'user', collection: @users %>
users/_user.html.erb
  <%= user.name %>
  <%= user.email %>
  <%= user.age %>

※ 3つとも意味は同じだがパフォーマンス(実行速度)が変わってくるので注意


each文の中にrender入れる VS collectionオプションを使う

eachで表示すると@usersなどに入っている要素の個数回分部分テンプレートが呼び出されるが、collectionオプションを使用して記述すると部分テンプレートが呼び出されるのは1回のみ。

なので、eachで表示するよりもcollectionオプションを使う方がパフォーマンスが良くなる

部分テンプレートを繰り返し呼び出す時はなるべくeach文ではなくcollectionオプションを使うようにする。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?