• WebCamp_インタビュー
    「1カ月頑張ればこの先が見えてくる」地元メディアを立ち上げたママさん
    2017.07.20
  • WebCampPro_インタビュー
    未経験31歳からエンジニア転職を実現【実際に聞いてみた】
    2017.04.01
  • WebCampPro_インタビュー
    自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】
    2018.02.02
  • WebCamp_インタビュー
    「自信の持てるスキルを得たい!」内定辞退した女子大生がプログラミングを学習したワケ。
    2018.04.28
  • WebCamp_インタビュー
    【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
    2018.01.15
  • WebCamp_インタビュー
    “未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
    2017.10.04
  • WebCamp_インタビュー
    時間や場所にとらわれず自由に働くために必要なスキルとは?【WebCamp卒業生インタビュー】
    2018.01.26
  • WebCamp_インタビュー
    【WebCamp受講生インタビュー】起業準備中にCEOが気がついたプログラミングスキルの重要性とは?
    2017.12.25
  • WebCampPro_インタビュー
    未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】
    2018.03.10
  • WebCamp_インタビュー
    【卒業生インタビュー】台湾で月間100万UUの訪日旅行メディアを手掛けるCEOが、プログラミングを学んで得たものとは?
    2018.01.15
  • WebCampPro_インタビュー
    未経験でも寿司職人からWebデザイナーになった!ホスピタリティでスクールを支える宮脇トレーナー
    2017.05.26

◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

WEBCAMP【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方!
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
WEBCAMP PRO転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアへ3ヶ月で転職する為のスクールです!
12月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月生は満員となっております。12月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

はじめに

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の形式で表示する
:inline erbファイルに記載するプログラムコードを直接指定することで、その結果を表示する 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'と表示する
:body content 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としてブラウザに渡す
:location HTTPのLocationヘッダー(リダイレクト先のURL)を設定する
※5.1以降
render :action => "new", :location => users_url
→新規作成画面のLocationヘッダーを一覧にする
:format Railsが使用するフォーマットを指定する
デフォルトはhtml
※5.1以降
render formats: :xml
→Railsがxmlフォーマットを使用するように指定する

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

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

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

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

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

render オプション and return

“未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
2017-10-04 10:26
今回の記事では、未経験からWebCampを1ヶ月受講し、その後エンジニアとして転職をした喜田さんにお話を伺いました。 <プロフィール> 喜田 大介 さん (28歳) 大学時代はプ...

テスト環境の作成

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

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

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

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

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

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

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

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

rails s

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

未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】
2018-03-10 14:42
今回の記事では、たまたま見たテレビ番組がきっかけでエンジニアに興味を持ち、WebCampProを受講して見事転職を決めた中村さんにインタビューしました。 <プロフィール> 中村 駿...

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


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

コツコツ独学×スクールで実践。未経験からエンジニアに転職!【WebCamp卒業生インタビュー】
2018-03-22 23:28
今回の記事では、独学でPHPを1年半学習し、その後WebCampを受講して未経験からエンジニアへと転職された佐々木さんにお話を伺いました。 <プロフィール> 佐々木 祐樹 さん(2...

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

「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メソッドは、別のアクションを実行し直す

WebCamp・WebCamp Proについて

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。WebCamp Proは3ヶ月間で未経験から即戦力エンジニアを育成するプログラミングスクールです。

2つのサービスを運営するインフラトップでは、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

12月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月受入枠は満員となっております。12月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら!

▼ついに開講!オンラインでWebデザインを学びたい方はこちら!

 

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

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

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

転職のサポートがほしい

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

【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
2018-01-15 13:23
今回の記事では、WebCampで1ヶ月間Rubyを学習し、Webエンジニアとして転職した卒業生の田中さんにお話を伺いました。 <プロフィール> 田中 デニス 昭彦さん(...
関連キーワード
Ruby on Railsの関連記事
  • 【Rails入門説明書】includesについて解説
  • 【Rails入門説明書】RubyとRailsの初心者/中級以上用の厳選本8選
  • 【Rails入門説明書】joinsについて解説
  • 【Rails入門説明書】 jQueryの導入方法について解説
  • 【Rails入門説明書】scopeについて解説
  • 【Rails入門説明書】has_manyについて解説
おすすめの記事
Infratop
こんにちは、インフラトップでCTOをしている田中です。 今回はクリエイティブチームの文化や制度を紹介します。 フォワード まず文化として、プ...