Edited at

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 )


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

以上。

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