🖼️

Layouts & yield

ページの共通骨格をレイアウトで管理

Layoutは全ページに共通適用されるHTML骨格です。

<%# app/views/layouts/application.html.erb %>
<!DOCTYPE html>
<html>
<head>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag 'application' %>
</head>
<body>
  <nav>共通ナビゲーション</nav>

  <% if content_for?(:sidebar) %>
    <aside><%= yield :sidebar %></aside>
  <% end %>

  <main><%= yield %></main>  <%# 各ページの内容がここに挿入 %>

  <footer>共通フッター</footer>
</body>
</html>

content_for:

<%# app/views/posts/show.html.erb %>
<% content_for :sidebar do %>
  <nav>サイドバー内容</nav>
<% end %>

<h1>本文内容</h1>  <%# この部分がyieldに挿入 %>

レイアウト指定:

  • layout 'admin' — コントローラ単位

  • render layout: 'special' — アクション単位

  • layout false — レイアウトなしでレンダ

キーポイント

1

app/views/layouts/application.html.erb — デフォルトレイアウト

2

yield — 各アクションのビュー内容が挿入される位置

3

content_for :name — 特定領域にコンテンツ挿入（サイドバー、ヘッド等）

4

yield :name — content_forで挿入された内容を出力

5

layout "admin" — コントローラで別レイアウトを指定

6

content_for?(:name) — 該当領域にコンテンツがあるか確認

メリット

  • ✓ 共通HTML構造を一箇所で管理
  • ✓ content_forで柔軟な領域別コンテンツ挿入
  • ✓ レイアウト交換が簡単
  • ✓ DRY — 全ページに同じnav/footer

デメリット

  • ✗ content_for乱用時にフロー把握が困難
  • ✗ ネストレイアウトはサポートされない（gem必要）
  • ✗ JavaScript/CSSをcontent_forで挿入すると管理が困難

ユースケース

サイト全体共通レイアウト 管理者/ユーザー別レイアウト ページ別サイドバー/メタタグ挿入 メールテンプレートレイアウト
← 📄 ERB & Partials 📝 Form Helpers →