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

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

Table of Contents

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

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

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

特徴としては下記です。

  • ファイルのミニファイ
  • ファイルの結合
  • ファイルの変換

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

特徴1. ファイルの最小化(ミニファイ)

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

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

  • 通信量の節約
  • 難読化によるセキュリティ向上

通信量を節約できる

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

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

難読化によるセキュリティ向上

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

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

特徴2. 複数ファイルの結合

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

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

特徴3. CoffeeScriptやSassのトランスパイル

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

例えば、

  • CoffeeScriptからJavaScriptへ変換
  • Sass(SCSS)からCSSへ変換

などです。

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

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

このエントリーをはてなブックマークに追加