【Rails入門】yieldとcontent_forを使ってページ毎にタイトルを変更

こんにちは!システムエンジニアのオオイシです。

Ruby on Railsのviewレイアウトは、1画面を表示するときに共通レイアウトと個別レイアウトで役割を分割して処理しています。

分割するための機能はyieldメソッドを使っているのをご存知でしょうか?

今回の記事では、


【基礎】yieldとは
【基礎】yieldで共通レイアウトと個別レイアウトを分割する仕組み
【基礎】yieldとcontent_forの使い方
【応用】実践的な使い方を紹介

について解説していきます。

初心者でもわかりやすいように解説していますので、使い方についてはしっかりと理解しておきましょう!

目次

yieldとは

そもそも、yieldメソッドとは、共通プログラムと個別プログラムで分割してコーディングするために使用するRubyのメソッドです。

yieldメソッドの動きを確認できるサンプルプログラムを見てみましょう。

yieldを確認するプログラム:

def common_method
  puts '共通'
  yield
  puts '共通'
end

common_method { puts '個別' }

実行結果:

共通
個別
共通

このように、yieldの動きを確かめることができました。

Ruby on Railsではこのyieldを使って共通のレイアウトと個別レイアウトを分割して柔軟に処理できるようにしています。

詳しくは、次項で解説していきます。

なお、Rubyのyieldについてこちらで詳しく解説しているので、ぜひ参考にしてみてください。

yieldで共通レイアウトと個別レイアウトを分割する仕組み

ERBへコーディングするときに、HTMLタグやHEADタグは書いていなくてもちゃんとWEBページが表示されていることに気がついていましたか!?

なぜならば、

  • application.html.erb → HTMLやHEADタグなどの共通レイアウト
  • アクション名.html.erb → BODYタグ内の個別レイアウト

で、役割分担して画面表示しているからです。

その分割するための機能としてyieldメソッドを使っています。

application.html.erbはどのようになっているか確認してみましょう。

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

bodyタグの中にyieldメソッドが定義されているのが確認いただけたと思います。

実は、このyieldは複数を定義して任意の場所で定義することも可能です。

次項で詳しく説明していきます。

yieldとcontent_forの使い方

Railsでyieldセット使われるのがcontent_forメソッドです。

content_forとは、個別レイアウトから共通レイアウトに画面表示するために使います。

例えば、Railsのtitleタグを個別のレイアウトから指示する場合です。

content_for使い方は次の通りです。

application.html.erbに追記:

<%= yield :任意のキーワードのシンボル %>

アクション名_html.erb:

<% content_for :任意のキーワードのシンボル do %>
表示したいERBの内容
<% end %>

次項では、サンプルプログラムを使って解説していきます!

実践的な使い方を紹介

サンプルコントローラーの作成

サンプルプログラムを確認するためのコントローラーを作成します。

$ bin/rails g controller hello world

http://localhost:3000/hello/world にアクセスします。

初期ではこのように表示されます。

タイトルにはSample”と表示されている点について注目してください。

アクション毎にタイトルを変更

yieldとcontent_forを使って、個別のレイアウトからHTMLのtitleを表示するサンプルプログラムを確認してみましょう。

application.html.erb:

<title>Sample</title>
↓ 変更
<title><%= yield :title %></title>

app/views/hello/world.html.erb:

# 追記 ここから
<% content_for :title do %>
    Hello#worldのタイトル
<% end %>
# 追記 ここまで

<h1>Hello#world</h1>
<p>Find me in app/views/hello/world.html.erb</p>

実行結果:

このようにタイトルを個別に変更することが出来ました。

もしも、デフォルトのtitleを表示する場合は、content_for?メソッドを使って条件分岐することも出来ます。

<title><%= content_for?(:title) ? yield(:title) : ”Sample"%></title>

ページトップにお知らせを表示

ページトップに共通のレイアウトにお知らせ表示したい場合もあるでしょう。

名前付きのyieldを定義してお知らせを表示するサンプルプログラムを確認してみましょう。

application.html.erb:

〜〜 省略 〜〜
<body>
  <div class="notice"> <!-- 追記 -->
  <%= yield :notice %> 
  </div>
    
 <%= yield %>
〜〜 省略 〜〜
</body>

お知らせを装飾するためのCSSを定義します。

app/assets/stylesheets/application.css:

.notice {
  color: red;
  border: solid 1px #000000;
}

お知らせを表示したい内容をコーディングします。

app/views/hello/world.html.erb:

<% content_for :notice do %>
    <ul>
        <li>新着記事のお知らせ</li>
    </ul>
<% end %>
    
<h1>Hello#world</h1>
<p>Find me in app/views/hello/world.html.erb</p>

実行結果:

このように、お知らせを表示することが出来ました。

まとめ

いかがでしたか?

今回はRailsのyieldメソッドについて解説しました。

yieldメソッドは、共通プログラムと個別プログラムで分割してコーディングするために使用するRubyのメソッドです。

Ruby on Railsではyieldメソッドを使って、共通レイアウトと個別のレイアウトを分割するために使っています。

content_forを使うと、共通レイアウトに指定した場所でアクション毎の個別レイアウトが可能になるので、ぜひ活用してみてください。

そして、railsのyieldを忘れてしまったらこの記事を確認してくださいね!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次