2021年8月26日 現場Rails Chapter6-8 アセットパイプライン(その①)

アセットパイプラインとは、gem sprockets-railsを活用して、アセット(CSS, JavaScript, 画像etc)を効率的にまとめた上で、軽量化・高速化・変更反映化を実現してくれます。流れとしては以下の順で行います。

1. 高級言語(CoffeeScript,ERB,Slimなど)のコンパイル
2. アセットの連結(複数のjsファイルをapplication.jsにまとめる)
3. アセットの最小化（スペース、改行などを削除してファイルを最小化する）
4. ダイジェストの付与（コードの内容からハッシュ値をファイル名の末尾に付与）

＊ダイジェスト：application-xxxxx.jsの「xxxxx」部分。 アセットに変更があると、ダイジェスト値も変化→ブラウザに残っているダイジェスト値と比較→再読込を実行するかを判定します。

環境により挙動が変わる

development環境とproduction環境で、それぞれの目的に応じた挙動をします。

development環境

• 高級言語のコンパイルとダイジェストの付与は自動で行われます。
• アセットの連結と最小化はしません。デバッグのしやすさを考慮したためです。

development環境下でデバッグモードをオフにする際は、以下の設定をする必要があります。

config.assets.debug = false

production環境

• 高級言語のコンパイル・アセットの連結・アセットの最小化・ダイジェストの付与全て行われます。

マニフェストファイル（/application.拡張子)

個別に分類した.CSSや.JSファイルをどのように連結するのかをディレクティブ(指示文)として記述されています。CSSやJSなどアセットごとにマニュフェストファイルが作られています。また、連結結果もマニュフェストファイルに記述されています。

app/assets/javascript/application.js
app/assets/stylesheets/application.css

マニフェストファイルの書き方

application.jsファイル上では、//=で始まる行をディレクティブ（指示文）として扱います。

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree . 

#「require_tree.」は指定されたディレクトリ配下のの全ファイルの内容を結合します。
#「.」を指定していると、application.jsが配置されているディレクトリ配下が対象となります。

appplication.scssファイル上では、@importを使ってファイルを読み込ませます。

@import "bootstrap";
@import "tasks";

参照

Railsガイド アセットパイプライン
https://railsguides.jp/asset_pipeline.html

Railsガイド アセットパイプライン -デバッグをオフにする-
https://railsguides.jp/asset_pipeline.html#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%92%E3%82%AA%E3%83%95%E3%81%AB%E3%81%99%E3%82%8B