Ruby on Railsの「Asset Pipeline」って何？ – にょけんのボックス

こんにちは、Railsエンジニアにょけん（@nyoken_box）です。

Railsを勉強していると、Asset Pipeline（アセットパイプライン）って言葉を耳にすると思います。

初学者には取っつきにくい機能ですが、特徴的な動きをするためトラブルの原因になりやすいんすよね。

本記事で基本を抑えているので、参考程度に読んでみてください。

Asset Pipelineとは

RailsにおけるAsset Pipelineとは、「CSSやJavaScriptの管理を行う機能」と考えてください。

様々な機能がありますが、特に重要な3つをご紹介します。

アセットディレクトリ

Railsのバージョン4.0以上では、アセット（画像・CSS・JavaScriptなど）の管理用ディレクトリが、３種類用意されています。

まぁ、あなたはapp/assetsを使って、Rails開発者のお偉いさんはlib/assets、その他の人はvendor/assetsを使っていると考えておいてください。

マニフェストファイル

Railsでは、Sprocketsというgemを用いると、ブラウザにアセット（CSS/JavaScript）をひとつにまとめて送れます。

なんでひとつにまとめるかというと、1個ずつファイルを送るのは非効率だから。

で、「どのようにひとつにまとめるのか」について書かれているのが、マニフェストファイルです。

CSSとJavaScriptのファイルをブラウザへ送る際に、「マニフェストファイル」の内容を参照してまとめるわけですね。

例として、CSS用のマニフェストファイルを見てみましょう。

場所は、app/assets/stylesheets/application.cssです。

/*  * This is a manifest file that'll automatically include all the stylesheets   * available in this directory and any sub-directories. You're free to add  * application-wide styles to this file and they'll appear at the top of the   * compiled file, but it's generally better to create a new file per style  * scope.  *= require_self  *= require_tree .  */  

*= require_tree .

つまり、「ブラウザにCSS情報を送るとき、app/assets/stylesheets/配下のファイルを全部参照しますよ〜」ってこと。

この記述があるため、カスタム用のCSSをapp/assets/stylesheets/に作成するわけです。

*= require_self

application.cssにCSS関連の処理を書き込んでいる場合、この記述がないと読み込んでくれません。

ちょっとだけ解説しておくと、「.erb→HTML」の動きと同じように、ある拡張子のファイルを展開して別のファイルに置き換えてあげるものが他にもあるんですよ。

例えば、

• 「.scss→CSS」
• 「.coffee→JavaScript」

とか。

もっというと、「○○.js.erb」とすれば「.erb→JavaScript」に変換することも可能です。

こんな感じで、拡張子を読み込んで別ファイルに翻訳してくれる機能が「プリプロセッサエンジン」ですね。