第5章の備忘録
環境
Rails 6.0.3
Ruby 2.6.3
目次
1 Railsヘルパー
2 BootStrap導入
3 partial
4 アセットパイプライン
5 ルートURL解説
6 レイアウトリンクのテスト解説
1 Railsヘルパー
1.1 link_to
<%= link_to "Sign up", signup_path, class: "btn btn-lg btn-primary" %>
第1引数はリンクテキスト
第2引数はURL
第3引数はオプションハッシュ（必須ではない）
最終的にaタグが生成される
1.2 image_tag
<%= link_to image_tag("image.jpg", alt: "image", width: "300px"), "https://example~~.com/" %>
画像を使用する場合は、image_tagヘルパーを追加する。
引数には、画像ファイルのパスと任意のオプションハッシュ(今回はaltとwidth)
最後のURLはクリックした際のリンク先になる。Railsチュートリアルでは公式サイトに飛ぶように設定されている。
画像はapp/assets/images/ディレクトリに置いておく！！
2 BootStrap導入
Gemfileにbootstrap-sassを追加
gem 'bootstrap-sass', '3.4.1'
bundle installを実行して、Bootstrapをインストール
bundle install
使用するscssファイルにBootstrapCSSを追加する
@import "bootstrap-sprockets";
@import "bootstrap";
3 partial
コードを単位毎に分割してそれぞれのファイルで管理することで可読性・変更が容易になる。この機能をRailsではパーシャルという。
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
.
.
</div>
</header>
分割するファイル名は、先頭にアンダースコアをつける命名規則がある。
.
.
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
パーシャルを追加するときは、renderヘルパーを用いる。
また、'layouts/header'で、app/views/layouts/_header.html.erbファイルを探してくれる。
アンダースコアを書かない点に注意！！
4 アセットパイプライン
アセットパイプラインとは、CSS, JS, 画像などの静的コンテンツの生産性・管理を強化する機能である。Webpack（JSのアセットをまとめるバンドラー）, Yarn（JSの依存関係を管理するマネージャ）のどちらも正常に動く。
アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという3つの主要な機能を持っている。今回は最初の2つに関してまとめてみた。
アセットディレクトリ
Railsでは3つの標準ディレクトリが使われている。
1. app/assets : 現在のアプリケーション固有のアセット
2. lib/assets : 自分の開発チームによって作成されたライブラリ用アセット
3. vender/assets : サードパーティのアセット（デフォルトでは無し）
個人で開発するときは、app/assetsがメイン
マニフェストファイル
静的ファイル（アセット）をどのように1つのファイルいまとめるのかをRailsに指示するファイルのこと。
.
.
*= require_tree .
*= require_self
*/
1行目では、app/assets/atylesheets内のCSSファイルがapplication.cssに含まれることを指示。
2行目はapplication.css自身もその対象に含めることを指示。
5 ルート（名前付き）URL解説
ルート（名前付き）URLを設定すると、2種類のメソッドでURLを参照することが可能になる。
root_path -> '/'
root_url -> 'https://www.example.com/'
基本的には_pathを使用。
リダイレクト時のときは_urlを使用（HTTPの標準として、リダイレクト時は完全なURLが要求されるため）
6 レイアウトリンクのテスト解説
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
test "layout links" do
get root_path
assert_template 'static_pages/home'
assert_select "a[href=?]", root_path, count: 2
assert_select "a[href=?]", help_path
.
.
end
end
流れは、
1. ルートURLにGETリクエスト
2. 正しいページが描画されているかチェック
3. 各ページへのリンクが正しく動くかチェック
?は、後のpathに置換されるのがポイント
また、個数をオプションで付けることが可能