JavaScript
Rails

rails 任意のviewのみで、特定のjsを読み込む方法

More than 1 year has passed since last update.

記事の内容に間違いがあればご指摘お願いいたします。

状況

ログイン画面があるツイッターのようなwebアプリを作成している。
app/assets/javascriptsの配下に配置したjsでsetInteavalなどを使った繰り返しの処理を実行しているが、ログイン画面では実行したくない。

railsにはAssets Pipelineという、app/assetsの配下に置いたファイルを自動的にコンパイル?する仕組みがある。
なので、app/assets/javascriptsの配下に設置したjsもすべてのviewで実行されてしまう。

以下の手順でAssets Pipelineへの自動追加を解除し、手動で任意のものをコンパイルする。(無効かしたいものは追加せず、別途読み込む。)

手順

1.Assets Pipelineの自動追加を無効化

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

application.js内の//= require_treeという記述によってapp/assets/javascripts内のjsを読み込んでいるため、この記述を以下のように削除する。

app/assets/javascripts/application.js
//= require jquery  
//= require jquery_ujs  

2.全てのviewで読み込んでほしいjsを手動でコンパイルの設定をする

//= require_treeの記述を削除するとすべてのjsが読み込まれなくなってしまう(たぶん)。
なので、手動で設定を追記する
hoge.jsを追加したい場合は以下の通り。

config/environments/production.rb
config.assets.precompile += ['hoge.js']

また、jsをディレクトリで分けて、特定のディレクトリ(hogehoge)だけ追加する場合は以下の通り。

config/environments/production.rb
config.assets.precompile += ['hogehoge/*.js']

上記では本番用環境(production)のみを記載したが、開発環境でも同様のことを行う場合はdevelopment.rbも同様に追記する。

3.任意のページで特定のjsを読み込む

手順2で記載しなかったjsは読み込まれないので、任意のviewで、読み込みたいjsを別途読み込む。
htmlの最後にjavascript_include_tagを使用して読み込む
index.html.erbにて、fuga.jsを読み込みたい場合は以下の通り。

assets/views/index.html.erb
<%= javascript_include_tag 'fuga.js' %>

4.config/initializers/assets.rbに追記(2017/11/26追記)

これを行わないと以下のようなエラーが発生する(理由は不明。(わかる人がいたらコメントください))

Asset was not declared to be precompiled in production.
Add `Rails.application.config.assets.precompile += %w( fuga.js )` to `config/initializers/assets.rb` and restart your server

なので、エラーに従い、以下のように追記する。

config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( fuga.js )

エラー文通り、再起動をしてください(再起動をめんどくさがり、悩みました。笑)

以上。

もっとよい方法があれば教えてください。