わかったつもりになってない?

わかったつもり防止のために、日常で学んだことをもう少し深堀したいブログ

Ruby on RailsでJavaScriptが2回実行されちゃう件の原因と対策

ども。Progateってサービスに出会って、唐突にプログラミング学んでからWebサービス作り始めて早3ヶ月目に突入する昨今です。めっちゃ飽き性なのですが我ながらよく続いてるもんだぜ。

ここ20日くらい以前公開したanIRanってサービスに、もうちょい操作性を持たせるべく再度ProgateでjQuery(JavaScript)ってのを学んであれこれやってました。…が、何故か処理が2重で実行される事態が発生して、かなりの時間解消に費やしたので原因と対策について残しておきたいと思います。

1.事態:JavaScriptの処理が2回実行されてしまう

タイトルで全て言ってしまってますが、jQueryで仕込んだ処理を実行したところ何故か2回実行される事態が発生しました。デバッグのため、処理の中にalert(メッセージをポップアップで表示させるメソッド)を仕込んだところ、2回表示されたことで気付きました。

以下のポップアップが2回表示されてしまいました。
f:id:gattsu09:20180912223208p:plain

2.原因:application.html.erb内でJavaScriptを読み込む処理を2回記述していた

「application.html.erb」ファイルのhead内でJavaScriptを読み込むタグ「javascript_include_tag」を2回記述していたことが、2回実行されちゃう原因でした。Ruby on Railsはデフォルトで1つ目の「javascript_include_tag」が記述されており、何もしなくてもjQueryは利用可能だったのですが、最初それを知らなくてアレコレいじってるときに自分で2つ目のタグを追加していました…。完全に僕のミスですね。

f:id:gattsu09:20180912223625p:plain

3.対策:2つ目のjavascript_include_tagを消す

と、いうわけで対策として2つ目のjavascript_include_tagを消すことで事態解消しました。単純なことなんですが、解消するためにかなり時間がかかりました…同じ事象で困っている誰かの参考になれば幸いです。