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

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なども同様。

画像タグの表示

```ruby
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` を読みこむ

```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変数](https://getbootstrap.com/docs/3.4/customize/)** が定まっている。
今回のチュートリアルで使っている `bootstrap` gemでも当然使えるので、sass内でも所定の変数を使える。

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

## 5.3 レイアウトのリンク
### 5.3.1 Contactページ
演習で実装済
### 5.3.2 RailsのルートURL

```ruby:routes.rb
Rails.application.routes.draw do
  root 'static_pages#home'
end
```

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

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

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

```diff
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の統合テスト。

```shell
$ rails g integration_test site_layout
# test/integration/site_layout_test.rb
```
引数に `_test` が追加されたファイル名で作成される。

以下、[`assert_select` メソッド](https://railstutorial.jp/chapters/filling_in_the_layout?version=5.1#table-assert_select)。マッチできるものが多い。
ただ、あまり複雑なテストはしないほうがいい。

```ruby
assert_select "a[href=?]", root_path, count: 2
```
`?` には第2引数で指定したroot_pathが入ってくれる。

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

```shell
$ rails test:integration
```

## 5.4 ユーザー登録: 最初のステップ
ユーザ管理用にコントローラ (Users) を作成
### 5.4.1 Usersコントローラ
RESTを意識し、Usersコントローラを生成しnewアクションを追加

### 5.4.2 ユーザー登録用URL
ルーティングの変更、統合テスト実装

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

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