スライドショー

【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を忘れてしまったらこの記事を確認してくださいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

オオイシ

オオイシ

システムエンジニア歴15年のオオイシです!好物は Java と Ruby。プログラミング、システムアーキテクトからマネジメントに到るまでなんでも食べます。
システム開発の相談やお困りごとがあればお気軽に
[email protected] まで連絡頂けると幸いです

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説