More than 3 years have passed since last update.

railsチュートリアル第五章パーシャル

Posted at 2021-09-18

パーシャル

レイアウトのコードはその目的を果たしていますが、まだ少々散らかっている。
例えば、IE特有の風変わりな文法のHTML shimだけで3行も占有しています
これを隠せたら良い。
HTMLヘッダーは論理的な単位として分けられるため、一箇所にまとめた方が便利です。
Railsではパーシャル（partial）という機能でこのような課題を解決

レイアウトにshimとheaderのパーシャルを追加する

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

renderと呼ばれるRailsヘルパー呼び出しだけを使って、HTML shimのスタイルシート行を置換
この行では、app/views/layouts/_shim.html.erbというファイルを探してその内容を評価し、結果をビューに挿入

ファイル名_shim.html.erbの先頭にあるアンダースコアに注目
このアンダースコアは、パーシャルで使う普遍的な命名規約であり、また、一目見ただけでディレクトリ中のすべてのパーシャルを識別することが可能

パーシャルが動作するためには、それに対応するファイルとコンテンツを記述しなければなりません

HTML shim用のパーシャル

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

ヘッダーの情報もリスト 5.14のパーシャルに移動し、renderを呼び出してレイアウトに挿入することができます。

header用のパーシャル

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", '#', id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   '#' %></li>
        <li><%= link_to "Help",   '#' %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>

フッターのパーシャルもある。
ひとまず、リンク先のURLは'#'としておきます
フッターの中でもlink_toメソッドを使って、AboutページとContactページへの内部リンクを追加

レイアウトにfooterパーシャルを追加する

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

footerにもスタイルを足します

サイトにfooter用CSSを追加

.
.
.
/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

演習

1.Railsがデフォルトで生成するheadタグの部分を、リスト 5.18のようにrenderに置き換えてみてください
2.実際にテストを実行して確認してみましょう　結果　red
3.layoutsディレクトリにheadタグ用のパーシャルを作成、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= render 'layouts/rails_default' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

renderに置き換える

<%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application',
                               'data-turbolinks-track': 'reload' %>

プレビューで確認　成功

知らず知らずに１から３まで解いていた。よかった。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

railsチュートリアル第五章 パーシャル