エンジニアのたまご日記

プログラミングの情報発信

Rails JavaScriptのイベントが発火しない泣

みなさんお疲れ様です!

エンジニアのたまごです。

 

私もほんの2時間前まで悩み続けたJavaScriptのイベントが発火しない問題について書いていこうかと思います。

問題のコードがこれ、

 

window.addEventListener("DOMContentLoaded", () => {

(省略)

});

このjsファイルのaddEventListener("DOMContentLoaded")です。

なぜかlocalhostで最初に画面遷移したときに発火せず。再読み込みを行うと発火する。

っていう不便極まりない状態でした。

しかもherokuにあげて本番環境でも同じ現象、、、、いやいやアプリとして終わってるじゃん。

と失望しながら色々調べましたが、調べ方が悪かったのか解決するには至らず。泣

 

そしてテックキャンプ(以降TC)の元チームでZoomミーティングしてる時に、今こんな状態〜と伝えると、TCカリキュラムの中でみんなのメンター的存在だったKjさんが、"turbolinks"コメントアウトしたらいけると思いますよ!

 

What!?え?turbolinks????と思い、言われたまんまapplication.js下のturbolinksをコメントアウトしたら、画面遷移でイベント発火しました。

Wow!マジかよ、、、全く関係ないと思ってたところが悪さしてたとは、、、(プログラミングあるある)

さすが未経験なのにメンター並の知識と経験を持つKjさん、今後ともよろしくお願いいたします!!!

 

んで、

たぶんですが、今後も私と同じく初心者の方々はRailsJavaScriptを使用している時に、沼にハマる部分だと感じたのでturbolinksについて調べてみました。

こちらのブログがわかりやすかったので貼っつけときます。

 

coffeecups.blue

このブログに書いてあることで、

turbolinksを導入したアプリでリンクを踏んだ時にturbolinksが作動しますが、リンク先の全てのページを読み込むのではなくて、自動的にページを取ってきてbody要素を入れ替えてhead要素にくっつけるという作業をしてくれます。(意味がわからない方はブログへgo!)

そして、turbolinksは最初のページ読み込み時にJavaScriptなどのイベントを発火しますがページ遷移したときは読み込みません。

はいでたーーー、、原因はこいつだわーー。

ページを差し替えているだけで読み込みを行っていないからイベントが発火しなかったってことか、と解釈。

対策としてturbolinks:loadを使用するやり方もあるみたい。

まあ今回はkjメンターのいう通りコメントアウトで外しとこ。

 

って感じでJavaScriptのイベント発火しない問題を解消。

また、なんか沼にハマったら共有しますわ!

 

それでは今日はこの辺で、また!!!