アセットパイプラインについて - もこたんぺ Learning Note

アセットパイプラインとは

JavaScriptaやCSS、画像などのリソース（アセット）を効率的に扱うための仕組みのことをいう。

sprockets-rails gem にて提供されるSproketsの機能で、デフォルトで有効になっている。

開発者が書いたJavaScriptやCSSを最終的にアプリを使う上で都合の良い状態ににするためのパイプライン処理を行う。

都合の良い状態＝ブラウザが読み取れる形式で、実行速度が早く、ブラウザキャッシュに対して最適化される状態。

パイプラインの処理の順番は以下の感じ。

CoffeScript, SCSS, ERB, Slimなどで書かれたコードをコンパイルして、ブラウザが認識できるJavaScript, CSSファイルとして扱う。

複数のJavaScript, CSSファイルを一つのファイルに連結することで読み込みに必要となるリクエスト数を減らし、すべての読み込みが終わるまで時間の短縮をする。

スペース、改行、コメントを削除してファイルを最小化して、通信量を節約する。

コードの内容からハッシュ値を算出してファイル名の末尾に付与する。

このようにすると、コードが変更されればファイル名が変更されるので、ブラウザのキャッシュの影響で修正が反映されないという問題を防げる。

Railsのアプリケーションを作成した時点で以下のファイルが作成される。

app/assets/javascripts/application.js
app/assets/styleseets/application.css(scss)

JavaScriptのマニフェストファイルを見てみると以下のようになっている。

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

JavaScriptのマニフェストファイルでは「//=」から始まる行を、アセットパイプラインに指示を伝えるための特別な行として扱う。

require・・・指定したJavaScriptファイルの内容を、記述した位置に取り込む。上記だとrails-ujsやturbolinksといったJavaScriptを指定している。

require_tree・・・指定されたディレクトリは以下の全ファイルを結合して、記述した位置に取り込む。上記の場合、「.」としているので、application.jsが配置されているディレクトリ配下が対象になる。

Sassで書くように置き換えている場合、Sassの@importを使ってディレクティブを記述する。

app/assets/stylesheets/application.scss

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