読者です 読者をやめる 読者になる 読者になる

ボクココ

サービス開発を成功させるまでの歩み

Rails の content_for のつかいどき

Rails

ども、@kimihom です。

今回は Rails の ActionView における、content_for について。まずは簡単な使い方からおさらいしよう。

f:id:cevid_cpp:20151031172102j:plain

content_for の使い方

例えば、 app/views/layouts/application.html.erb がこんな作りになっていたとする。

<!DOCTYPE html>
<html>
<head>
  <title><%= page_title %></title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

<%= javascript_include_tag 'application' %>

<%= yield :footer %>

</body>

JavaScriptの読み込みはRailsだと巨大になりがちなので、こうやってbodyの下の方に置くのが良いとされている。さて、ここで注目いただきたいのは、 <%= yield :footer %> の記述だ。content_for を使う上でシンボルの名前付き yield をレイアウト側に定義しておく。

すると、例えば「個別のViewでページロード時にJavaScriptを実行したい。」としよう。すると以下のようなコードになる。app/views/welcome/index.html.erb とでもしておこう。

<div id="welcomePage">
  <h1>ようこそ。</h1>
  <p>こんにちは、<span id="name"></span></p>
</div>

<script>
$(function() {
   $("#name").text("テストさん");
});
</script>

このコードは正しく動かない。なぜならば、 yield の後に application.js を読み込んでいるため、 $がまだ定義されていない状態のためだ。こういうとき、content_for を使って、正しい位置にscriptタグを挿入してあげることで、問題を解決できる。

<div id="welcomePage">
  <h1>ようこそ。</h1>
  <p>こんにちは、<span id="name"></span></p>
</div>

<% content_for :footer do %>
<script>
$(function() {
   $("#name").text("テストさん");
});
</script>
<% end %>

このように、元のレイアウト内の特定の場所にコードを配置していきたいときに、content_for は便利なヘルパーメソッドである。

この使い方の他に、レイアウトファイルの<head>要素内に yield を用意し、そこで content_for を使えばヘッダに記述する内容も、個別のviewファイルで管理することが可能となる。

そう考えると、content_forなかなか便利なメソッドではないだろうか。