カテゴリ: Rails 更新日: 2025/12/09

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

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

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

生徒

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

先生

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

生徒

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

先生

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

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

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

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

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

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

2. 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の仕組みをわかりやすく理解

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

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

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

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

4. content_forで部分的に切り替える
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を使ってみよう

5. 複数の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の違いを整理

6. content_forとyieldの違いを整理
6. content_forとyieldの違いを整理

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

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

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

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

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

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

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

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

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

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

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


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

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

関連記事:
カテゴリの一覧へ
新着記事
New1
データベース
SQLの処理が遅くなる原因とは?初心者向けにデータベースパフォーマンス最適化を完全解説
New2
Ruby
RubyのネストHash操作を徹底解説!digとtransformメソッドで複雑なデータも楽々
New3
Rails
Railsインデックス設計の極意!爆速サイトを作るためのスキーマ設計ガイド
New4
データベース
SQLのCOMMITとROLLBACKとは?トランザクション操作を初心者向けに完全解説
人気記事
No.1
Java&Spring記事人気No1
Rails
Railsで日本語と時刻の設定をしよう!初心者でも安心のlocale/zone初期設定チートシート
No.2
Java&Spring記事人気No2
Ruby
PATHと環境変数の正しい設定!Windows・Mac・Linux別チェックリスト付き
No.3
Java&Spring記事人気No3
Ruby
Rubyのハッシュを徹底比較!シンボルキーと文字列キーの違いと使い分け
No.4
Java&Spring記事人気No4
Rails
Railsマイグレーションの型選びを完全ガイド!初心者が迷わないカラム設計
No.5
Java&Spring記事人気No5
Ruby
WindowsでRubyをインストールする方法!RubyInstallerとMSYS2を使った完全ガイド
No.6
Java&Spring記事人気No6
Rails
RailsモデルとActive Record基礎|ID戦略を完全理解!AUTO INCREMENT・UUID・ULIDの比較と導入手順
No.7
Java&Spring記事人気No7
データベース
ACID特性とは?データベーストランザクションの信頼性を初心者向けに徹底解説
No.8
Java&Spring記事人気No8
データベース
データベース正規化とは?初心者でもわかるデータ重複を防ぐSQL設計の基本