Ruby on Railsで特定のJavaScriptファイルを読み込む方法

プログラミング、サーバー、ネットワーク、IT用語、ハマったときのトラブルシューティングなど様々なIT関連の話題をひたすら書いていく技術ブログです。

2017年1月30日月曜日

Ruby on Railsで特定のJavaScriptファイルを読み込む方法


Ruby on Railsではデフォルトで「app/assets/javascripts」の配下のJavascriptを読み込むようになっているため、何もしないと本来ページAのためのJavaScriptがページBでも読み込まれてしまい、記述によっては「そんなDOMがないよ(ページAにはあるが、ページBにはない)」など、思わぬエラーが発生してしまいます。それを回避するための備忘録。

手順1:application.jsの「//= require_tree .」を削除する

/app/assets/javascriptsの配下にあるapplication.jsの中に//= require_tree .という記述があると思いますが、これがあると/app/assets/javascriptsの配下のファイルは全て読み込まれてしまいます。まずこれを削除しましょう。

手順2:assets.rbにプリコンパイルの記述を追加する

次にconfig/initializers/assets.rbにJavaScriptをプリコンパイルするための記述を追加します。

下記の例はJavaScript全てをプリコンパイルする例です。
Rails.application.config.assets.precompile += %w( *.js )

ディレクトリに合わせて記述しても大丈夫です。
Rails.application.config.assets.precompile += %w( admin/articles.js )

cssも追記できます。

手順3:application.html.erbにjavascript_include_tagを追記する

最後にviews/layouts/application.html.erbにjavascript_include_tagを追記していきます(特にapplication.html.erbでなくても良い)。

<%= javascript_include_tag "application" %>
<%= javascript_include_tag params[:controller] %>

デフォルトで <%= javascript_include_tag "application" %>が書かれていると思いますが、これはapp/assets/javascripts配下にあるapplication.jsを読み込んでいます。こちらにはどのJavaScriptファイルも使用する記述のみを書いておきます。例えばJQueryなどを読み込んでおきます。

2行目が独自のJavaScriptファイルを読み込むための記述です。javascript_include_tagにparams[:controller]を渡しています。これは該当するコントローラー名を取得します。例えば管理ページのコントローラーでディレクトリがcontrollers/admin/articles_controller.rbだった場合、params[:controller]はadmin/articlesを返してきます。なので、JavaScriptファイルの置き場もapp/assets/javascripts/admin/articles.jsにすれば、そのコントローラーに合わせたJavaScriptのみが読み込まれ、思いもよらぬエラーが防げます。

googleで検索すると色々やり方が載っていますが、私的にこれが一番シンプルなやり方です。

◯Ruby on Railsの記事一覧はこちら
◯トラブルの解決方法の一覧はこちら



最近の投稿