Rails layout と application.html.erbを共通化する方法

バックエンド開発•
Ruby on Rails

はじめに

Railsのアプリケーション開発では、見た目やレイアウトを統一したい場面が多いのではないでしょうか。
たとえば、画面上部のナビゲーションやページ下部のフッターを毎回書くのは手間ですし、部分的に修正が出たときにすべてのページを直すのは大変です。

Railsにはlayout機能が用意されていて、application.html.erbというファイルを利用することで全ページで共通化された外観を実現できます。
しかし、layoutは単に画面の見た目を統一するだけでなく、複数の異なるデザインを使い分けたいときや、一部のページだけに特別な構成を施したいときなど、さまざまな状況で役に立ちます。

本記事では、Railsのlayoutとapplication.html.erbをどのように共通化すればいいのか、具体例を交えながら分かりやすく説明していきます。
初心者の方にも理解しやすいように、基本的な設定手順や実務での活用例まで幅広くカバーしますので、ぜひ参考にしてください。

この記事を読むとわかること

  • Railsにおけるlayoutの概要と役割
  • application.html.erbの基本的な構造と使い方
  • yieldやcontent_forを使った効率的な共通化方法
  • partialでヘッダーやフッターを使い回す実装アイデア
  • 複数レイアウトを使い分けるポイントと実務での活用例
  • layoutをうまく活用するための注意点

Railsにおけるlayoutとは

Railsアプリケーションで同じ見た目を多くのページに反映させたいときに役立つのがlayoutです。
layoutファイルにはHTMLのベース構造をまとめておき、コンテンツ部分をyieldで差し込む仕組みが一般的です。

たとえば全ページに共通するヘッダーやフッター、サイドバーなどをlayoutにまとめておくと、コードの重複を大幅に削減できます。
加えて、複数のレイアウトを用意しておけば、管理画面用・ユーザー向け画面用といった使い分けも簡単になります。
こうした柔軟性から、Railsプロジェクトではlayoutを利用することがほぼ当たり前と言えるでしょう。

layoutを使うメリット

レイアウト機能を使うことで得られる主なメリットは以下のとおりです。

コードの重複を減らす

多くの画面で同じコードを書くのは手間ですが、layoutにまとめておくと一括管理しやすくなります。

デザインの変更が容易

レイアウトファイルを修正するだけで全ページの変更が完了する場合が多く、保守が楽になります。

複数のテーマを簡単に切り替えられる

コントローラごとに別のlayoutを指定すれば、管理画面やユーザー向け画面など異なる見た目を柔軟に使い分けられます。

このようにlayoutは、複数のファイルにまたがる共通要素を効率的に扱うために不可欠な存在です。
一度しっかり理解しておくと、Rails開発の生産性が大きく向上します。

application.html.erbの基本

Railsを新規に作成すると、app/views/layouts/application.html.erbというファイルが自動生成されます。
これは初期設定で全コントローラに適用される共通レイアウトファイルとして扱われます。

application.html.erbの中身はシンプルなHTML構造で始まることが多く、<head>タグや<body>タグを持ち、その中に<%= yield %>を含む形です。
この<%= yield %>の部分に、各ビューが描画する内容が差し込まれる仕組みになっています。

body内でのyieldの役割

yieldは、コントローラがレンダリングする各アクションのビューを差し込む場所です。
基本的にlayoutファイルは、全ページで共通して使いたいヘッダーやフッターをHTML上で囲み、その中にyieldをはさむイメージです。

たとえば以下のような構造が一般的です。

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Rails App</title>
  </head>
  <body>
    <header>
      <!-- ヘッダー部分（ナビゲーションなど） -->
    </header>

    <%= yield %>

    <footer>
      <!-- フッター部分 -->
    </footer>
  </body>
</html>

Railsにおけるyieldはとても重要です。
ここを中心に、各ビューのコンテンツが差し込まれることで、同じHTML構造の中で異なるページを表示できるようになります。

ヘッダーやフッターの差し替えをどう行うか

全ページで同じヘッダーやフッターを使い回すなら、直接application.html.erbの中に書いておく方法がわかりやすいです。
ただし、部分的に共通化したい場合や、さらに構造を整理して保守性を高めたい場合は、後述するpartialを活用すると便利になります。

ヘッダーやフッターだけ別ファイルに切り出して、それを<%= render partial: "shared/header" %>のように呼び出すアプローチを使えば、規模が拡大しても管理が楽になるでしょう。
ひとまず、application.html.erbにあるyieldの役割がページ内容の差し込みであることを押さえておけば、Railsのレイアウト構造の基礎がつかめます。

content_forを活用して細かな差異をコントロールする

layoutの中で細かいカスタマイズが必要になるケースがあるかもしれません。
たとえば、ページごとに違うタイトルやメタタグをセットしたい場合や、特定ページでしか使わないスクリプトを読み込みたい場合などが該当します。

そこでよく使われるのがcontent_forメソッドです。
content_forを使うと、特定のブロックで定義した内容を、layoutファイル内の任意の場所に差し込むことができます。

content_forの基本的な使い方

具体的には、以下のような流れで利用します。

  • ビュー側でcontent_for :キー名 do ... endを使い、任意の情報を定義する
  • layoutファイル（あるいは別のビュー）で<%= yield :キー名 %>を置いた場所に、先ほど定義した情報を埋め込む

例として、各ページでタイトルをカスタマイズする場合のコード例を見てみましょう。

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= content_for?(:title) ? yield(:title) : "デフォルトタイトル" %></title>
  </head>
  <body>
    <%= yield %>
  </body>
</html>
<!-- app/views/articles/index.html.erb -->
<% content_for :title do %>
  記事一覧ページ
<% end %>

<h1>記事一覧</h1>
<!-- 以下、記事の一覧を表示 -->

このようにyield(:title)を使うことで、コントローラのアクションごとに柔軟にタイトルを変えられます。
同様のやり方でメタタグやJavaScriptファイル、CSSなどを差し込みたい場合にもcontent_forはよく使われます。

partialを利用して共通要素をさらに整理する

layoutファイルが長くなると、読みやすさが下がったり、変更時の影響範囲が見通しにくくなったりすることがあります。
そこで登場するのがpartialです。
Railsでは、名前の先頭にアンダースコア（_）を付けたファイルをpartialとして扱い、テンプレートを再利用する仕組みを提供しています。

partialの具体例

ヘッダーやフッターをそれぞれ別ファイルに切り出して、application.html.erbから読み込む方法を考えてみましょう。
たとえばapp/views/layouts/_header.html.erbというファイル名でヘッダー部分を切り出すとします。

<!-- app/views/layouts/_header.html.erb -->
<nav>
  <!-- ナビゲーションバーのHTML -->
</nav>

これをapplication.html.erbから呼び出すには、たとえば以下のように書きます。

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Rails App</title>
  </head>
  <body>
    <%= render "layouts/header" %>

    <%= yield %>

    <%= render "layouts/footer" %>
  </body>
</html>

フッターも同様に_footer.html.erbを用意して、render "layouts/footer"で呼び出します。
こうすることで、ヘッダーやフッターのロジックが分離され、メンテナンス性が向上します。
それぞれの更新内容が他の部分に影響を及ぼしにくい構造になるため、共同開発や規模拡大にも対応しやすい形になります。

partialでデータを受け渡す

partialにはローカル変数を渡す方法もあります。
たとえばヘッダーでユーザー情報を表示したいときには、render "layouts/header", user: @current_userのように書き、partial内でuser変数を使うことが可能です。
これにより、layoutとビューの間で必要な情報をスムーズにやりとりできます。

複数レイアウトを使い分ける

共通化とは言え、アプリケーション内で複数の異なるレイアウトを使いたい場面は少なくありません。
たとえばフロントユーザー向けの画面と管理者向けダッシュボードで大きくUIが異なる場合、layoutファイルを分けておくと管理がしやすくなります。

コントローラ単位でlayoutを指定する

Railsでは、コントローラのクラス内でlayout "ファイル名"を指定すれば、そのコントローラが利用するレイアウトを自由に変えられます。
以下は例です。

# app/controllers/admin/base_controller.rb
class Admin::BaseController < ApplicationController
  layout "admin"

  # 管理画面の共通機能を定義
end

そして、app/views/layouts/admin.html.erbを作成しておけば、Admin::BaseControllerを継承するコントローラすべてがそのレイアウトを使います。
こうすると、管理画面専用のデザインを簡単に切り分けることができるでしょう。

アクション単位でlayoutを指定する

より柔軟に、アクションごとに異なるレイアウトを使い分けたいこともあるかもしれません。
その場合はlayoutメソッドにブロックを渡して、アクション名を条件分岐して返す実装が可能です。

class ArticlesController < ApplicationController
  layout :choose_layout

  def index
    # 一覧ページ
  end

  def special
    # 特別なレイアウトを使いたい
  end

  private

  def choose_layout
    if action_name == "special"
      "special_layout"
    else
      "application"
    end
  end
end

このようにコードを書くと、specialアクションだけ別のレイアウトを適用できます。
複数レイアウトをうまく使い分けることで、ページの多様なデザイン要求にも対応できます。

実務でlayoutを活用するシーン

実務では、とにかくデザインがコロコロ変わることがよくあります。
クライアントの要望やプロジェクトの進捗状況によって、ヘッダーの文言や色合い、フッターに入れるクレジットなど、細かな修正が頻繁に発生するものです。

layout機能によって、こうした修正が一か所の編集で全ページに反映されるのは便利です。
複数のレイアウトを用意し、用途ごとに切り替える仕組みを事前に整えておくと、大規模開発になってもページ数や機能が増えたときにパニックになりにくくなります。

特に、管理画面ではログイン機能やサイドバー、ダッシュボードなど、ユーザー向けとは全く違うレイアウト要素が必要になる場合があります。
そうしたケースでは、app/views/layouts/admin.html.erbやapp/views/layouts/user.html.erbといったように複数のレイアウトを作るのがおすすめです。

layoutとpartialを組み合わせた保守性の高い設計

部分的に同じ要素をさらに共通化したい場合は、partialを併用すると保守性がぐっと高まります。
たとえば管理画面と一般ユーザー向け画面で共通するフッターの下部コピーライト表記などは、_footer.html.erbにまとめておき、それぞれのlayoutから呼び出すようにするのがスッキリした実装です。

同様にヘッダーやサイドメニューでも、管理画面とユーザー画面の一部が似ているなら、共通部分をpartialに切り出したうえで、管理画面用とユーザー向けにロゴや配色だけ分ける方法が考えられます。
レイアウト間でも大枠は別だけれど、一部のパーツは共有したいという場面では、partialの存在がとても役立ちます。

複数のlayoutを運用するときには、共通化すべきパーツと個別実装すべきパーツを切り分ける設計が重要です。
予想以上に複雑になりすぎないよう、まずはよく使うパーツをpartialにまとめるのがおすすめです。

便利なヘルパーやレイアウト関連メソッド

layoutをうまく使いこなすうえで、Railsが用意している便利なメソッドや仕組みを押さえておくとさらに開発がスムーズになります。
以下のようなものが代表的です。

renderヘルパー

renderは部分テンプレート（partial）の呼び出しだけでなく、別のレイアウトを一時的に使ってビューを描画する場合にも利用できます。
必要に応じてrender(layout: "other_layout") { ... }のような書き方をすることも可能です。
これはあまり頻繁に使うケースではありませんが、単一アクション内で別レイアウトを明示的に指定したいときに役立ちます。

before_actionやhelper_method

コントローラ内で共通的に使うインスタンス変数やメソッドを定義しておくと、layoutファイルでの表示制御に使いやすくなります。
たとえば、ログインユーザーが管理者かどうかを判定し、それによってレイアウト内のメニュー項目を出し分けたい場合などが典型的です。

よくあるトラブルと対処方法

レイアウトを使う際に起こりがちなトラブルや疑問点も、あらかじめ理解しておくとスムーズです。

部分テンプレートが読み込めない

render "layouts/header"の記述が正しくても、ファイル名やフォルダ構成が誤っているとエラーになります。
Railsはデフォルトでapp/views/ディレクトリ配下を探しますので、ディレクトリ名やファイル名に誤りがないか確認しましょう。

layoutが意図せず切り替わっている

複数のlayoutを定義している場合、コントローラやメソッドでのlayout設定に気づかず、別レイアウトが適用されることがあります。
必要であれば、コントローラ内でlayout nilを設定するとレイアウトそのものを使用しない動作を確認できるので、原因を切り分けるのに便利です。

yieldが複数ある場合の動き

レイアウト内にyieldを複数置くことも一応可能ですが、どこにどんなコンテンツが入るのか混乱しないように注意が必要です。
視覚的に明確な目的があってyieldを複数使う場合以外は、content_forで細分化するのがより安全です。

layoutやpartialを頻繁に変更すると、各コントローラやビューの関連付けにミスが生じやすくなります。
設定の変更は段階的に行い、誤動作したらすぐ戻せるようバージョン管理を徹底しておくと安心です。

実務目線でのフォルダ構成アイデア

Railsである程度の規模感を持った開発をしていると、レイアウトやパーツが数多く作られる傾向があります。
そこで、以下のようにapp/viewsの下を少し整理すると運用しやすいです。

  • app/views/layouts/application.html.erb
    • メインのレイアウトファイル
  • app/views/layouts/admin.html.erb
    • 管理画面用のレイアウトファイル（必要に応じて増やす）
  • app/views/layouts/_header.html.erb
    • ヘッダーパーツ
  • app/views/layouts/_footer.html.erb
    • フッターパーツ
  • app/views/shared/*
    • コントローラに依存しない共通部品（例えばモーダルウィンドウなど）

このように用途ごとにフォルダを分けておくことで、レイアウト関連のファイルが増えても衝突や混乱を起こしにくくなります。
特に共同開発では、命名や配置ルールをチーム内で統一しておくと後から参画した人も分かりやすくなるでしょう。

layout共通化のポイントを押さえて効率的なRails開発を

ここまで解説してきたように、Railsのlayoutとapplication.html.erbを活用することで、ページ全体のデザインや構造を簡単に共通化できるようになります。
さらに、partialやcontent_forを組み合わせれば、細かな違いにも対応しやすくなります。

特に実務での大規模開発では、複数のレイアウトを使ったり、一部のみをpartialとして共通化したりといったパターンが頻出します。
こうした工夫を事前に仕込んでおくことで、保守コストを抑えながら開発をスピードアップできるのです。

まとめ

Railsアプリケーションにおいて、layoutは見た目や構造を大きく左右する重要な仕組みです。
application.html.erbを中心に、yieldとcontent_for、そしてpartialを上手に使いこなせば、重複コードの削減やデザイン修正のしやすさを実感できるでしょう。

以下のポイントを改めて整理しておきます。

layoutの基本

Railsではapplication.html.erbがデフォルトレイアウトとして扱われ、各ビューの内容はyieldに差し込まれる

複数レイアウトの活用

管理画面などで別のデザインが必要な場合は、コントローラやアクション単位でレイアウトを切り替える

partialと組み合わせる

ヘッダーやフッター、共通パーツをpartialとして分割し、レイアウトをすっきり保つ

content_forで柔軟な差し込み

タイトルやメタタグなど、ページごとに微妙に変えたい要素にcontent_forを利用する

これらの使い方に慣れておけば、要件が変化しやすい現場でも素早く対応できます。
ぜひ実際のアプリケーションでlayoutやpartialを取り入れ、保守しやすいRailsプロジェクトを実現してみてはいかがでしょうか。

Ruby on Railsをマスターしよう

この記事で学んだRuby on Railsの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

Ruby on Railsの人気講座ランキングを見る筆者おすすめ No.1 講座！「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しよう」
バックエンド開発の新着記事をチェック

バックエンドエンジニア とは？仕事内容・必要スキル・将来性を徹底解説