Railsのアセットパイプラインの概要を最短理解する

2021-1-5

Table of Contents

Railsのアセットパイプラインは、最先端ではないですが、現状の開発において必要な仕組みです。
最近ではフロントエンドと分離する傾向がありますが、それでもアセットパイプラインを使ったサービスはたくさんあります。
今回、手っ取り早く全体像を理解するためにまとめました。

アセットパイプライン(Asset Pipeline)とは

JavaScriptやCSSを最小化や圧縮して連結するフレームワークです。
CofeeScriptやSass(SCSS)の変換もサポートします。
アセットパイプラインの実体はSprocketsミドルウェアです。

特徴としては下記です。

これらをデプロイ前に事前に処理（プリコンパイル）します。

最小化とは、スペースや改行を詰めてサイズを減らすことです。
最小化はミニファイ(minify)とも呼びます。

ファイルを最小化することで、3つメリットがあります。

ファイルにはスペースや改行などが含まれます。
これらは人には可読性のために必要です。
でもWebブラウザのファイル解析には、ほとんどが不要です。
不要なスペースや改行を無くすことで、ファイルサイズが減らせます。

ファイルの縮小は通信量削減に繋がります。
その分Webページ表示に必要なファイル取得を短縮できます。
結果Webページの高速化に繋がります。

前項でも説明しましたが、スペースや改行などは可読性にとって重要です。
またJavaScript難読化ツールによっては、変数名を短くします。
短くなることはファイルサイズ削減にもなります。
そして変数が持つ意味も取り除けます。

これらがなくなることで、人はコードを非常に読み解きにくくなります。
読み解きにくくなれば悪意な行動ができなくなります。
要はセキュリティが向上します。

例えば、あるページに5ファイル必要であれば、
そのままの場合は、5回に渡りファイルを取得します。
当然5回分はサーバに負担はかかり、通信帯域も埋めます。

これを5ファイルを1つに結合してしまえば、その分パフォーマンスは向上します。

トランスパイルとは、ある開発言語から別の開発言語を生成するコンパイル処理です。

例えば、

などです。

WebブラウザがサポートしてるJavaScriptやCSSなどを直接記述するよりも、
TypeScriptやSCSSを使ったほうが生産的です。
アセットパイプラインはその変換作業をサポートします。

例えばSass(SCSS)であれば、sass-rails gemが使われます。

アセットパイプラインは、パフォーマンス目的のためにファイル(アセット)をミニファイやファイル結合、トランスパイルするフレームワークです。