はじめてのRailsチュートリアル(5章)
学習の覚書なので、ところどころ日本語が変かもしれません。。
4章でRailsを使うために覚えておきたいRubyの記法を学べました!本章ではレイアウトやルーティングなどRailsの機能を使ってwebアプリもどきを作っていきます!
レイアウト
このレッスンではレイアウト・Bootstrap・CSSの説明など。既知だったのでとばしとばし読みながら進めました。
こんなものができあがった!Rails tutorialでCSSまで説明してくれるとわ。。
パーシャル
Railsはパーシャルという機能を使ってレイアウトを分割できるみたいです。
<%= render 'layouts/shim' %>
こう書くと、app/views/layouts/_shim.html.erbを読み込んで挿入します。パーシャルはアンスコから始まるファイル名と決まっているよう。
header, footer, shimとレイアウトを分割してこんな感じになりました。
分割しただけなので、見た目的にはfooterだけ追加になった感じかな??
Railsのルーティング
Railsでは_pathを使い、リダイレクトなどのみで_urlを使うようです。
root_path -> '/'
root_url -> 'http://www.example.com/'
ルーティングの設定ファイル(config/routes.rb)で_名前付きルートに書き方を修正していきます
- get 'static_pages/about'
+ get '/help', to: 'static_pages#about'
こうする事で、html.erbにてリンクを設定することができました!
- <li><%= link_to "About", '#' %></li>
+ <li><%= link_to "About", about_path %></li>
リンクを変えたら、変わってるかなぁ??と自分で確認したのですが、テストで正しく動いているかチェックすることができるよう(素敵!)それには統合テストにて確認を行います。
$ rails generate integration_test site_layout
test/integration/site_layout_test.rbにリンクのテストを書いていきます。
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
test "layouts link" do
get root_path
assert_template 'static_pages/home'
assert_select "a[href=?]", root_path, count: 2
assert_select "a[href=?]", help_path
assert_select "a[href=?]", about_path
assert_select "a[href=?]", contact_path
end
end
assert_selectメソッドはなんだろうと思ったら、Railsは自動的にはてなマーク "?" を次に記載したpathに置換するそう。つまり、aboutの場合、<a href="/about">...</a>が存在するかチェックができる。
また、root_pathの横にある count: 2とつけることで、ルートURLへのリンクが2つあるか、個数を調べることができるようです!
結合テストは下記コマンドにて確認。
$ rails test:integration
無事にテストが通りました🎉
サインアップページの作成
最後に、Sign upページを作成してこの章は終わりとなりました。
主に、レイアウト・ルーティング(それに伴うテストの書き方)について学べた章だったかなと。SassとかBootstrapは知っていたのである程度飛ばしました。(なのでサクッと終われた印象)Sign upページは作れたものの機能は未実装なので、次章からやっていきです〜👊🏻🌟
スキ頂けると嬉しいです〜