0
1

More than 3 years have passed since last update.

railsチュートリアル第五章 アセットパイプライン

Posted at

Sassとアセットパイプライン

最近のRailsに追加された機能の中で最も特筆すべき機能の1つは、CSS、JavaScript、画像などの静的コンテンツの生産性と管理を大幅に強化する「アセットパイプライン(Asset Pipeline)」
アセットパイプラインは、Webpackや、Yarn(のどちらともうまく動きます。

このセクションでは、アセットパイプラインの概要と、素晴らしいCSS生成ツールである「Sass」の使い方について説明します。

アセットパイプライン

Rails開発者の視点からは、アセットディレクトリマニフェストファイルプリプロセッサエンジンという、3つの主要な機能が理解の対象となります。

アセットディレクトリ

app/assets: 現在のアプリケーション固有のアセット
lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
vendor/assets: サードパーティのアセット(デフォルトでは存在しません)

$ ls app/assets/
config  images  stylesheets

取り上げたカスタムCSSが配置された場所と、その理由について理解することができると思います。つまり、custom.scssはサンプルアプリケーション固有のアセットなので、app/assets/stylesheetsに配置されていたのです。

マニフェストファイル

静的ファイル(アセット)を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができます。

 *= require_tree .

app/assets/stylesheetsディレクトリ(サブディレクトリを含む)中のすべてのCSSファイルが、アプリケーションCSSに含まれる

*= require_self

CSSの読み込みシーケンスの中で、application.css自身もその対象に含めています

プリプロセッサエンジン

必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します
Railsはどのプリプロセッサを使うのかを、ファイル名の拡張子を使って判断します。

プリプロセッサエンジンは、繋げて実行する(chain)ことができます。

foobar.js.coffee

上の拡張子の場合、CoffeeScriptプロセッサ経由で実行されます。

foobar.js.erb.coffee

上の拡張子の場合は、CoffeeScriptとERbの両方で実行されます。

本番環境での効率性

アセットパイプラインの最大のメリットの1つは、本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成
機能を個別のファイルに分割し、(インデントを多用して)読みやすいフォーマットに整えていました。これは、プログラマにとっては便利な方法ですが、本番環境にとっては非効率です。
最小化されていないCSSファイルを多数に分割すると、ページの読み込み時間が著しく遅くなるから
(読み込み時間が長くなるとユーザー体験の質が下がるので、読み込み時間は重要な指標の1つです)

アセットパイプラインを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります。
開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化すればよいのです
Asset Pipelineがすべてのスタイルシートを1つのCSSファイル(application.css)にまとめてくれます。
それらのファイルすべてに対して 不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれます
結果として、開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してくれます

感想
理解するのは難しい。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1