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

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

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

```html
<!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用のパーシャル

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

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

####header用のパーシャル

```html
<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パーシャルを追加する

```html
<!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を追加

```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 に戻ることを確認

```html
<!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に置き換える

```html
<%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application',
                               'data-turbolinks-track': 'reload' %>
```
プレビューで確認　成功

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