Railsのレイアウトの作り方を完全解説！application.html.erb・yield・content_forの使い方

レイアウトの作り方：application.html.erb・yield・content_for徹底解説

先生と生徒の会話形式で理解しよう

生徒

「Railsでページ全体のデザインを統一したいんですけど、何を使えばいいですか？」

先生

「Railsにはレイアウト機能があるので、application.html.erbというファイルで共通部分をまとめられますよ。」

生徒

「よくyieldとかcontent_forって見かけますが、どう使うんですか？」

先生

「では、レイアウトの基本から順番に説明していきましょう！」

1. レイアウトファイルとは？

Railsでは、すべての画面の共通部分を「レイアウトファイル」にまとめて書くことができます。これにより、ヘッダー・フッター・ナビゲーションなどを一括で管理できます。

レイアウトの代表的なファイルがapp/views/layouts/application.html.erbです。これは、アプリケーション全体に適用されるメインレイアウトとして機能します。

2. application.html.erbの基本構造

このファイルには、HTMLの基本構造と、共通で使いたい要素を書きます。中心的なポイントがyieldです。


<!DOCTYPE html>
<html>
  <head>
    <title>MyApp</title>
  </head>
  <body>
    <header>ヘッダー</header>
    <main>
      <%= yield %>
    </main>
    <footer>フッター</footer>
  </body>
</html>

<%= yield %>の位置に、各ページの中身（ビューの内容）が差し込まれます。

3. yieldの仕組みをわかりやすく理解

yield（イールド）は、Rubyの「呼び出し元に処理を返す」キーワードです。Railsでは、レイアウトの中でビューの中身を表示したい場所にyieldを使います。

たとえばusers/index.html.erbを表示するとき、application.html.erbのyieldの位置に、その中身が挿入されます。

4. content_forで部分的に切り替える

content_for（コンテントフォー）を使うと、ページごとに特定の場所だけ別の内容を表示できます。よくある例が、ページのタイトルやメタタグの切り替えです。


<!-- application.html.erb -->
<head>
  <title><%= yield :title %> - MyApp</title>
</head>


<!-- 各ビュー側 -->
<% content_for :title, "ユーザー一覧" %>

yield :titleは、content_forで渡された内容を表示するための場所です。これにより、全体のデザインは共通のまま、ページごとのタイトルだけを自由に変更できます。

5. 複数のcontent_forを使ってみよう

content_forは1つだけでなく、複数の場所に使えます。たとえばJavaScriptやCSSを読み込む場所なども、各ページごとに切り替えられます。


<!-- application.html.erb -->
<head>
  <%= yield :head %>
</head>
<body>
  <%= yield %>
  <%= yield :scripts %>
</body>


<!-- 各ビュー -->
<% content_for :head do %>
  <meta name="robots" content="noindex">
<% end %>

<% content_for :scripts do %>
  <script>alert('ようこそ！')</script>
<% end %>

このように、レイアウト内に複数のyield :○○を書いておけば、それぞれの場所に対して柔軟に内容を挿入できます。

6. content_forとyieldの違いを整理

初心者が混乱しやすいのが、yieldとcontent_forの違いです。ここで簡単にまとめましょう。

yield：ビュー全体を表示する位置に使う（メインの中身）
yield :名前：特定の内容だけを表示する位置に使う
content_for :名前：特定の内容を定義する（レイアウトに渡す）

この2つを組み合わせることで、Railsの画面は統一感がありながら柔軟な構造を作ることができます。

7. レイアウトを使うメリットとは？

Railsでレイアウトを使うと、次のようなメリットがあります：

HTMLの重複を減らせる（ヘッダーやフッターを1か所にまとめられる）
デザインの統一ができる（CSSやJavaScriptの読み込みを統一）
保守がしやすくなる（変更が1か所で済む）

特に初心者にとっては、「何度も同じコードを書く」必要がなくなるので、作業効率がぐんと上がります。

8. コントローラごとのレイアウト切り替え

application.html.erbは全体に適用されますが、コントローラ単位で別のレイアウトを使いたい場合は、コントローラに次のように書きます：


class Admin::UsersController < ApplicationController
  layout "admin"
end

このように書くと、app/views/layouts/admin.html.erbが適用されます。管理画面などで、見た目を切り替えたいときに便利です。

実務の壁を乗り越える【Ruby on Rails 実務開発特別演習】

職業訓練講師が最短攻略！Ruby on Railsによる「商用API開発」とDB最適化の極意。

商用開発基準を身につけ、エンジニアとしての市場価値を最大化する

職業訓練講師が最短攻略！Ruby on Railsによる「商用API開発」とDB最適化の極意。

モダンWeb開発のデファクトスタンダードRuby on Rails。本講座では、その圧倒的開発スピードの核にある「Active Record」を完全解剖。「設定より規約」を体現した効率的なアーキテクチャ設計を学び、JWT認証やバックエンドAPI構築など、現場で必須となるエコシステムの繋ぎ方を60分で濃縮体験します。