[JavaScript]ファイルが読み込まれないエラー(404)

# はじめに
本記事では、JavaScriptのファイルが読み込まれないエラーについて記述します。
本日私が体験したエラーです。

# エラー画像

![JavaScript 404エラー（読み込めない）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/47941374-a5e5-73a2-61ca-c541311bb4ee.png)

404については、こちらを参照ください。
[私がよく利用しているステータスコード一覧](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/400)

#　ミスしたコード達

```javascript
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);
```

```erb
<!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")

// 省略
```

```erb
<!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』って、なんぞ？](https://www.ryotaku.com/entry/2019/01/15/213420)
[なぜhead要素内で外部JavaScriptファイルを読み込むのが良くないのか？](https://www.1-firststep.com/archives/2086)
[;（セミコロン）をつけるか、つけないか？](https://teratail.com/questions/21394)

明日も頑張ります！！