『Ruby on Rails 5 アプリケーションプログラミング』を学習する13

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

序文

Ruby on Rails 5 アプリケーションプログラミング」学習13日目。
ビュー開発もようやく終盤。
すっかり1日1項がデフォになってしまった。難しいんだもん。

GitHub

github.com

進捗

  • 第4章 ビュー開発
    • 4.7 アプリ共通のデザインを定義する - レイアウト
      (学習時間:2.5時間)

コード実装部分

↓/config/routes.rb

# 省略

  get  'view/provide'

  get  'view/multi'
  get  'view/relation'
  get  'view/download'
  get  'view/quest'

  get  'view/nest'
end

↓/app/layouts/application.html.erb

<%# レイアウトテンプレート(デザインの外枠) %>
<!DOCTYPE html>
<html>
  <head>
    <%# コントローラーから@titleが渡されなかった場合、 %>
    <%# デフォルトのタイトルを表示する %>
    <title><%= @title || 'カロリーメイトください' %></title>
    <%# provideヘルパーでレイアウトからタイトルを渡すこともできる %>
    <%# <title><%= yield(:title) || 'カロリーメイトください' %_></title> %>
    <%= csrf_meta_tags %>

    # 省略

↓/app/controllers/view_controller.rb

  # 省略

  def multi
    # layoutレイアウトを設定
    render layout: 'layout'
  end

  # テンプレートの入れ子
  def nest
    @msg = 'view_controllerで設定したメッセージ'
    # コントローラーからの呼び出しはrender layout:を使う
    # layouts/child.html.erbを呼び出す
    render layout: 'child'
  end
end

↓/app/views/view/multi.html.erb

<%# レイアウトに複数のコンテンツを流す例 %>

<%# レイアウト側で %>
<%# <%= yield :extend_menu %_> %>
<%# という記述で受け取る %>
<% content_for :extend_menu do %>
  ここは固有レイアウト内で定義されています
<% end %>

<%# ここからは通常の<%= yield %_>で受け取る %>
<div id="main">
  ここも固有レイアウト内で定義されています
</div>

↓/app/views/view/nest.html.erb

ここは通常のテンプレートのnest.html.erbで記述されています<br>
<%= @msg %><br>
ここも通常のテンプレートのnest.html.erbで記述されています

↓/app/views/layouts/child.html.erb

<%# テンプレートの入れ子 %>
<%# 子テンプレートではcontent_forメソッドを使って %>
<%# 親テンプレートから呼び出せるようにする %>

<%# 親テンプレートからはyield(:content)で呼び出せる %>
<% content_for :content do %>
ここはレイアウトテンプレートのchild.html.erb内で記述されています<br>
<%# ここは通常のレイアウトファイルが適用されたコンテンツ %>
<%# view/nest.html.erbの内容が入る %>
<%= yield %><br>
ここもレイアウトテンプレートのchild.html.erb内で記述されています<br>
<% end %>
<%# 親テンプレートを呼び出す %>
<%# テンプレートからテンプレートを呼び出すときは %>
<%# render template:を使う %>
<%= render template: 'layouts/parent' %>

↓/app/views/layouts/parent.html.erb

ここはレイアウトテンプレートのparent.html.erb内で記述されています<br>
<%# ↓ここには子テンプレートでcontent_forメソッドで %>
<%# :contentに渡された内容が入る %>
<%= yield(:content) %>
<%# <%= content_for?(:content) ? yield(:content) : yield %_> %>
ここもレイアウトテンプレートのparent.html.erb内で記述されています<br>

実行結果

f:id:yjkym:20180405152751p:plain

感想

今日はレイアウトテンプレートについて。
一応ざっくりとは理解しているけど、入れ子で使うみたいなことはやっていなかったので勉強になった。

なんかしっくり来ないなーと思っていたんだけど、レイアウトテンプレートと各コントローラーに固有のテンプレートが同じ階層に保存されているからだと思う。
この2つをちゃんと意識して区別しないとなかなか理解しにくい気がする。
カロリーメイトください。

BGM

dinosaur / せりかな www.youtube.com ミスチル感がすごい。