Ruby on Railsの「Asset Pipeline」って何?

スポンサーリンク

 

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

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

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

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

 

Asset Pipelineとは

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

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

  1. アセットディレクトリ
  2. マニフェストファイル
  3. プリプロセッサエンジン

 

スポンサーリンク

アセットディレクトリ

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

  • app/assets:開発中アプリに使用するアセットを保管
  • lib/assets:Railsの開発チームによって作成されたライブラリ用のアセットを保管
  • vendor/assets:サードパーティ製のアセットを保管

まぁ、あなたは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 .
*/

ピンク色の部分がSprocketsによって使用されます。

ひとつずつ見ていきましょう。

 

*= require_tree .

これは、マニフェストファイルがあるディレクトリ以下のものを全て辿って読み込むという意味です。

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

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

 

*= require_self

「CSSを読み込む中で、自らのファイル(application.css)も参照しますよ」という記述。

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

 

プリプロセッサエンジン

プリプロセッサエンジン=「.erbファイルをHTMLに変換してくれるもの」です。

viewファイルとかって、「○○.html.erb」っていうファイル名になっていますよね?

あれをいい感じに解釈してHTMLに変換してくれるのがプリプロセッサ。

正確にいうと全然違いますが、最初のうちはこの認識でいいと思います。

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

例えば、

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

とか。

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

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

プリプロセッサエンジンは繋げて使用できる

補足。

プリプロセッサエンジンは、test.js.erb.coffeeというように繋げて使用することも可能です。

この場合、CoffeeScriptが展開され、次にERbが展開され、最終的にJavaScriptとしてブラウザへ出力されますね。

スポンサーリンク