#アセットパイプラインとは
JavaScript、CSS、画像などのリソース(アセット)を効率的に扱うための仕組み。
次に示すパイプライン処理を行うことで、実行速度を早めている。
1.高級言語のコンパイル
CoffeeScript SCSS,ERB,Slimなどで記述されたコードをコンパイルして、**ブラウザが認識できる(これが重要)**JavaScript,CSSファイルとして扱えるようにする
2.アセットの連結
複数のJavaScript,CSSファイルを一つのファイルに連結することで読み込みに必要なリクエストを減らして、読み込みを高速化させる。
3.アセットの最小化
スペース、改行、コメントを削除してファイルを最小化させ、通信量を節約する。
4.ダイジェストの付与
コードの内容からハッシュ値を算出しファイル名の末尾に付与する。これによりコードが変更されればファイル名が変更されるため、ブラウザのキャッシュの影響で修正が反映されないという問題を防げる。
#環境による挙動の違い
アセットパイプラインはdevelopment環境とproduction環境では、それぞれの目的に対して便利にするために挙動が異なる。
#ブラウザにアセットを読み込ませる
CSSやJavaScriptなどのアセットは、Web画面にアクセスしたブラウザが、サーバーから返されたHTML内にあるscriptタグ、linkタグなどのリンク情報を読み取ることによって読み込まれ、利用できるようになる。
ビュー全体にアセットを適用させたいのであれば、共通のビューであるapplication.html(.slim)
でアセットを読み込ませる。
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
stylesheet_link_tag
とjavascript_include_tag
はヘルパーメソッドで'application'
は読み込ませたいアセットファイル(拡張子のhtml.slimは省略されている)。
#マニフェストファイル
ファイルをどのように連結させたいかを記述するファイルが「マニフェストファイル」
application.css
、application.js
がそれにあたる。
JavaScriptの例)
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require _tree .
//=
で始まる行を、アセットパイプラインに指示を伝えるための特別な行として扱っている。
require
は指定したJavaScriptファイルの内容を記述した位置に取り込んでいる。
require_tree
は指定されたディレクトリ配下の全ファイルの内容を結合し、記述した位置に取り込んでいる。
例では.
を指定しているので、application.js
が配置されているディレクトリ配下が対象となる。
ここで、rails-ujs
などのJavaScriptファイルはアセットの「探索パス」をもとにSprocketsが引き当てている。(探索パスは後述)
CSSの例)
@import "bootstrap";
ここではSassの@importを利用して記述している。
#アセットの探索パス
探索パスにはデフォルトでapp/assets/*
,lib/assets/*
,vender/assets/*
がsprockets-rails
によって設定されている。