アセットパイプラインとは
JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワークです。
Railsガイドより
Railsではassets/以下にそれぞれimageやjavascript, stylesheetsのフォルダが分けられている。(以下javascriptを例に)
しかし開発環境だと、javascript/application.js、stylesheets/application.cssこの一つのファイルにまとめて記述をすれば、規模が大きくなるほどどのviewに対しての記述があるのかが分からない。また一つのファイルにまとめて記述すれば、変数名が重複してしまう。
そのためassets/javascript/users, assets/javascript/notes/などフォルダごとに分けられているのが好ましい。最終的にはこのフォルダごとに分けられたjavascriptのファイルを、最終的に一つのファイルにまとめてviewを表示する(コンパイル)。この仕組みを アセットパイプライン という。
本番環境では
しかし本番環境(heroku, AWSなど)にデプロイすると処理速度に対する影響を防ぐために
自動でコンパイルが行われない。なので
①自動でコンパイルを行うよう設定を変える
②アセットプリコンパイル(あらかじめコンパイルするファイルを指定する)を行う
どちらか2つの方法を設定する必要がある。
①の方法
config/production.rb
config.assets.compile = true #=> falseをtrueに
②の方法
assets/javascripts/application.jsで
//= require jquery_ujs
// require_tree . => '='を削除
//= require common
まずはこれでjavascripts/以下のjsファイルを読み込めなくする。
なぜ?
= require_tree.の状態だと、フォルダごとに分けていたjsファイルをapplication.jsにまとめて記述するので、変数名が重複してしまうから。
続いて
assets/javascripts/users/form.jsを作成したとする。
そして、そのform.jsを適用したいviewファイルに以下の追記をする。
views/users/form.html.slim
~ここにviewのコードが入る~
= javascript_include_tag 'users/form' <= form.jsを適用するよう指定する。
そしていざ、本番環境で実装する際にあらかじめjsファイルをコンパイルするよう指定する(プリコンパイル)。
config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(users/form.js)
以上！