Railsのレイアウトの作り方を完全解説!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が適用されます。管理画面などで、見た目を切り替えたいときに便利です。