Help us understand the problem. What is going on with this article?

Rails Assetの管理についてまとめる

More than 3 years have passed since last update.

Assetの管理

Assetとは、Webアプリケーションの直接のレスポンス以外の構成要素のことを指します。Javascript、CSS、画像などがこれにあたります。Asset Pipelineを使うことでこのAssetを簡単に利用出来るようになります。

Asset Pipeline の役割

  1. アセットファイルのパスの管理
  2. アセットのコンパイル
  3. アセットの依存関係の整理

これは、Sprocketsの機能によります。

1. アセットファイルのパスの管理

assetsの中のパスの管理をします。

/assets/javascript/hoge.js
/assets/stylesheet/poge.css

というファイルを

/assets/hoge.js
/assets/poge.css

のように1つのディレクトリで管理されているかのようにアクセスさせてくれます。

2. アセットのコンパイル

Javascript、CSSを使う代わりに、CoffeeScript、SCSSを使うことも多いと思います。Sprocketsの機能でCoffeeScriptとSCSSをコンパイルしてくれます。このように、ファイルを変換し適切な形式に変換して返却してくれる機能をAsset Pipelineと表します。

必要となるgemは以下です。

gem 'sprockets'
gem 'coffee_script'
gem 'therubyracer'
gem 'scss'

sprockets

Asset Pipelineの基盤の機能を提供してくれます。

coffee_script scss

それぞれCoffeeScript、scssを使うためです。

therubyracer

JavascriptをRubyで実行できる環境を用意してくれます。これはCoffeeScriptのコンパイルに必要になります。

3. アセットの依存関係の整理

Asset間の依存関係を整理します。Sprocketsは依存関係を管理するために独自の構文を持っています。これをディレクティブといいます。以下のような形式です。ディレクティブは他のファイルに影響を与えないためにコメントアウトの形式で記述します。このようにしてファイルの読み込み順序を管理します。

app/assets/javascript/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .

Railsのアプリケーションでは複数のCSS、Javascriptを1ファイルにまとめて提供することが主流となっています。それはファイルが複数存在すればリクエストの数が増えてページの読み込みが遅くなるからです。
ディレクティブを使ってアプリケーションの内の依存関係をまとめて提供するための仲介になるファイルを「マニフェストファイル」と呼び、デフォルトでは application.js、application.css になります。

Asset Pipelineを制御する

develpment/production の挙動の設定

設定は /config/environments/のファイルに記述します。
以下のような感じにassets関係のセットをすることになるかと思います。(以下ほぼデフォルトなので。勿論適宜変更して使う。)

/config/environments/production.rb
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
config.assets.compile = false
config.assets.digest = true
# config.assets.debug = false
/config/environments/development.rb
# config.assets.js_compressor = nil
# config.assets.css_compressor = nil
# config.assets.compile = true
config.assets.digest = false
config.assets.debug = true

config.assets.js_compressor

Javascriptの圧縮ライブラリの設定。productionではuglifierというgemを利用しているが nilの設定にして無効にすることも出来る。
以下default。

development production
nil :uglifier

config.assets.css_compressor

CSSの圧縮ライブラリの設定。
以下default。

development production
nil :uglifier

config.assets.compile

動的にcompileするか。trueだとprecompileしていないファイルを動的にコンパイルするのでproductionではfalseが良さそう。
以下default。

development production
true false

config.assets.digest

digest付与を有効にするかどうか。pipelineを通した後のファイルにつく数字をつけるかどうかです。付けてあげるとキャッシュに残っているものも変更を加えることが出来るのでproductionではtrueが良さそう。
以下default。

development production
false true

config.assets.debug

debugするか。これをfalseにするとファイルが統合される
以下default。

development production
true false

プリコンパイルのファイルの設定

config/initializers/asset.rb でprecompileするファイルを設定出来る。

config/initializers/asset.rb
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
Rails.application.config.assets.precompile += %w( *.js *application.css)

application.js, application.css, and all non-JS/CSS in app/assets folder are already added.

application.js, application.css と他のJS/CSSファイル以外のassetがデフォルトではprecompile対象になります。追加したいときは上記コードのように追記します。

Asset Pipelineの流れ

production

下記設定の場合。

/config/environments/production.rb
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
config.assets.compile = false
config.assets.digest = true
# config.assets.debug = false
  1. assetにあるソースコードをコンパイル( coffee -> js、 scss -> css )
  2. コンパイルしたソースコードを統合 (複数のファイルのコードをまとめる)
    • このあたりはマニフェストファイルの記述等による。
  3. ファイルを圧縮する(uglifier、sass)
  4. ファイルにダイジェストを付与する(ファイル名につくハッシュ)

これでブラウザに送られる。

ちなみに、画像はダイジェスト付与してブラウザへ。

development

対して、下記設定の場合。

/config/environments/development.rb
# config.assets.js_compressor = nil
# config.assets.css_compressor = nil
# config.assets.compile = true
config.assets.digest = false
config.assets.debug = true
  1. assetにあるソースコードをコンパイル( coffee -> js、 scss -> css )

これだけでブラウザへ送られる。

shizuma
web&DeepLearningエンジニア。 ACES.inc←東京大学大学院/東京←鹿児島/blog https://blog.seishin55.com ; Qiita https://qiita.com/shizuma ; note https://note.mu/seishin55
https://seishin55.com
aces
ACES(エーシーズ)は、 画像認識を中心としたAIアルゴリズムの力で、リアル産業のDX(デジタルトランスフォーメーション)を推進し、シンプルな社会を実現する会社です。ヒトの働き方をデジタルの力で 自動化・効率化することで、誰もが生き生きと 生きられる社会を実現していきます。
https://acesinc.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした