読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

RailsのViewでのrenderメソッドの使い方

Rails初級 Rails View

RailsのViewでのrenderメソッドの使い方について説明します。
renderメソッドは、「コントローラー(Controller)」と「ビュー(View)」それぞれにあります。
ここではビューのrenderメソッドの使い方を示します。

コントローラーのrenderメソッドの使い方を知りたい場合は、こちら

動作確認

  • Rails 4.1

目次

  1. ビュー内でのrenderメソッドについて
  2. 部分テンプレートを表示するrenderメソッド
  3. 部分テンプレートにオブジェクトを渡すrenderメソッド
  4. 部分テンプレートでコレクションを表示するrenderメソッド


1. ビュー内でのrenderメソッドについて

ビュー内でのrenderメソッドは、部分テンプレート(partial)を表示するために使います。
部分テンプレートとは、共通のビューの表示を別ファイルに切り出すことができ、様々なビューから呼び出すことができます。


2. 部分テンプレートを表示するrenderメソッド

一般的な例として、新規と編集ページのフォーム表示部分は部分テンプレートになっているので、それを説明します。
部分テンプレートは必ずアンダースコア(_)で始まる必要があります。

# 部分テンプレート(呼び出される側)
# app/views/products/_form.html.erb

<%= form_for(@product) do |f| %>
  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

部分テンプレートを呼び出す側では、renderメソッドと引数にアンダースコア抜きのファイル名を指定します。

# 新規画面(呼び出し側)
# app/views/products/new.html.erb
<h1>New product</h1>

<%= render 'form' %>

<%= link_to 'Back', products_path %>
# 編集画面(呼び出し側)
# app/views/products/edit.html.erb
<h1>Editing product</h1>

<%= render 'form' %>

<%= link_to 'Show', @product %> |
<%= link_to 'Back', products_path %>


3. 部分テンプレートにオブジェクトを渡すrenderメソッド

renderメソッドは、下記のようにオブジェクトを渡すことができます。

# 部分テンプレートを呼び出す側
# app/views/products/index.html.erb
...
<% products.each do |product| %>
  <!-- "object:"の部分は任意の名前で良いです。
     部分テンプレート内ではその名前でオブジェクトにアクセスできます。-->
  <%= render 'product', object: product %>
<% end %>
...

部分テンプレート側では、「呼び出し側で指定した名前」でオブジェクトにアクセスできます。("object"でアクセスしている)

# 部分テンプレート側
# app/views/products/_product.html.erb
<%= object.name %> |
<%= object.price %> |
<%= link_to 'Show', object %>
<%= link_to 'Edit', edit_product_path(object) %>
<%= link_to 'Destroy', object, method: :delete, data: { confrim: 'Are you sure?' } %>


4. 部分テンプレートでコレクションを表示するrenderメソッド

部分テンプレートでコレクションを表示する場合、特定の条件が整っているとループ処理などを省くことができます。上記の例はコレクションを表示しているので書き直してみます。

  • 呼び出し側では、renderメソッドにコレクションを渡す(例:@products)
  • 呼び出される側では、ファイル名をコレクションの単数系にする(例:_product.html.erb)。さらに、オブジェクトにはその単数系でアクセスできます。(例:product.method
# 部分テンプレートを呼び出す側
# app/views/products/index.html.erb
...
<!-- コレクションの変数を渡すとループ処理が必要なくなる。
   Railsは変数名の単数系の部分テンプレートを呼び出す。
   今回は、app/views/products/_product.html.erb -->
<%= render @products %>
...

部分テンプレート側では、「変数名の単数系の名前」でオブジェクトにアクセスできます。
(以下では、"product"でアクセスしています)

# 部分テンプレート側
# app/views/products/_product.html.erb
<%= product.name %> |
<%= product.price %> |
<%= link_to 'Show', product %>
<%= link_to 'Edit', edit_product_path(product) %>
<%= link_to 'Destroy', product, method: :delete, data: { confrim: 'Are you sure?' } %>


以上です。