最近Qiitaにお世話になることが増えました。
自分で書いてみたくなったので、Railsをいじっていて気になったことを少々。
1. やりたいこと
Railsのアセット(アセッツ？)パイプライン機能ですが、デフォルトのjsファイル(application.js)はassets/以下の全てのjsを読むようになっています。
「このビューではFoo.jsとBar.jsとBaz.jsを使いたい」
「また別のビューはFoo.jsだけを使いたい」
のようなことを実現してみます。
2. 前提
-
こんなjsファイルがあったとして:
/app/assets/javascripts/utils/Foo.js/app/assets/javascripts/utils/Bar.js/app/assets/javascripts/utils/Baz.js
-
こんなビューにjsをロードしたいとします:
-
/app/views/hoge/fuga.erb= Foo.jsとBar.jsを使いたい -
/app/views/hoge/piyo.erb= Bar.jsとBaz.jsを使いたい
-
fugaとpiyoは同じデフォルトのレイアウトを使うとします。
3. 対応
3.1. 画面ごとのルートjsファイルを定義
application.jsは require_tree . 記述によってすべてのjsをロードしてしまうので、
fuga.erbとpiyo.erbそれぞれが必要なファイルをロードするためのjsファイルを作ります。
/app/assets/javascripts/Fuga.js
//
//= require jquery
//= require utils/Foo
//= require utils/Bar
/app/assets/javascripts/Piyo.js
//
//= require jquery
//= require utils/Bar
//= require utils/Baz
3.2. ルートjsファイルをプリコンパイル指定
ファイルをひとまとめにするアセットパイプライン機能を使うために、
先に作ったjsをプリコンパイル指定します。
/config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( Fuga.js )
Rails.application.config.assets.precompile += %w( Piyo.js )
webrickの場合は再起動しないとこの設定は反映されないとのこと。
Apache等別のHTTPサーバは未確認です。
3.3. レイアウトからjsのロード記述を除去
fuga.erbとpiyo.erbは同じデフォルトのレイアウトを使うので、
そのままだとapplication.jsが読まれてすべてのjsがロードされてしまいます。削除。
/app/views/layouts/application.html.erb
<!-- ↓これ消しちゃう -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
3.4. ビューファイルにjsのロード記述を追加
それぞれのビューファイルが別々のルートjsファイルをロードするようにします。
/app/views/hoge/fuga.erb
<!-- ↓これ追加 -->
<%= javascript_include_tag 'Fuga', 'data-turbolinks-track' => true %>
/app/views/hoge/piyo.erb
<!-- ↓これ追加 -->
<%= javascript_include_tag 'Piyo', 'data-turbolinks-track' => true %>
以上です。