はじめに
本記事では、JavaScriptのファイルが読み込まれないエラーについて記述します。
本日私が体験したエラーです。
エラー画像
404については、こちらを参照ください。
私がよく利用しているステータスコード一覧
# ミスしたコード達
function pullDownSearchForm() {
const pullDownButton = document.getElementById("back-btn");
const searchForm = document.getElementById("pull-down");
pullDownButton.addEventListener('mouseover', function(){
this.setAttribute("style", "color:red;");
});
pullDownButton.addEventListener('mouseout', function(){
this.removeAttribute("style", "color:red;");
});
pullDownButton.addEventListener('click', function() {
if (searchForm.getAttribute("style") == "display:block;"){
searchForm.removeAttribute("style", "display:block;")
} else {
searchForm.setAttribute("style", "display:block;")
};
});
};
window.addEventListener('load' , pullDownSearchForm);
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<title>KaraiApp</title>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://kit.fontawesome.com/811339f864.js" crossorigin="anonymous"></script>
<script src="mainmenu.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
結論
turbolinksの消し忘れ。
特に、JavaScriptファイル自体は間違えてなかったようです。
turbolinks
アプリケーションにおいて、画面遷移を高速化するGem
標準で導入されている、turbolinksというGemが原因で、
ページにアクセスしても、JavaScriptが作動しない場合があります。
ページ表示の際に、ページ内の全ての情報を読み込まずに、
HTML要素だけを読み込ませることで、画面の遷移を高速化しています。
しかし、このturbolinksによって画面遷移は高速化しますが、
高速化を優先させてしまうことで、
JavaScriptファイルが読み込まれず、JavaScriptにて設定したイベントが発火しないケースがあります。
コード修正
app/javascript/packs/application.js
// 省略
require("@rails/ujs").start()
require("turbolinks").start() //ここを削除！！
require("@rails/activestorage").start()
require("channels")
// 省略
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<title>KaraiApp</title>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
<script src="https://kit.fontawesome.com/811339f864.js" crossorigin="anonymous"></script>
</head>
<body>
<%= yield %>
</body>
</html>
私の場合は、これで完了でした。
終わりに
JavaScriptは好きですが、なかなか理解できていないところがあり、
機能実装に必要な場面が多いですが四苦八苦してしまいます。
JavaScriptで出来ることもカッコいいですよね。
JavaScriptを取り扱う仕事がちょっとしてみたいかもしれないです。
以下参考サイト
『Turbolinks』って、なんぞ？
なぜhead要素内で外部JavaScriptファイルを読み込むのが良くないのか？
;（セミコロン）をつけるか、つけないか？
明日も頑張ります！！