この記事では、Rails.5.2でのjQueryの導入方法とJavaScriptの実行順序に関して、自分なりに色々調べてわかったことを備忘録として記事にしました。
Rails5.2でjQueryを使う方法
@ngronさんのこちらの記事をかなり参考にさせていただきました。
RailsでjQueryを使えるようにする方法
Gemの追加
Railsプロジェクトフォルダ直下のGemfileに以下の記述を追加します。
gem 'jquery-rails'
記述したらbundle install実行でプロジェクトにjQueryのgemがインストールされます。
インストールが成功していれば、Gemfile.lockにjquery-railsの記述があるかと思います。
application.jsに追記
/app/assets/javascripts/application.jsにjQueryを読み込むためのコードを追記します。
//= require jquery
//= require jquery_ujs
で、ここが重要なんですが、上記のコードは//= require_tree .より上に追記してください。
理由は後述します。
サーバを再起動
rails sでサーバをしていた場合は再起動してください。
導入完了
以上でjQueryの導入は完了しました。/app/assets/javascriptsフォルダ内にjsファイルを作るか、viewにスクリプトを直書きすれば動作確認ができるかと思います。
Turbolinksが導入されている場合、JavaScriptが正常に動かない場合があります。その場合は@hiroyayamamoさんのこちらの記事をご覧ください。
JavaScriptの実行順序に関して
先ほどapplication.jsで
//= require jquery
//= require jquery_ujs
は//= require_tree .より上に追記してくださいと説明しました。
下に追記した場合、以下のエラーが出ることがあります。
Uncaught ReferenceError: $ is not defined
これは「$なんて定義されてねーよ」というエラーなんですが、「いや、jQuery読み込んでるし！」と半日ぐらいハマっていました。
@okknさんのこちらの記事によるとscriptタグの読み込みには順番があるらしく、jQueryのコードがjQueryの読み込みより早いと「$なんて定義されてねーよ」とエラーが出るようです。
//= require_tree .は指定されたパス(ここでは「.」なのでapplication.jsが配置されているディレクトリ)配下のjsファイルを出力に含めるものです。当然/app/assets/javascriptsフォルダ内のjsファイルも出力に含まれます。
なので
//= require_tree .
//= require jquery
//= require jquery_ujs
こんな風に書いちゃうと、jQueryを読み込む前に自分がせっせと作ったjsファイルが読み込まれ、先ほどのエラーが出てしまうようです。
これは別のファイルにjQueryのコードを書いた時に起きるので、viewにjQueryを直書きした場合にはエラーは起こりません。(レイアウトのjavascript_include_tagメソッドより上に書いたら起きますが)
まとめ
C#だと実行する行よりも後に、クラスなりメソッドを書いても問題ないのでそのノリでいったらハマってしまいました。
自分で書いたjsファイルを読み込む時は、スクリプトが読み込まれる順序に気をつけましょう。