【Rails入門説明書】renderについて解説

2024.01.29
Railsのdeviseを用いてログイン認証を実装する方法を解説

はじめに

Railsの基本構造はMVC(Model、View、Controller)です。

このうち、ユーザーインターフェイスとなるViewは、見た目や動きの中心となる部分ですので、Railsアプリケーションの成否を分ける要とも言えます。

そのため、Viewは最後まで何度も修正することが多い部分でもあるのです。そうなると、いつの間にやら「同じようなプログラムコードの繰り返し」になってしまっていることが少なくありません。

同じコードの繰り返しになってしまうと、メンテナンス性や可読性が著しく下がりますので、できる限り避けなければいけません。

そんなときに活躍するのが、renderメソッドなのです。

今回は、Viewのプログラムコードをシンプルにして、メンテナンス性と可読性を飛躍的に上げてくれるrenderメソッドについて、詳しく解説します。

renderメソッドとは

冒頭で説明したとおり、renderメソッドは、Viewの表示内容を制御するメソッドです。

もっとも多い使い方としては、「部分テンプレート」と呼ばれる、「別に定義した表示内容」を好きなところに挿入して表示する方法でしょう。

この機能を使えば、View上の重複しているコードをなくし、全体をすっきりと見やすくすることができるのです。

具体的な構文は、以下のようになっています。

render 表示するRHTMLの名称 # (1)
render オプション # (2)

RHTMLの表示

(1)がもっとも単純な構文で、指定したRHTMLファイル(Railsでhtmlと解釈されるerbファイルなど)をrenderメソッドが記載されている箇所に読み込みます。

例えば、View内で以下のように使用することで、viewファイルと同じディレクトリにある「_head.html.erb」と「_foot.html.erb」を挿入することができるのです。

<%= render ‘head’%>
<p>
site body
</p>
<%= render ‘foot’%>

この例のように、renderは指定されたRHTMLの名称に「_」を付けたRHTMLファイルを読み込みますので、憶えておきましょう。

オプション

renderに設定できるオプションは、以下のようになっています。

オプション説明
:actionアクション名で指定する他のアクションのテンプレートを表示するrender :action => “new”
→newアクション用のRHTMLを表示する
:partial「部分テンプレート」を表示する
引数を渡すことも可能
render :partial => “category”
→_category.rhtmlを表示する
render :partial => “category”, :locals => { :v1 => xxx, :v2 => xxx }
→ローカル引数を渡す
:templateテンプレートを直接指定して表示するrender :template => “user/new”
→userの_new.html.erbを表示
:fileファイルパスを直接指定して表示するrender :file => “shared/user/page”
→Railsアプリケーション管理外のファイルpageを表示する
:plain任意の文字列を表示する
※5.1未満では:text
render :plain => “Hello Rails!”
→Hello Rails!と表示する
:xml指定された文字列やモデルを表示する(コンテンツタイプをapplication/xmlに設定する)@users = User.all
render :xml => @users
→usersテーブルをXMLで表示する
:json指定された文字列やモデルを表示する。(コンテンツタイプをtext/x-jsonに設定する)@users = User.all
render :xml => @users
→usersテーブルをJSONの形式で表示する
:inlineerbファイルに記載するプログラムコードを直接指定することで、その結果を表示するrender :inline => “<%= Time.now %>”
→現在時刻を表示する
:html指定したhtmlを挿入する
※5.1以降
render html: helpers.tag.strong(‘Not Found’)
→太字の’Not Found’を表示する
:js指定したvanilla Javascriptを挿入する
※5.1以降
render js: “alert(‘Hello Rails’);”
→Javascriptで’Hello Rails’と表示する
:bodycontent typeの指定されていないコンテンツを挿入する
※5.1以降
render body: “raw”
→”raw”という文字列を表示する
:nothingなにも表示しないrender :status => 404 :nothing => true
→なにも表示せず404エラーを返す

以上のように、オプションを使用することで、より多彩な表示が可能になっています。また、以下のサブオプションを併用することで、より柔軟な表示が可能になっています。

サブオプション説明
:layoutレイアウトを指定する
レイアウトなしはfalseにする
render :action => “new” :layout => “user”
→newアクション用のViewファイルをuserレイアウトで表示する
:status返されるステータスコードを変更するrender :plain => “error” :status => 404
→errorと表示して404エラーを返す
: content_typeコンテンツタイプを指定する
※5.1以降
render file: filename, content_type: “application/css”
→コンテンツタイプをCSSとしてブラウザに渡す
:locationHTTPのLocationヘッダー(リダイレクト先のURL)を設定する
※5.1以降
render :action => “new”, :location => users_url
→新規作成画面のLocationヘッダーを一覧にする
:formatRailsが使用するフォーマットを指定する
デフォルトはhtml
※5.1以降
render formats: :xml
→Railsがxmlフォーマットを使用するように指定する

なお、ほとんどの記載が「:オプション => 値」になっていますが、「オプション名: 値」でも同じ結果を得られます。

renderメソッドを使う上での注意点

renderメソッドは1度のアクションの中で2回以上呼び出されるとエラーになります。

じつは、コントローラーのアクションでは、renderメソッドが省略されていると解釈され、内部的に「app/views/コントローラ名/アクション名.html.erb」が表示されているのです。

そのため、アクション内で条件分岐などを利用してrenderメソッドを使う場合は、必ず「return」とセットにしておきしましょう。

render オプション and return

テスト環境の作成

ここ以降、実際に動かしながら学習していくため、テスト環境を構築しましょう。

余計な手間を省くため、scaffoldを使って環境を作っていきます。scaffoldの詳細は、「【Rails入門説明書】scaffoldについて解説」を参照してください。

コマンドプロンプトで以下のコマンドを順に入力してください。(render_testという名称にします)

[bash] rails new render_test
cd render_test
rails generate scaffold User name:string age:integer
rails generate scaffold Item title:string price:integer
rake db:migrate
[/bash]

次にテスト用のデータを準備します。数が多いので、rails consoleを利用しましょう。
(こちらも、コマンドプロンプトで順に入力してください)

[bash] rails c
Item.create(title:”Wagyu”,price:2000)
Item.create(title:”Iwashi”,price:100)
Item.create(title:”Tomato”,price:100)
User.create(name:”Ryosuke”,age:18)
User.create(name:”Daigo”,age:23)
User.create(name:”Hiroshi”,age:35)
exit
[/bash]

以上で、テスト環境が整いました。

念のため、サーバーを起動して一覧を表示してみましょう。

[bash] rails s
[/bash]

ブラウザから「localhost:3000/users」と「localhost:3000/items」にアクセスします。

https://web-camp.io/magazine/archives/12481

renderメソッドの使い方(Viewで使う)

もっとも基本的なrenderメソッドの使い方が、Viewでの直接指定でしょう。

いくつか代表的なものを紹介します。

文字列表示

あまり使い勝手はないかもしれませんが、もっとも単純なrenderメソッドの使い方です。

Userの一覧ページ(localhost:3000/users)にメッセージを表示してみます。
(app/views/users/index.html.erb)

:
<h1>Users</h1>
<%= render :plain => “hogehoge” %> <!– (1) –>
<table>
<thread>
:

(1)の行を追加して、Userの一覧ページを読み込み直してみましょう。

少しわかりにくいので、赤枠で囲みましたが、「Users」というタイトルの下に「hogehoge」が表示されました。

partial

Viewでrenderを使う場合に、もっとも多いパターンがこの「partial」の表示でしょう。partialは、部分テンプレートと呼ばれるもので、まさにRHTMLの一部だけを切り取ったようなファイルです。

render :partial => 部分テンプレートファイル

上記のように指定することで、そのファイルを任意の位置に読み込むことができます。

以下のpartialファイルを作成して、保存しましょう。保存箇所は「app/views/shared/」です。(ディレクトリを追加してください)
(app/views/shared/_eol.html.erb)

<p>
End of List
</p>

この部分テンプレートをuser一覧のViewへ挿入してみます。以下の(2)を追記してください。
(app/views/users/index.html.erb)

:
</tbody>
</table>
<%= render :partial => “shared/eol” %> <!– (2) –>

<br>

<%= link_to ‘New User’, new_user_path %>


ここでも、赤枠で囲んでいる部分が、挿入された部分テンプレートです。

renderメソッドの使い方(コントローラーで使う)

次は、コントローラーで使ってみましょう。

こちらも、代表的なものをいくつか紹介します。

他のアクションのViewを表示する

Itemの新規作成ページに、Itemの1件目のデータを表示してみましょう。

コントローラーのnewアクションを以下のように修正します。
(app/controllers/items_controller.rb)

def new
# @item = Item.new # (1)コメントアウト
@item = Item.find(1) # (2)
render :action => “show” # (3)
end

もともとあった(1)はコメントアウトし、(2)(3)を追記します。

「localhost:3000/items」から「New Item」をクリックして「localhost:3000/items/new」にアクセスすると、
新規作成画面ではなく以下の1件表示画面になります。

ここで、ポイントは、(2)の@itemの代入文です。

renderメソッドは、あくまでも別のRHTMLを表示しているだけで、アクションが実行されるわけではありません。そのため、renderメソッドを使うだけでは、新規作成画面の表示に必要な@itemになにも格納されませんので、ここではfindメソッドを使って1件目のデータを取得しているのです。

他のコントローラーのアクションのViewを表示する

前述と同様ですが、Itemの画面でUserのデータを表示することもできます。

同じように、Itemコントローラーのnewアクションを修正します。
(app/controllers/items_controller.rb)

def new
# @item = Item.new # (1)コメントアウト
# @item = Item.find(1) # (2)
# render :action => “show” # (3)
@user = User.find(1) # (4)
render :template => “users/show” # (5)
end

先ほど追加した(2)(3)をコメントアウトし、(4)(5)を追記します。

他のコントローラーのViewを表示する場合は、actionオプションではなく、templateオプションを使います。また、取得しておくデータもUserモデルから取得しておかなければいけません。

JSON形式での出力

Webサービスへの応答などで、JSON形式で出力したい場合、renderメソッドで簡単に行えます。

Itemの一覧をJSON形式での出力に変更してみましょう。

ItemControllerのindexアクションに1行追記します。
(app/controllers/items_controller.rb)

def index
@items = Item.all
render json: @items # (6)
end
f

「localhost:3000/items」にアクセスすると、先ほどまでとは違って、JSON形式の文字列が表示されます。

renderとredirect_to

renderメソッドとよく似た動きをするメソッドとして、redirect_toメソッドがあります。

この2つは両方とも「指定したページを表示する」という表面上は同じ動きをしているように見えますので、よく混同されます。

しかし、実態は全然違っていますので、それぞれの動きを説明しておきましょう。

renderメソッド

表示する内容(テンプレートや文字列など)を指定します。

アクション名を指定することで、アクション名と同じViewファイルを使用してHTMLを作成するため、アクション自体を差し替えているように見えるが、表面上だけの変化なので、renderメソッドに指定したアクションに定義されている変数などは使えません。

そのため、表示しようとしているViewファイルで必要とする処理は、renderメソッドを実装しているアクション内で準備する必要があります。

redirect_toメソッド

ブラウザからのリクエスト(HTTPリクエスト+URL)を、redirect_toに指定されたリクエストとして実行されます。

つまり、redirect_toメソッドが実装されているアクションを実行すると、redirect_toメソッドに指定されているリクエストが、改めてroutes.rbによってルーティングされて、実行されるわけです。

そのため、redirect_toメソッドが実装されているアクションで定義されている変数は無効となって使うことができません。

まとめ

Railsのrenderメソッドについて、説明しました。

数多くのオプションがあり、表示上の処理を行うため、使用頻度が高いメソッドです。

しかし、表面上の動きに惑わされてしまうと、どうしてもうまくいかないこともありますので、実際にどう動いているのかをしっかりと理解して使用するようにしましょう。

・renderメソッドは、Viewに任意の表示内容を挿入することができる
・挿入するテンプレートを部分テンプレート(partial)と呼ぶ
・renderメソッドを使うことで、同じ表示の繰り返しをシンプルに実装できる
・renderメソッドでアクションを指定すると、そのアクション名と同じViewファイルが表示される
・renderメソッドは表示だけを指定するため、プログラムの動きとして、アクションが変更されているわけではない
・redirect_toメソッドは、別のアクションを実行し直す

【インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!

ブラジルから帰国し技術をつけようとRubyエンジニアを目指してWebCampでRubyを学び、見事Webエンジニアとして転職を果たした田中さんにお話を伺いました。

Rubyの学習がしたい。基礎をしっかりと理解したい

転職のサポートがほしい

と考えている方はぜひお読み下さい。

https://web-camp.io/magazine/archives/8535

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5