【Rails】レイアウトを作成（Railsチュートリアル第5章学習メモ）

Railsチュートリアルの続きです。前回はRailsコンソールでクラスやメソッドを実行しました。今回はBootstrapを使ってCSSスタイルを付けていきます。下層ページへのリンクのルーティングや統合テストも追加します。それではいきましょう！

【目次】

ナビゲーションの追加
bootstrap
パーシャル
アセットパイプライン
sassの機能
Contactページ追加
ルーティング設定
統合テスト（Integration Test）
ユーザー登録ページを作成
最後に

Ruby/Ruby on Railsを習得するためにやったことまとめ
qiita.com

ナビゲーションの追加

app/views/layouts/application.html.erbを修正

headerタグを追加
classにbootstrap向けのclass名をつける
link_toヘルパーでリンクを生成する（urlはひとまず#）
メインコンテンツyieldをdivで囲う

headerのメニューが現れた！

タイトルの下にlink_toでリンクを追加（urlはひとまず#）
classにbootstrap向けのclass名をつける
二つ目のリンクlink_toにimage_tagヘルパーで画像パスを追加
app/assets/images/ディレクトリにロゴ画像ファイルを追加
画像ファイル名の<long string>で長いファイル名になる

メインにコンテンツの内容が変わり、ロゴ画像も表示された！

bootstrap

gemファイルにbootstrap-sassを追加（bootstrapは標準だとlessのため）
bundle installを実行→bootstrapがインストールされる
app/assets/stylesheets/ディレクトリにcustom.scss追加
custom.scssで@importでbootstrap-sprocketsとbootstrapをインポート
rails serverでRailsサーバーを再起動

homeにCSSスタイルが適用された！

custom.scssにcssスタイルを追記

スタイルが適用される

パーシャル

ページ内の共通部分をパーシャル化する

<%= render 'layouts/header' %>

headerタグがあった場所に上記を配置
headerの内容を/layouts/_header.html.erbに移植
headerは変わらず表示される

パーシャルのファイル名の頭に_を付けるのはEJSと共通している

続いてフッターも追加する

<%= render 'layouts/footer' %>

フッターを追加したい場所に上記を配置
footerの内容を/layouts/_fotter.html.erbを記載
custom.scssにfooterのcssスタイルを追記

フッターも表示された！

アセットパイプライン

アセットパイプラインはCSSや画像などの制作と管理を強化する
アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという機能がある
アセットディレクトリ：app、lib、vendorディレクトリにassetsディレクトリがある
マニフェストファイル：静的ファイル（アセット）をどのように一つのファイルにまとめるかの指示
→app/assets/stylesheets/application.cssのコメントにある*= require_tree .、*= require_selfなど
プリプロセッサエンジン：.erb、.scssなどの拡張子で判断してプリプロセス（前処理）を実行する
アセットパイプラインによって本番環境ではCSSがapplication.cssにまとめられ最小化される

sassの機能

sassのネスト設定を変更
使いまわされる色の値を変数化$light-grayのように頭に$をつける

Contactページ追加

test/controllers/static_pages_controller_test.rbにcontactのテストをついか（rails test実行→red）
config/routes.rbにcontactのルートを追加
app/controllers/static_pages_controller.rbにcontactのアクションを追加
app/views/static_pages/contact.html.erbにcontactのビュー（タグ）を追加（rails test実行→green）

ルーティング設定

config/routes.rbのルーティングをget、to:で置き換える書き方に変更
test/controllers/static_pages_controller_test.rbにget root_pathなどを追加
app/views/layouts/の_header.html.erb、_footer.html.erbのリンク設定を変更（#からroot_pathなど）

ヘッダー、フッターのリンクからページ遷移するようになった！

統合テスト（Integration Test）

統合テストを作成$ rails generate integration_test site_layout
test/integration/site_layout_test.rbにテストファイルが作られる
assert_select "a[href=?]", about_pathなどのテストを追加する
→aタグの?にabout_pathのパス（/about）を入れてリンクの存在をチェックする
リンクの統合テストを実行$ rails test:integration→Green
全てのテストを実行$ rails test→Green

ユーザー登録ページを作成

Userコントローラーを作成$ rails generate controller Users new
config/routes.rbに/signupのルーティングを追加
test/controllers/users_controller_test.rbのテストをsignup_pathに修正
app/views/static_pages/home.html.erbのユーザー登録ページのリンクを修正（#をsignup_pathに）
app/views/users/new.html.erbのtitle、タグを修正

トップページの「Sign up now!」リンクを押すとユーザー登録ページに遷移した！

最後に

ということで今回はbootstrapやsassを導入し、下層ページを作成し、リンクのルーティング設定、統合テストも追加しました。ようやく見た目が簡素じゃなくなってきました♪

次回、6章は「ユーザーのモデルを作成する」とのこと。モデルとはなんぞや、を理解していきたいと思います。それではまた！