Zenn
😋

アセットパイプラインについての初心者の学習備忘録

2023/12/04に公開
Rails
Ruby
初心者
tech

アセットパイプラインについてよく理解できていなかったので、まとめがてら調べてみました。
同じところで理解に悩んでいる初学者の助けになれれば幸いです。

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

アセットパイプラインとはRuby on Railsにおいて、効率的にJavaScriptファイルやCSSファイルを利用するためのフレームワークです。
実装時にはバラバラで管理されているこれらのリソースを一つにまとめることで、パフォーマンスの向上やファイル管理の効率化を行うことができます。

アセットパイプラインの主な機能

  1. 複数のjs、cssといったリソースファイルの統合と圧縮
  2. Sass、CoffeeScript、TypeScriptといった形で記述されたファイルのコンパイル。
  3. フィンガープリントの付与

一つずつ解説していきます。

  1. リソースファイルの統合と圧縮
    application.jsや、application.cssといったマニフェストファイルに記述されているリソースファイルを統合していきます。
    またこの時にコメントの削除や変数名の変更といった圧縮作業も行われるようです。
    リソースファイルを統合することによって、読み込みを複数行う必要がなくなるのでパフォーマンスが向上します。

  2. Sass、CoffeeScript、TypeScriptといった形で記述されたファイルのコンパイル
    .scssファイル、.coffeeファイル、.tsファイルなどはそのままではブラウザで読み込むことはできませんが、アセットパイプラインを通過することによって通常の.jsファイルと.cssファイルにコンパイルされます。

  3. フィンガープリントの付与
    フィンガープリントとは、アセットファイルの名前に付与されるハッシュ値です。
    通常ファイル名にはハッシュ値が含まれていないため、もしファイルが更新された場合にブラウザがそのことを認識できずにキャッシュからアセットファイルを読み込んでしまう恐れがあります。
    フィンガープリントを付与することによってファイル名が更新のたびに一意となり、ブラウザが更新を認識して再読み込みすることができます。
    フィンガープリントは常に最新のアセットファイルを読み込むための仕組みです。

アセットパイプラインの使用法

アセットパイプラインはRailsに組み込まれており、意識しなくとも使用していることが多いですがどの部分がアセットパイプラインに関わる設定なのか理解するためにまとめておきます。

  1. アセットを準備する
    アセットは主にJavaScript、CSS、画像などの静的ファイルです。これらのファイルを指定のディレクトリに配置します。
    JavaScriptファイルは「app/javascript」
    CSSファイルは「app/assets/stylesheets」
    画像ファイルは「app/assets/images」
    にそれぞれ配置します。

２. マニフェストファイルを準備する
マニフェストファイルとはapplication.jsやapplication.cssといったファイルで、全てのアセットをひとまとめにする役割を持っています。
以下のように記述することで、アセットを統合します。

application.js
//= require jquery
//= require_tree .
//= require_self
application.css
/*
 *= require_tree .
 *= require_self
 */

主に使用する記述はrequire、require_tree、require_selfの三種類です。
それぞれ以下の意味合いを持っています。

  • require: 直後に記載したパスのファイルを読み込みます。
  • require_tree: 直後に記載したパスのディレクトリ内にあるファイルをすべて読み込みます。「require_tree .」の記載で同一ディレクトリにある全てのファイルとなります。
  • require_self: 自分自身を読み込みます。　私も勘違いしていましたが、マニフェストファイルはアセットを読み込む設定をするだけのファイルであり、実際に統合されたファイルは別に存在するため、この記述がないと統合されたアセットファイルにマニフェストファイル自体の情報は含まれません。

  1. プリコンパイルする
    開発環境ではアセットは常にコンパイルされますが、本番環境では明示的にプリコンパイルする必要があります。
    これは常にコンパイルをしているとパフォーマンスに影響するためです。
    「rake assets:precompile」コマンドを使用して、アセットをプリコンパイルします。

  2. ビューでコンパイルされたアセットを読み込む
    最後に、ビューでコンパイルされたアセットを読み込む設定をします。
    ヘッダーに以下の設定をするだけです。

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

この記述をすることで、統合されたアセットファイルがhtmlに読み込まれます。

最後に

初学者の私にとってどこからどこまでの機能をアセットパイプラインと呼ぶのかあまり理解できていませんでしたが、今回まとめたことによって大体のイメージが掴めた気がします。
アセットパイプラインはすでにレガシーな技術になり始めているとのことですが、初学者が触れる機会はまだあると思うので、理解の助けになれば幸いです。

Discussion