Railsチュートリアル(第4版)の個人メモ
気になった部分、忘れそうな部分を記述。

Ruby 2.6.1
Rails 5.1.6

5章では、パーシャル、Railsのルーティング、Asset Pipeline、Sass、統合テストなどについて学習

5章レイアウトを作成する

5.1 構造を追加する

チュートリアルでは、デザインについてはBootstrapで楽をする。
通常作業ではモックアップも作成しつつ行う部分。

下記はモックアップ作成ツール
https://gomockingbird.com/home

5.1.1 ナビゲーション

Railsは読み込みの高速化のために、アセット類は同じディレクトリに有るように見せかける。
画像やjs, cssなども同様。

画像タグの表示

image_tag("image_hogehoge.jpg", alt: "hogehoge image")

# 出力されるHTML
# <img alt="hogehoge image" src="/assets/image_hogehoge-44dde42a7808d66c6f314c6587e2c0faabb03d8a3c2c47e4d07e09c08e3c1c6b.jpg">

5.1.2 BootstrapとカスタムCSS

RailsのAssetPipelineは、デフォルトでSassに対応。
今回使うbootstrapのgem bootstrap-sass は、Sassで記述できる。
sass、cssについてはわかるので省略。

5.1.3 パーシャル (partial)

render Railsヘルパー呼び出し
app/views/引数に取った/_文字列.html.erb を読みこむ

<%= render 'layouts/shim' %>
<!-- 上記では app/views/layouts/_shim.html.erb を探して、評価 -->

パーシャルの命名規則は上記の通り、アンスコから始まるもの。
ディレクトリ内で何がパーシャルか分別しやすい。

5.2 Sassとアセットパイプライン

5.2.1 アセットパイプライン

アセットパイプラインでは静的コンテンツの管理に便利な機能を備えている。
チュートリアルでは主要な機能3つが挙げられている。

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

いずれも、ファイルを一つにまとめ、読み込みの効率化を図り、
開発のしやすさも担保してくれるもの。

アセットディレクトリ

静的ファイルを目的別に分類。標準では以下3つ

app/assets: アプリ用
lib/assets: ライブラリ用
vendor/assets: サードパーティ用

それぞれに images, javascripts, stylesheets 等ディレクトリが掘ってある。

マニフェストファイル

Sprockets というgemが、マニフェストファイルを参照して、
アセットの指定箇所に置いたCSSとJSを結合する。
画像ファイルは管轄外。
チュートリアルではデフォルトのまま使用

プリプロセッサエンジン

Ralisでは、.erbや.coffeeなど、拡張子で判断し、どのプリプロセッサを通すか判断する。
このとき、拡張子は複数チェインでき、右から順にプリプロセッサにかけることになる。
hogepiyo.js.erb.coffee
CoffeeScript -> EmbededRuby -> Javascript

5.2.2 素晴らしい構文を備えたスタイルシート (Sass, SCSS)

Sass (よく使われるのはSCSS) のネストと変数について。
cssはなかなかどうして使い勝手が良くないので、Sassは助かる。
railsは .scss 拡張子のファイルをsassプリプロセッサで処理してくれるので、そのまま hogepiyo/assets/stylesheets/ に置いておくだけでOK。
よく使っていたので省略。

補足。
Bootstrapでは初期状態でいくつか LESS変数 が定まっている。
今回のチュートリアルで使っている bootstrap gemでも当然使えるので、sass内でも所定の変数を使える。

hoge.scss

h2 {
  color: $light-glay; // BootstrapのLESS変数。 #777
}

5.3 レイアウトのリンク

5.3.1 Contactページ

演習で実装済

5.3.2 RailsのルートURL

routes.rb

Rails.application.routes.draw do
  root 'static_pages#home'
end

root メソッドでルートのURL / をcontrollerのactionに紐付け。
名前をつけることで参照する際に便利につかえる。

root_path # '/'
root_url # 'http://www.example.com/' (フルパス)

今だとホスト以下に /static_pages/ と入っているので、ルーティングを書き換えて平たくする。

Rails.application.routes.draw do
  root 'static_pages#home'
-  get 'static_pages/help'
+  get '/help', to: 'static_pages#help'
  ...省略...
end

http://example.com/static_pages/help
↓
http://example.com/help
すっきり。

to: オプションでルーティングを指定しているが、
名前付きルートの名前は as: で変更できる。

5.3.3 名前付きルート

特になし

5.3.4 リンクのテスト

end-to-endの統合テスト。

$ rails g integration_test site_layout
# test/integration/site_layout_test.rb

引数に _test が追加されたファイル名で作成される。

以下、assert_select メソッド。マッチできるものが多い。
ただ、あまり複雑なテストはしないほうがいい。

assert_select "a[href=?]", root_path, count: 2

? には第2引数で指定したroot_pathが入ってくれる。

統合テストを実施する場合、以下のRakeタスクを実行。

$ rails test:integration

5.4 ユーザー登録: 最初のステップ

ユーザ管理用にコントローラ (Users) を作成

5.4.1 Usersコントローラ

RESTを意識し、Usersコントローラを生成しnewアクションを追加

5.4.2 ユーザー登録用URL

ルーティングの変更、統合テスト実装

所感

アセットパイプラインは開発時に助けになりそう。生コードいじるとか誰もやりたくないわな。
ファイル分割していじるのも、複数人開発やバージョン管理、資産の活用とかいい面が多そう。

レガシーPHP打ってた頃からすると、唐突に20年後の未来に来たみたい。
仕事辞めてよかった。

Railsチュートリアル(第4版)メモ 第5章

5章 レイアウトを作成する