【Rails】content_forとyieldで動的にタイトルを表示 - 大ちゃんの駆け出し技術ブログ

はじめに

こんにちは！大ちゃんの駆け出し技術ブログです。

今回は「Railsでcontent_forとyieldを使用して、タイトルを動的に表示させる方法」について紹介します!!

「動的とは？」となった人(自分もそうでした笑)もいるかもしれませんが、プログラミングでは高い頻度で出てくる概念です。その意味は 「状態や構成が状況に応じて変化したり、状況に合わせて選択できたりする柔軟性を持っていること。」

この記事で紹介するcontent_forとyieldを使った実装内容はどちらかといえば主に文の後ろ側、「状況に合わせて選択できたりする柔軟性」に当たります。

その柔軟性について詳しく見ていきましょう。

成果物の確認

以下が実装した成果物になります。

トップページのタイトル

アクセスページのタイトル

Webサイトがサイト内で複数のページを持つのは当然のことです。例えば、家電量販店サイトにアクセスしたときに表示されるトップページ、お店への行き方を紹介するアクセスページといった具合です。そして各ページでのタイトルはページ内容に則していることが普通です。

本記事の実装でも上の図で示したように各ページでサイト名を変えています。

トップページでは「AAA 電機」(家電量販店の名前)
アクセスページでは「Access | AAA 電機」(ページ内容| 家電量販店の名前)

※Googleでもタイトルは 「検索した内容 + "- Google 検索"」 の仕様となってるみたいですので確認してみてください。

実装方法を解説

まず、全てのビューのの共通レイアウトであるapplication.html.erbのheadタグ内にyield文を記載。

<title><%= page_title(yield(:title)) %></title>

yield(:title)ですが、()内の:titleは他のコードでも構いません。(:notice、:info、etc.) 後ほど記載するcontent_forでは()内のコードをここで記載したものと共通にする必要があります。 (ちなみに:titleはrubyの記法でシンボルというもの。ここでの理解はただの文字列でも問題ないです。)

ここで定義しているpage_titleメソッドはapp/helpers/application_helper.rbで定義しています。

module ApplicationHelper

  # 引数が渡されなかった場合は空文字をデフォルト値とする
  def page_title(page_title = '')
    base_title = 'AAA 電機'

    # 三項演算子
    page_title.empty? ? base_title : page_title + " | " + base_title
  end
end

page_titleの引数にはデフォルト値として空文字を指定しています。これにより引数が渡されなかったとしても空文字(””)がpage_titleに代入され、メソッド内の演算で使用されます。

そして、三項演算子によって、引数が渡されていなければ「AAA 電機(base_title)」、引数が渡されていれば「引数の文字(page_title) | AAA 電機」を返します。

三項演算子ですがここでは詳しく説明しませんが、一言で説明すると「if文を一行で記載する演算子」です。つまり、上の文はif文と同じ意味になります。(最初見たときはこれがifと同じ意味とは思いませんでした、、。)

条件式 ? trueの処理 : falseの処理

念のためif文で書き換えたものを記載しておくので、三項演算子をスキップしたい人はこちらを見て意味を確認してください。

# page_title.empty? ? base_title : page_title + " | " + base_title をif文で書き換え
if page_title.empty?
  base_title
else
  page_title + " | " + base_title
end

話が少し脱線しましたが、このpage_titleメソッドを定義することでapplication.html.erbで使用することが可能になります。

では、page_titleメソッドの引数であるyiield(:title)は果たしてどのように渡されるのかというと、そう、content_forメソッドの出番です。

しかもその実装方法はとても簡単！ 各ページにcontent_forメソッドを使用し、第一引数に共通のシンボル、第二引数に渡したい文字列を記載するだけ！

成果物のように実装する場合、

<% content_for(:title, 'Access' ) %>

これにより、文字列’Access’が共通レイアウトのページにあるyeildに渡され、page_titleメソッドの引数が’Access’となり、成果物のようにタイトルが「「Access | AAA 電機」(ページ内容| 家電量販店の名前)」となります。

逆に、トップページとしてルーティングされているページのビューに何も記載しなければ、そのページのタイトルは「AAA 電機」となります。

動的であるメリット

冒頭で動的(状況に合わせて選択できたりする柔軟性)の意味を説明しましたが、具体的にどのような柔軟性が今回の実装にあるのでしょう？

例えば、AAA 電機が社名変更でBBB 電機となったとしましょう。当然タイトルも新しい会社名に変更しなければなりません。どのようにコードに変更を加えるべきでしょうか？

答えは"ヘルパーメソッドのbase_titleに入れる文字を変える"だけです。

module ApplicationHelper

  def page_title(page_title = '')
    # 変更箇所　-----------
    base_title = 'BBB 電機'
    # --------------------

    page_title.empty? ? base_title : page_title + " | " + base_title
  end
end

本当にたったこれだけ！これだけでcontent_forが使われる他の全ページのタイトルが「AAA 電機」から「BBB 電機」に変わります。 メンテナンスが驚くほどに簡単になるのです。

逆に、content_forとyieldを使わない実装方法を考えてみましょう。各ページにはそれぞれのページのタイトルが静的に表示されています。

<title>AAA 電機</title>

<title>Access | AAA 電機</title>

そして先ほどの例のように会社名が変更になったとしましょう。

さて、変更を加える箇所はいくつあるでしょうか。 Accessページだけでなく、他のページにも+ | AAA 電機と実装していた場合、その数だけ修正をしなければなりません。 content_forとyieldを使った実装なら一箇所で済むのに、です。

これが動的であることの威力です。状況に合わせて対応を選択できる柔軟性です。

最後に

今回紹介した例はとても簡単な実装方法になります。しかし、他にも幅広い方法でcontent_forとyieldは活用できるので、是非色々試してみてください！自分も試します！

この記事が少しでも皆様の学習の役に立てば幸いです。

以上、大ちゃんの駆け出し技術ブログでした！