久しぶりにRuby on Railsをさわってみたら何も覚えていなくて絶望した人間です。
今回はさわっていく際に一番はじめに？？？となったことについて図など用いながら説明していきたいと思います。

概要

application.html.erbとは何か、その使い方などについて紹介していきます。
初学者向けの基本的な内容の記事となっています。

application.html.erbとは

Railsのapplication.html.erbファイルは、全てのページで共有される共通のレイアウトを定義するためのファイルです。このファイルを使用することで、アプリケーション全体の外観や共通のコンポーネントを一貫して管理できます。具体的な役割としては、ヘッダー、フッター、メニュー、CSSファイルの読み込み、ページのタイトルの設定などがあります。
簡単にまとめるとどのページでも表示したい部分をapplication.html.erbに書くと一貫して管理することができます。

イメージ図（titleなども一貫して管理することが多いです。）

基本的レイアウトの設定

application.html.erbの基本的な構造は以下のようになります。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) || "Your App" %></title>
    <%# クロスサイトリクエストフォージェリ対策 %>
    <%= csrf_meta_tags %>
    <%# CSPの記述 %>
    <%= csp_meta_tag %>
    
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <!-- 他のヘッダー要素を追加 -->
  </head>
  <body>
    <!-- ヘッダー -->
    <header>
      <!-- メニューなどの共通要素 -->
    </header>
    
    <!-- メインコンテンツ -->
    <main>
      <%= yield %>
    </main>
    
    <!-- フッター -->
    <footer>
      <!-- フッターコンテンツ -->
    </footer>
  </body>
</html>

<%= yield %>と記述のある部分がページが変わった際に変化する部分となります。
一貫して管理したい部分をこのファイルに記述することになります。
例えばheader,footerをページによって変えたい場合には、各ページのビューファイルに記述していくことになります。
CSPの説明については以下のリンクが参考になります。

追加の設定

パーシャル（部分テンプレート）を使う

パーシャルとは、ページの特定部分を別ファイルに切り出したファイルです。
これによってapplication.html.erbのコードが長くなり、読みにくくなることを避けることができます。
以下がheaderのパーシャルの例です。

views/layouts/_header.html.erb

<header>
  <nav>
    <ul>
      <li><%= link_to "Home", root_path %></li>
      <li><%= link_to "About", about_path %></li>
      <li><%= link_to "Contact", contact_path %></li>
    </ul>
  </nav>
</header>

読み込む側のファイルの記述は以下となります。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) || "Your App" %></title>
    <%# クロスサイトリクエストフォージェリ対策 %>
    <%= csrf_meta_tags %>
    <%# CSPの記述 %>
    <%= csp_meta_tag %>
    
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <!-- 他のヘッダー要素を追加 -->
  </head>
  <body>
    <%= render 'layouts/header' %>
    
    <!-- メインコンテンツ -->
    <main>
      <%= yield %>
    </main>
    
    <!-- フッター -->
    <footer>
      <!-- フッターコンテンツ -->
    </footer>
  </body>
</html>

bodyタグの下でrenderを使い内容を読み込んでいます。

レンダリングされるビュー内に置かれている上のコードは、
その場所で_menu.html.erbという名前のファイルをレンダリングします。
パーシャルファイル名の冒頭にはアンダースコア（_）が付いていることにご注意ください。
パーシャルをコードから参照するときはアンダースコアを付けませんが、
通常のビューファイルと区別するためにアンダースコアをパーシャルファイル名に付けます。
これは他のフォルダの下にあるパーシャルを取り込む場合も同様です。
引用：レイアウトとレンダリング - Railsガイド

これはheaderだけでなくfooterなど様々な部分で応用が利くので使ってみてください。

ヘルパーを作成し導入してみる

これによってページのタイトルが見つからない場合の対応ができ柔軟に対応できるようになったり、コードをすっきりとさせることができます。
以下がヘルパーの作成例になります。

app/helpers/application_helper.rb

module ApplicationHelper

  # ページごとの完全なタイトルを返す
  def full_title(page_title = '')
    base_title = "Your App"
    if page_title.empty?
      base_title
    else
      "#{page_title} | #{base_title}"
    end
  end
end

以下がヘルパーを使う側の記述となります。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-widt
    <%# クロスサイトリクエストフォージェリ対策 %>
    <%= csrf_meta_tags %>
    <%# CSPの記述 %>
    <%= csp_meta_tag %>
    
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <!-- 他のヘッダー要素を追加 -->
  </head>
  <body>
    <!-- ヘッダー -->
    <header>
      <!-- メニューなどの共通要素 -->
    </header>
    
    <!-- メインコンテンツ -->
    <main>
      <%= yield %>
    </main>
    
    <!-- フッター -->
    <footer>
      <!-- フッターコンテンツ -->
    </footer>
  </body>
</html>

4行目で使われていることがわかると思います。

終わりに

理解して使いこなせるようになるとかなり便利だと感じることの一つですので、
この記事を読んで興味を持った方は是非理解を深めてみてください。
調べながら自分なりに解釈したことをまとめているため、何か不備などございましたらコメントいただけると幸いです。
ここまで読んでいただきありがとうございました。

参考・引用

【Rails】application.html.erbについて説明してみた

概要

目次

application.html.erbとは

基本的レイアウトの設定

追加の設定

パーシャル（部分テンプレート）を使う

ヘルパーを作成し導入してみる

終わりに