アセットパイプラインを調べました

はじめに

現在Railsチュートリアルを進めています。
まだ半分程度までしか進めていませんが、5章を復習していてわからない点を振り返ってみましたので記事にします。

アセットパイプライン

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

CoffeeScript、Sass、SCSSなどを管理する仕組み。
sprocketsというgemを利用しているそうです。

sprocketsとは

カタカナで書くとスプロケット。
チェーンから軸に回転を伝える仕組みのことです。自転車のチェーンが身近な例ですかね。

sprocketsについて調べようとすると「sprocketsを捨てる/移行する」といった記事が多く見つかります。
フロントエンドのツールが充実してきたのを背景に、2015年頃からsprocketsからの移行が試行錯誤されていたようです。

Sprocketsを捨てたい

その後、rails6からはsprocketsが標準ではなくなりwebpackを基にしたwebpackerが標準になったそうです

こうした変化の背景には、
・React.js, Vue.jsなどのフロントエンドフレームワークができたこと
・RESTful APIを使いサーバーサイドとフロントエンドを疎結合にする傾向があること
これらが影響しているのではと推測しています。

sprocketsの詳細

sprocketsそのものについては、webpackerへの移行について書かれていた次の記事が参考になりました。

Ruby on Rails で sprockets から Webpacker へ移行し、移行できないものは共存させる方法 - Qiita

チュートリアルではサンプルを真似て stylesheet_link_tag, javascript_include_tag ヘルパーを書いていましたが、
これらがsprocketsと連携するための記述だったんですね。

感想

以前、Laravelをやってみようとしてこちら（ Laravel + Vue.js で出席管理Webアプリを作成する – Part.1 | luftgarden ）を参考にLaravelが動作する環境を作りwebpackにも触れたのですが、当時は何をするためのソフトウェアなのかよく分かっていませんでした。
今回sprocketsからwebpackerに置き換わる過程を追いかけたことで、開発現場でどんな課題があり環境が変化していったのかが垣間見えたような気がします。

アセットパイプラインと呼ぶ仕組みそのものについては、cssとjsを一元化した管理をする仕組みは一定以上
の規模の開発で必要になるものだと思います。
cssの管理が雑で特定のdivに効いているcssが分からなくなりわざわざブラウザの開発者モードで確認するような事態がときどきありますので。

sprockerに限らずアセット管理とバンドラーに対して関心を持っていこうと思いました。