はじめに
Railsでアプリケーション製作中、jsを思うように動かせず苦労したため、躓いたポイントをまとめました。
初学者のため基礎的な内容かと思いますが、どなたかの参考になると嬉しいです！
前提条件
Rails 5.x.x
jQuery 3.x.x
app/assets/javascripts/ 以下のファイルにjsを記述していることを前提とします。
原因1
####そもそもJavaScript、jQueryが読み込まれていない
まずは基本的なところを確認します。
- ビューにスクリプトを読み込むための記述があるか
<head>
〜省略〜
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
- gemが追加されているか
gem 'jquery-rails'
→ bundle installを実行
- application.jsファイルにJQueryを読み込むための記述があるか
//= require jquery3
//= require jquery_ujs
//= require_tree .
//= require jquery と //= require jquery_ujs は //= require_tree .
より上に書く必要があります。
//= require_tree .は javascriptsディレクトリ配下のjsファイルを出力に含めるという記述なので、順番を逆にしてしまうとjQueryを読み込む前にjsファイルに記述した内容が読み込まれてしまいます。
##原因２
####turbolinksの影響
turbolinksとは、高速化を目的としたライブラリで、rails4以上ではデフォルトで入っています。
ページ遷移をAjaxに置き換え、画面の一部だけを更新することで高速化しようとするため、ページ読み込みを起点としたjsのイベントが発火しなくなってしまいます。
リンクを経ずに直接ページにアクセスしたり、ページをリロードした場合にはturbolinksの影響を受けないため、正常に動作します。
リンクを踏んでページ遷移した際にもjsを動作させるには下記の方法で記述します。
turbolinks:loadとすることで初回読み込み、リロード、ページ切り替えの全てで処理を実行できるようになります。
$(document).on('turbolinks:load', function() {
実行したい処理
});
また、リンクに下記記述をすることで特定のリンクのみturbolinksを無効化することができますが、ユーザビリティを考えるとあまり多用しない方が良いのかな...？
<%= link_to "turbolinksの無効化", root_path, 'data-turbolinks': false %>
##原因３
####エラーが出て処理が止まっている
記述は上から順に読み込まれ、エラーが出た時点で止まってしまうため、該当部分の記述が正しくても、それより上に記述した部分でエラーが出ていると処理が実行されません。
エラー部分を修正することで正常に動作するようになります。
##原因4
####指定した要素を見つけられていない
getElementById('hoge')などで要素を取得し、その要素に対しての処理を記述していた場合、#hogeを取得できないと当然その後の処理は実行できません。
考えられる原因としては
- HTMLより先にJSが読み込まれている
- そもそもそのページに指定した要素がない
などがあるかと思います。
前者の場合、処理を下記関数内に入れてあげるとページを読み込んでから処理を実行できるようになります。
window.onload = function () {
実行したい処理;
};
後者の場合は、スペルミスの他、意図しないページでイベントが発火していることも考えられます。
//= require_tree . の記述をしているため、処理を実行させたいページ以外でもjsの記述が読み込まれています。
ページ読み込みをトリガーとしている場合などはイベントが発火してしまい、指定した要素を探しに行ってしまいます。
対処法は色々あると思いますが、一つの例として「要素がない場合は処理を終了する」という条件文を追加することで、続く処理でのエラーを防ぐことができます。
function(){
if (!document.getElementById("hoge")) return //この文を追加
'#hoge'に対する処理;
};
##まとめ
####RailsでJaveScriptが動かないときの原因と対処法
- そもそもJavaScript、jQueryが読み込まれていない
- turbolinksの影響
- エラーが出て処理が止まっている
- 指定した要素を見つけられていない
Railsでjsを動作させるにあたって躓いたところ、調べたことをアウトプットさせていただきました。間違っている箇所がありましたらご指摘いただけると嬉しいです🙇♀️
##参考
Rails5でjqueryを動かす方法