はじめてのRailsチュートリアル(5章)

学習の覚書なので、ところどころ日本語が変かもしれません。。

4章でRailsを使うために覚えておきたいRubyの記法を学べました!本章ではレイアウトやルーティングなどRailsの機能を使ってwebアプリもどきを作っていきます!


レイアウト

このレッスンではレイアウト・Bootstrap・CSSの説明など。既知だったのでとばしとばし読みながら進めました。

スクリーンショット 2019-12-07 14.21.30

こんなものができあがった!Rails tutorialでCSSまで説明してくれるとわ。。

パーシャル

Railsはパーシャルという機能を使ってレイアウトを分割できるみたいです。

<%= render 'layouts/shim' %>

こう書くと、app/views/layouts/_shim.html.erbを読み込んで挿入します。パーシャルはアンスコから始まるファイル名と決まっているよう。

header, footer, shimとレイアウトを分割してこんな感じになりました。

スクリーンショット 2019-12-07 15.10.28

分割しただけなので、見た目的には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

無事にテストが通りました🎉

サインアップページの作成

スクリーンショット 2019-12-07 16.50.32

最後に、Sign upページを作成してこの章は終わりとなりました。

主に、レイアウト・ルーティング(それに伴うテストの書き方)について学べた章だったかなと。SassとかBootstrapは知っていたのである程度飛ばしました。(なのでサクッと終われた印象)Sign upページは作れたものの機能は未実装なので、次章からやっていきです〜👊🏻🌟


いいなと思ったら応援しよう!

sumi
スキ頂けると嬉しいです〜