78
80

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-11-25

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

状況

ログイン画面があるツイッターのような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 )

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

以上。

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

78
80
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
78
80