Rails初心者のアセットパイプラインに関する疑問19個をまとめてみた

下記のページで読んで浮かんだ疑問をまとめてみました。アセットパイプラインがあるので、GruntやGulpなどのタスクランナーを使って、プリコンパイルする必要がなくなるのはとってもいいですね。

アセットパイプライン | Rails ガイド

そもそもアセットって?

JavaScriptCSS、画像ファイルのことです。これらの共通点はHTMLから読み込まれて使われるということです。

アセットパイプラインをなぜ使うのですか?

JavaScriptCSSが各20個ずつファイルに分かれていて、それらをすべて1つのHTMLソースに読み込むように書いたとします。そうするとこれだけで40回ものHTTPリクエストが発生します。

分割したファイルの数だけ、クライアントからサーバーにファイルを取りに行く回数が増えるので、JavaScriptCSSも自動で1つのファイルに連結させて、どちらも1回ずつ取りに行けば済むようにしています。

ちなみに、アセットパイプラインには圧縮してサイズを減らすなどの連結以外の機能もあります。

プリコンパイルとは何をするのですか?

CoffeeScriptやSassなどのメタ言語を変換する機能です。例えば、CoffeeScriptJavaScriptを表現するのに便利です。これはJavaScriptを拡張した別の書き方だからです。

しかし、CoffeeScript自体はJavaScriptのコードではないのでそのまま実行できません。なので一度CoffeeScriptJavaScriptに変換、コンパイルする必要があります。その後、変換がのJavaScriptコンパイラコンパイルされるわけです。こちらが本来のコンパイルでその前に行うコンパイルをプリコンパイルと言っているわけです。

アセットパイプラインRailsの機能ですか?

Rails4では違います。アセットパイプラインはsprocket-railsというgemになりました。

Sprocketsとは何ですか?

アセットパイプラインのことです。assets/stylesheet/my.css, assets/javascript/my.jsなど、assets以下にあるアセットファイルにassets/my.css, assets/my.jsとアクセスできるようにします。もちろん他に機能はあります。

アセットパイプラインを使わないようにするにはどうればいいですか?

railsプロジェクトを作成する際にオプションskip-sprocketsをつけます。

rails new appname --skip-sprockets

MD5フィンガープリントが何か簡潔に知りたいです

2つに分けて考えましょう。MD5(Message Digest Algorithm 5)という関数で、作成されたランダムな文字列がフィンガープリントです。フィンガープリントには指紋という意味があります。認証などで使われています。

以前のRailsはどのようなフィンガープリントが使われていたのですか?

連結されたアセットファイル名の後ろにフィンガープリントをつけることで、的確にキャッシュさせるようにします。フィンガープリントはアセットファイルを変更するたびに変わるので、変更がなければファイル名は変更されません。なのでキャッシュが使用されるわけです。逆に変更があれば、ファイル名が変わることになるのでキャッシュは存在しないことになり、取得しにいきます。

フィンガープリントを無効にするにはどうすればいいですか?

config/environments/にあるrubyファイルにてconfig.assets.digest = falseを記述すればよいです。

以前はアセットはpublicに置かれていたのですか?

はい、そうです。今でもconfig.servestaticassetsがtrueにされているpublicのが静的ファイルとして扱われます。プリコンパイルが必要な場合はapp/assetsに置く必要があります。

.coffee、.scssがプリコンパイルされません

デフォルトでは自動でプリコンパイルされないようになっています。

assetsというディレクトリを複数見かけました

app/assets, lib/assets, vendor/assetsがあります。基本はapp/assetsに置きますが、他のアプリケーションでも使うものはlib/assetsに。JavaScriptプラグインCSSフレームワークなど、外部の団体などによって所有されているアセットはvendor/assetsに置きます。

どうやってアセットを読みこめばいいのですか?

下記のようにヘルパー関数を使います。

<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>

turbolinksは何をやるのですか?

アセットが更新されてページに読み込まれたかどうかをturbolinksがチェックします。ヘルパー関数にハッシュで指定してください。

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

アセットにerbは使えますか?

使えます。.cssにerbを埋め込むことによって動的な値を扱うことができます。アセットパイプラインはerbを評価してくれます。

.class { background-image: url(<%= asset_path 'image.png' %>) }

アクセスのたびにプリコンパイルが行われるのですか?

developmentモード、あるいはアセットパイプラインが向こうになっている場合のみ、coffee-script gem, sass gemによってプリコンパイルが行われます。それ以外はプリコンパイル後のファイルがpublic/assetsに置かれます。productionではこの処理の負担を気にする必要はありません。

アセットパイプラインはgemではないのですか?

coffee-script gem, sass gem

アセットに複数拡張子がついている理由は何ですか?

右から左に処理される順番となります。app/assets/stylesheets/projects.css.scss.erbの場合は、最初にERBとして処理され、続いてSCSS、最後にCSSとして処理されます。

アセットの末尾にはる?body=1とは何ですか?

bodyパラメータはSprocketsで必要となるものです。