1. はじめに

この記事は、Rails初学者の工業大学三年生がRailsチュートリアルの学習記録を
つけるための記事です。
筆者自体がRailsやWebについて知識が少ないので、内容の解釈などに
間違いがある可能性があります。(その時はコメントで指摘してくださると助かります！)
Railsチュートリアル内ではRailsの内容以外にも、gitでのバージョン管理やHerokuを使ったデプロイも
学習しますが、gitに関しては既に私が学習済みのため学習記録には記述しません。
演習の記録も省略します。

2. 第5章の概要

この章ではBootstrapを使用して、サンプルアプリケーションにカスタムスタイルを組み込みます。
その途中でビューファイルなどの既存のファイルを扱いやすくなるような
パーシャル、アセットパイプライン、名前付きルーティングを学んでいきます。
ただ、Bootstrapはフロント寄りの内容なので細かく記録はしません。

アセットパイプラインとは
パーシャル
1. パーシャルとは
2. パーシャルでHTMLを分割する
名前付きルート
1. 名前付きルートを使う準備
2. 名前付きルートをルーティングに設定する

3. 学習内容

1. アセットパイプライン

1-1. アセットパイプラインとは

アセットパイプラインとはCSS, JavaScript, ビューで使用する画像といったアプリケーション内の静的コンテンツを、
1つのファイルにまとめる仕組みのことです。
Railsアプリケーションの開発においてそれらのファイルはapp/assetsの下にある、
stylesheets, images, javascriptsといったディレクトリに保存します。

このように、ファイル自体は別々のディレクトリに保存されていますが、
アセットパイプラインによってそれらのファイルにアクセスするときは、
ファイル名のみでアクセスすることができます。
例えば、app/assets/images/ディレクトリに保存した画像をビューで表示させたいときは、以下のように書きます。
<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"), "https://rubyonrails.org/" %>
image_tagというヘルパーを使用することで、Railsがapp/assets/images/ディレクトリ内からrails.svgという画像を探してくれます。

これによる主なメリットは本番環境でのユーザー体験にあります。
プログラマとしてはファイルの種類ごとにディレクトリが分かれていたほうが開発しやすいですが、
その分読み込み時間が長くなってしまいます。
この問題をアセットパイプラインは、分割されたファイルを結合し最小化するという方法で読み込み時間を短くして解決しています。

2. パーシャル

2-1. パーシャルとは

RailsではHTMLヘッダーやHTML shim(IEに対応させるためのコード)といった1つのグループとして考えられるようなコードを、
それぞれのファイルに分割して、実際にそれを使用したいファイルで分割したファイルを呼び出すといった方法を取ることができます。
この方法によりビューの共通部分を記述したapplication.html.erbが以下のように書き換えられます。

↓書き換え前

app/views/layouts/application.html.erb

<!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' %>
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
    </script>
  <![endif]-->
  </head>
  <body>
    <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>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

↓書き換え後

app/views/layouts/application.html.erb

<!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' %>  <!-- パーシャル使用部分1 -->
  </head>
  <body>
    <%= render 'layouts/header' %>　　<!-- パーシャル使用部分2 -->
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

書き換え後のコードでは、コメントがある2箇所でパーシャルを使用しています。
1つ目は<%= render 'layouts/shim' %>という行で、IEに対応するための部分を別のファイルに移してそれを読み込んでいます。
読み込むときに使用しているヘルパーはrenderというヘルパーで、このヘルパーが実行されると
app/views/layouts/_shim.html.erbというファイルを探してその内容を挿入します。

2つ目は<%= render 'layouts/header' %>という行で、ヘッダー部分を読み込んでいます、
このヘルパーではapp/views/layouts/_header.html.erbというファイルを探してその内容を挿入します。
2つの例から見て分かるように、パーシャルはファイル名の先頭にアンダーバーを入れる必要があります。
これによってRailsはパーシャルかどうかを識別しています。

2-1. パーシャルでHTMLを分割する

先述したコードはパーシャルを呼び出す側のコードです。
次は、分割されたパーシャルの内容を見ていきます。

↓HTML shimのパーシャル

app/views/layouts/_shim.html.erb

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

↓headerのパーシャル

app/views/layouts/_shim.html.erb

<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>

上記の二つのコードは元々application.html.erbに記述されていたコードです。
つまり、パーシャルを使用したいときは、アンダーバーが名前の初めについたファイルを
app/views/layoutsの下に作成し、そこにコードをカット＆ペーストして、元のファイルでrenderヘルパーを記述するだけで使用できます。

3. 名前付きルート

3-1. 名前付きルートとは

名前付きルートとはビューへのリンクなどを書くときに、
<a href="/static_pages/about">About</a>
上記のようにURLを直接記述するのではなく、
<%= link_to "About", about_path %>
このabout_pathのようにリンク先を書くことができるようになるものです。

名前付きルートを使用することで、上記の例であればabout_pathの定義を変えることで
about_pathが使用されているURLをすべて変更できるので、柔軟性が高まるといったメリットがあります。

3-2. 名前付きルートを使う方法

ここからは名前付きルートを使うための準備をしていきますが、
既に名前付きルートを使用した場面があります。
それがroot 'application#hello'というコードです。
これはルートURL("/")をhelloアクションに紐づけているコードで、これによりroot_pathとroot_urlといったメソッドが
使用できるようになっています。
上記のルーティングはルートURLの名前付きルートなので、それ以外のページを同じように書くことはできません。

例えばhelpページのルーティング
get 'static_pages/help'を変更するときは、
get '/help', to: 'static_pages#help'と書きます。
これによりhelp_pathやhelp_urlといった名前付きルートが使用できるようになります。
ちなみにこの2つは返ってくる文字列が違います。
・help_path → '/help'
・help_url → 'https://www.example.com/help'
pathはルートURL以下の文字列、urlは完全なURLの文字列が返ってきます。

また上記の方法ではアクション名を使った名前付きルートになりますが、
全く違う名前を使用したいときはas:オプションを使用します。
as:オプションを使った書き方は以下の通りです。
get '/help', to: 'static_pages#help', as: 'herupu'
このコードではhelpアクションをherupuという文字列を使って表しています。
よって、herupu_pathやherupu_urlが使用できるようになります。

4. 終わりに

第5章ではこれまでに作成した、ビューへのスタイルの適用を中心に学びました。
私の記事では、フロントエンドの内容より、バックエンドの内容を振り返りたいのでBootstrapやSassの内容でなく、
アセットパイプラインやパーシャルといったRailsの特長と言える部分について記録するようにしました。
前回の投稿から期間が空きましたが、第6章の内容まで進めた後にこの記事を書いているので次の記事はすぐに投稿する予定です。

Rails初学者によるRailsチュートリアル学習記録⑦ 第5章

目次