Ruby on Railsチュートリアル第6版の第5章のまとめです。
個人的に気になったところ、難しかったところ、わからなかったところを中心にまとめていきます。基本的に自分の理解を助けることと、復習しやすくすることを目的とした記事ですが、今Ruby on Railsチュートリアルをやってる人に役立つ情報があるかもしれません。
僕の学習の順番は、1周目はRailsチュートリアル第4版（Rails5.1）を使い、2周目で第6版を使うという感じになってます。これは1周目が終わったところで第6版のWebテキスト版がリリースされたからです。
ちなみに、2周目は解説動画を購入してやってます。オススメです。
第5章 レイアウトを作成する
Railsチュートリアル第5章ではレイアウトを中心に学びます。HTML、CSS、Sass、Bootstrapを事前に学んでおくとわかりやすいと思います。
5.1 構造を追加する
RailsチュートリアルはRuby on Railsのチュートリアルなので、Webデザインについてはあまり触れられてません。でも、ある程度のデザインにしとかないと憂うつになるからということで、デザインも入ってます。
Webデザインというか、HTML、CSS、Sass、Bootstrapをどこまでしっかり学ぶかは人それぞれだと思いますが、ある程度は知っておいた方がいいんじゃないかなと思います。
模写コーディングでも何でもいいので、自分でゼロからコーディングしてみると、理解が深まるのでオススメです。
ただ、Railsチュートリアルはフロントエンドにはあまり興味がないなら、サラッと流してもいいかもしれません。必要になったら勉強すればいいですしね。
ということで、ブランチを作って先に進みます。
5.1.1 ナビゲーション
レイアウトファイル用のコードがあり、それについての解説になってます。HTMLを学ぶためには全部打った方がいいと思いますが、面倒なところはコピペでもいいかもしれません。
でも、Rubyのコードが埋め込まれてる部分は、何が書かれてるかを考えながら自分で打つことをオススメします。
<% ~~~ %>
<%= ~~~~ %>こういう感じの記述のところです。
ここで重要なのはlink_toメソッドと、image_tagメソッドだと思います。
link_toメソッドは
link_to "リンクテキスト", 'URL'という書き方になります。これをHTMLに書き換えると
<a href="URL">リンクテキスト</a>となります。このlink_toメソッドの例では引数は2つですが、さらにオプションで追加することができます。
例えば、
link_to "リンクテキスト", 'URL', id: "hoge"とすると、hogeというidが追加されます。HTMLでは、
<a href="URL" id="hoge">リンクテキスト</a>こんな感じになります。idの代わりにclassにすると、classが追加されます。これはidとかclassとかである必要はなく、foobarとかでも問題ないそうです。
この辺は解説動画で説明されてます。
image_tagメソッドは、HTMLのimgタグを追加するメソッドです。Railsチュートリアルの説明の例では、link_toメソッドの第1引数にimage_tagメソッドが使われます。
ということは、その画像をクリックすると、link_toメソッドの第2引数で指定したURLに飛ぶということですね。
image_tagメソッドの書き方は
image_tag("画像ファイル名.jpg", alt: "hoge")という感じです。Railsチュートリアルではwidthも同時に指定してあります。
これをHTMLに変換すると、
<img alt="hoge" src="/assets/画像ファイル名-<long string>.jpg>となります。Railsのデフォルトでは画像ファイルはapp/assets/images/の中にあるので、ファイル名だけを指定すれば勝手に探してきてくれるそうです。そこで活躍してるのがアセットパイプラインだそうです。そのおかげで、srcにはimagesが含まれてないとか。
<long string>はよくわからない英数字の羅列です。これは画像を更新したときにキャッシュにヒットさせないようにする仕組みみたいです。
5.1.2 BootstrapとカスタムCSS
RailsでBootstrapを使うにはgemをインストールする必要があります。Gemfileに追加して、bundle installを実行します。2周目のときは、なぜはbundle installにすごく時間がかかりました。
ここでは新たに追加する形なので、「bundle updateしてね」的なエラーは出ないはずです。
この辺は「Ruby on Railsチュートリアル第6版 第3章まとめ」で説明してます。
あとは指示通りにCSS用ファイルを作り（拡張子がcssではなく、scssであることに注意！）、CSSを記述していきます。@importを使ってBootstrapを読み込んでるのがポイントですね。
CSSについては、慣れてるなら全部コピペでもいいと思います。内容もサラッと流し読み程度でもいいかもしれません。
僕は、1周目は全部打ち、2周目は全部コピペにしました。模写コーディングで多少は理解できてると思ってるのと、Railsの学習をメインにするために余計なものを減らすことを考えたからです。
演習2ですべての画像を非表示にしますが、そのまましとくと先に進んだときに画像が表示されずに困るかもしれません。どこでそれに出会ったかは忘れましたが、1周目で画像が表示されず、この演習をやったことを忘れていて、原因究明に20～30分くらい費やしたと思います。
5.1.3 パーシャル（partial）
パーシャルという機能を使って、HTMLを分離していきます。リファクタリング的な感じですかね。
パーシャルのファイル名には「_（アンダースコア）」を先頭につけるという命名規則があるそうです。
呼び出す側はrenderメソッドを使います。ということで、renderメソッドについて調べてみました。
「Railsドキュメント」では「コントローラ」の「表示させるviewファイルを指定して表示」という項目にrenderメソッドが出てきます。
説明
表示させるviewファイルを指定して表示使い方
コントローラ（controller）- Railsドキュメント
render(表示方法 [, オプション])
Railsドキュメントによると、表示方法とオプションを記述するように書かれてます。でも、Railsチュートリアルではファイル名のようなものしか書かれてません。
調べてみたところ、「【Rails】部分テンプレートの使い方を徹底解説！」によると、表示方法は省略できたりするようです。少なくともパーシャルでは省略できるみたいです。
partialオプションは部分テンプレートを呼び出すときに使います。「呼び出しているのは部分テンプレートだよ」と強調したいだけなので、つけなくても構いません。ですが、localsオプションを使用した時はつけないとエラーが出ます。
【Rails】部分テンプレートの使い方を徹底解説！
ここではlocalsオプションは関係ないので、とりあえず放置しときます。
ということで、パーシャルを読み込む側では、
<%= render 'ファイル名のようなもの' %>という記述になるようです。ここで「ファイル名のようなもの」としたのは、ファイル名とは違うからです。
例えば、「layouts/_hoge.html.erb」というパーシャルファイルを読み込むときは、「layouts/hoge」でいいわけです。なので、「のようなもの」と書いておきました。
これがわかったところで、指示通りにパーシャルファイルを作成したりして、終わりです。
5.2 Sassとアセットパイプライン
image_tagメソッドのところで少し触れたアセットパイプラインと、CSSを拡張した（？）Sassについてです。
5.2.1 アセットパイプライン
Rails開発者としては、アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンの3つの主要機能を理解する必要があるようです。
どのアセットディレクトリに何を保存するのかが決まってるようで、それに合わせてファイルを保存します。
画像の保存場所が「app/assets/images」でしたね。assetsとあるように、ここもアセットディレクトリです。スタイルシートは「app/stylesheets」に保存しましたね。
ちなみに、assetは「資産」という意味です。
マニフェストファイルは、Railsに対してどのようにファイルをまとめるか指示するものだそうです。CSSを適用するときに「custom.scss」を作りましたが、それを読み込む記述をしなくてもCSSが適用されてるのを不思議に思った人もいるかもしれません（僕は2周目で気づきました）。
その読み込みがすでにマニフェストファイルに書かれてたので、わざわざ何もせずにcustom.scssを読み込んでくれたというわけです。
複数のファイルをまとめて1つにしてくれるのもアセットパイプラインの機能だそうです。
イメージ的にはこんな感じでしょうか。
そして、マニフェストファイルに従ってファイルを処理してくのがプリプロセッサエンジンです。
5.2.2 素晴らしい構文を備えたスタイルシート
Sassについての解説です。すでに書いてあるCSSをSassに書き換えることをします。
これについても、Sassがある程度わかってたり、重要度が低いと判断してる場合はコピペでいいと思います。
5.3 レイアウトのリンク
リンクはまだちゃんと設定してないので、ここで設定していきます。link_toメソッドを使います。
5.3.1 Contactページ
Contactページは第3章の3.4.3にある演習をやってあればすでに作ってあります。テストもあるはずです。
ということで、ここは答え合わせな感じですね。
5.3.2 RailsのルートURL
名前付きルートを使うためにルーティングの設定を変更します。名前付きルートは「hoge_path」や「hoge_url」というものです。
「_path」と「_url」の違いはしっかりと覚えた方がいいと思います。1周目でちゃんと覚えてなくて、「_pathと_urlは何が違うんだろう？」と思いながら、調べもせずに進めてました。
- hoge_path：ルートURL以下の文字列（例：’/hoge’）
- hoge_url：完全なURL（例：’https://hoge.com/hoge’）
設定は、routes.rbに書き込みます。これはルーティングの設定で何度かやってるからわかりますよね。
ここで新しい書き方が出てきます。
get '/hoge', to: 'foo#hoge'これはgetリクエストに対応したルーティングの例で、「/hoge」にアクセスがあったときに、fooコントローラのhogeアクションを呼び出すというものです。
こういう設定にすることで、「hoge_path」と「hoge_url」という名前付きルートが使えるようになります。
指示通りにルーティングを書き換えてここは終わりです。
5.3.3 名前付きルート
パーシャルにあるリンクを名前付きルートに書き換えます。これでリンクが機能するようになるので、表示確認が楽になります。
5.3.4 リンクのテスト
リンクがちゃんと機能してるかを確認するテストを書きます。それには「統合テスト（Integration Test）」が使われます。
Railsガイドでは「結合テスト」と訳されてるようです。
結合テスト (integration test) は、複数のコントローラ同士のやりとりをテストします。一般に、アプリケーション内の重要なワークフローのテストに使われます。
結合テスト – Railsガイドv6.0
統合テストは自動的に作られてないようで、rails generateを使ってファイルを作ります。その作ったファイルにテストを書きますが、このとき実際の動きを想定して書いてくことになります。
統合テストだけを走らせるときは
rails test:integrationを使います。
ここの演習2でfull_titleヘルパーの単体テストがありますが、ここがいまいちわかりません。1周目でいろいろ試して何となくわかりましたが、いつかあらためてまとめようかと思います。
5.4 ユーザー登録：最初のステップ
とうとうユーザー登録の機能に入っていきます。本格的なところは次章以降ですが、アプリケーションの雰囲気が出てきましたね。
5.4.1 Usersコントローラ
StaticPagesコントローラのように、Usersコントローラを作成します。今回はnewアクションも同時に作ります。newアクションはRESTアーキテクチャに従ってるらしいです。RESTはまだ理解できてないので、理解できたらまとめようと思ってます。
指示通りにやっていけば問題ないと思います。
5.4.2 ユーザー登録用URL
ユーザ登録用のURLを変更します。ルーティングに名前付きルートを使って設定して、テストも名前付きルートに変更します。これはやったばかりなので、問題ないですね。
ユーザー登録ページへのリンクの変更、ユーザー登録ページの変更を指示通りに行います。
これで第5章は終了です。いつも通り、コミット、マージ、GitHubにプッシュ、Herokuにデプロイします。
まとめ
2周目だからか、第5章はそこまで苦労せずに終えることが出来ました。特にHTML/CSSあたりをサラッと流したのが理由ですかね。
だからといって、たいして重要ではない症というわけではありません。
ここで重要なのは、link_toメソッドとimage_tagメソッドの書き方、パーシャル、名前付きルート、統合テスト、アセットパイプラインだと思います。
これらを踏まえて、第6章に進んでいきます。
