rails tutorial5章進めた時の覚書

第5章では何をするの?

• アプリにBootstrapむみこんで、スタイルをカスタムするよ
• これまで作成したへのリンクを追加するよ
• リンク追加の中で、パーシャル、Railsのルーティング、Asset Pipelineについて学ぶよ
• Sassの紹介もあるよ
• 最後にユーザーログインへの1歩も踏み出すよ

リンクの生成 link_to

リンクの生成には、Railsヘルパーのlink_toを使う
第一引数はリンクテキスト、第2引数はURL、第3引数はオプションハッシュ※必須ではない

<%= link_to "sample app", '#', id: "logo" %>

<li><%= link_to "リンクテキスト", 'URL' %></li>
<li><%= link_to "Help",   'help' %></li>
<li><%= link_to "Log in", '#' %></li>

image_tagヘルパー

引数として画像ファイルのパスと任意のオプションハッシュをとる
シンボルを使ってalt属性やwidth属性などを設定できる

<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"),
                      "https://rubyonrails.org/" %>
　　　　　　　　　　　　　# ↑"https://rubyonrails.org/"これは何してるん

# 生成されたコード
<img alt="Rails logo" width="200px" src="/assets/rails-<long string>.svg">

long stringの箇所は、Railsが追加している。画像ファイルを新しい画像に更新したときに、ブラウザ内に保存されたキャッシュに意図的にヒットさせないようにするため

image_tagヘルパーを使うことにより、Railsは該当する画像ファイルを、アセットパイプラインを通してapp/assets/images/ディレクトリの中から探してくれる

Bootstrapの追加は、bootstrap-sass gemを使ってRailsアプリケーションに導入できる
gemfileに追加

gemfile

gem 'bootstrap-sass', '3.4.1'

gemfile更新後はbundle install

$ bundle install

次のディレクトリは、Asset Pipelineの一部であり、このディレクトリに置かれたスタイルシートはapplication.cssの一部としてWebサイトのレイアウトに読み込まれる。

app/assets/stylesheets/

vscode上でrubyのコードコメントアウトしても、色が非アクティブ(グレー)にならないから効いてないのかと思ってたけど、ちゃんとコメントアウトできてた。

<!--<%= link_to image_tag("kitten.jpg", alt: "Rails logo") %>-->

# 効いてないのかと思って、 < 削除してたんだけど、その必要はないようだ。
<!--%= link_to image_tag("kitten.jpg", alt: "Rails logo") %>-->

パーシャル

HTMLヘッダーは論理的な単位で分けられる。
Railsでは パーシャル機能で、コード毎にファイルを分割できる。

下記のように記述することで、layouts/_header.html.erbファイルを読み込むことができる。

application.html.erb

<%= render 'layouts/header' %>

パーシャルを利用する際は、 ファイル名の先頭に_アンダースコアを使うという普遍的な命名規則がある。

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

アセットパイプライン

3つの機能の理解をする必要がある

• アセットディレクトリ
• マニフェストファイル
• プリプロセッサエンジン

アセットディレクトリ

静的ファイルを目的別に分類する、標準的な３つのディレクトリ

• app/assets: 現在のアプリケーション固有のアセット
• lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
• vendor/assets: サードパーティのアセット（デフォルトでは存在しない）

マニフェストファイル

マニフェストファイルを使って、アセットディレクトリに配置したファイルをどのように1つのファイルにまとめるのかRailsに支持することができる。
実際にアセットをまとめる処理を行うのはSprocketsというgem
マニフェストファイルはCSSとJavaScriptには適用されますが、画像ファイルには適用されない

プリプロセッサエンジン

必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します。

アセットパイプラインのメリット

開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してる。

アセットパイプラインの最大のメリットの1つは、本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成されること
開発者的にはcssは圧縮していない方が見やすいが、システム的には表示速度の観点から圧縮されていた方が良い。

開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化する。

具体的には、Asset Pipelineがすべてのスタイルシートを1つのCSSファイル（application.css）にまとめてくれる。
さらに、それらのファイルすべてに対して 不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれる。

urlの表示

root_path: URL以下の文字列を表示
root_url: 完全なURLの文字列を返す

root_path -> '/'
root_url  -> 'https://www.example.com/'

名前付きルートの定義

get 'static_pages/help'

#getルールを利用
get  '/help', to: 'static_pages#help'

getルールを使うと、GETリクエストが/help に送信されたときにStaticPagesコントローラーのhelpアクションを呼び出してくれるようになる。

routes.rb

Rails.application.routes.draw do
  root 'static_pages#home'
  get  '/help',    to: 'static_pages#help'
  get  '/about',   to: 'static_pages#about'
  get  '/contact', to: 'static_pages#contact'
end

上記のように記述し、下記のように書くとリンクが生成されるが、第二引数の help_pathとかの名称はどこで定義されてるんだ？

<ul class="nav navbar-nav navbar-right">
    <li><%= link_to "Home",   root_path %></li>
    <li><%= link_to "Help",   help_path %></li>
    <li><%= link_to "About",  about_path %></li>
    <li><%= link_to "Contact",  contact_path %></li>
</ul>