3
3

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.

Viewでの繰り返しをコレクションをレンダリングすることで実装する【Rails】

Last updated at Posted at 2020-06-09

indexを表示するときなどビューテンプレート内でeachを使うことはよくあると思います。

Railsにはeachを書かなくても、部分テンプレートを使って同じ要素を複数回表示させることができるメソッドが備えられています。

eachを使って書く

例としてユーザーを表にして表示する場合を考えてみます。
下のようなコントローラがあった場合、

users_controller.rb
def index
  @users = User.all
end

次のようにeachを使って表を生成することができます。

index.html.erb
<% @users.each do |user| %>
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>
<% end %>

コレクションを部分バーシャルを使ってレンダリングする

renderメソッドを使うと部分パーシャルを使って繰り返しを表現できます。

index.html.erb
<%= render partial: "user", collection: @users  %>

部分パーシャルを用意します。

_user.html.erb
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>

renderメソッドのcollectionオプションにコレクションを指定すると、要素の数の回数、部分パーシャルをこの位置に埋め込みます。
部分パーシャル内のローカル変数はパーシャルの名前に基づいた名前になります。

パーシャルの名前をclientに変更すると

<%= render partial: "client", collection: @users  %>

部分パーシャル内のローカル変数はclientになります。

_client.html.erb
  <tr>
    <td><%= client.name %></td>
    <td><%= client.email %></td>
  </tr>

コレクションに指定した変数の単数形になるわけではないので注意が必要です。
また、collectionオプションを付けるときは、partialを省略することができません。

パフォーマンスの悪い書き方

index.html.erb
<% @users.each do |user| %>
  <%= render "user", user: user %>
<% end %>
_user.html.erb
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>

コレクションを使わずに部分テンプレートを繰り返し表示してしまうとパフォーマンスが悪くなります。
部分テンプレートを繰り返し呼び出す時はcollectionオプションを使う記述にしましょう。

略記法

index.html.erb
<%= render @users %>
_user.html.erb
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>

renderメソッドの引数にコレクションを渡すと要素のモデル名からパーシャル名が推測されます。

さいごに

この記事の筆者はプログラミングを学習し始めたばかりの初心者です。間違いがあれば指摘していただけると幸いです。


参考
パーシャルをrenderする際のパフォーマンスに関する注意点
Railsガイド

3
3
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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?