何度キャッシュクリアしてもJavaScriptが更新されなかった問題

# JavaScriptを更新したのにローカル環境で更新ファイルが読み込まなかった問題

JavaScriptファイルを書き換えてローカル環境で確認した時にchromeのディベロッパーツールを確認したが、読み込まれませんでした。
```Ctrl+F5```などでキャッシュクリアしたり、rails のキャッシュを```rails tmp:cache:clear```でクリアしたのちにサーバーを起動しなおしても解決しなかったときの対処法が見つからなかったので、メモしておきます。

## 解決方法

### 1. Webpackerの再ビルド
JavaScriptファイルがWebpackerで管理されている場合、Webpackerを再ビルドして新しいファイルを生成すると治る場合がある。
ターミナルでプロジェクトのルートディレクトリから ```bin/webpack``` コマンドを実行する。これにより、application.js ファイルが再ビルドされるはず。

上記のコマンドを試したところ、下記のエラーが発生していた。

```bash
/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

Error: Cannot find module '../task-status-change'
Require stack:
- /home/user/projects/bymyself_app/node_modules/webpack/lib/webpack.js
- /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/validate-options.js
- /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/convert-argv.js
- /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js
- /home/user/projects/bymyself_app/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:931:15)
    at Function.Module._load (internal/modules/cjs/loader.js:774:27)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/user/projects/bymyself_app/node_modules/webpack/lib/webpack.js:207:1)
    at Module._compile (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32)
    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/validate-options.js:2:24)
    at Module._compile (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32)
    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (internal/modules/cjs/helpers.js:107:18)
    at /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:71:14
    at Object.parse (/home/user/projects/bymyself_app/node_modules/yargs/yargs.js:576:18)
    at /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1114:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/user/projects/bymyself_app/node_modules/webpack/lib/webpack.js',
    '/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/validate-options.js',
    '/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/convert-argv.js',
    '/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js',
    '/home/user/projects/bymyself_app/node_modules/webpack/bin/webpack.js'
  ]
}
```
モジュールが見つからないというエラーが発生していた。
**Error: Cannot find module '../task-status-change'**
これは、application.jsでrequireしているファイル名を変更しているが、反映されていないため発生していると思っていたが…。

なぜ更新されないのか、悩んだ末に、パッケージの依存関係が問題を起こしている可能性があるということが判明。

### 2.　依存関係の再インストール

```nmp install```
```yarn install```
を実行

```nmp install```の実行結果▼
```bash
   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │      New major version of npm available! 6.14.18 → 9.8.1      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v9.8.1   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯
```

```yarn install```の実行結果▼
```bash
success Already up-to-date.
```

npmの依存関係が問題だったよう。

### 3.webpackerの再々ビルド


```bin/ewbpack```を再度実行

エラーなく実行完了。

再度サーバーを起動してローカル環境で変更が反映されているか、確認したところ問題は解決されていた！！

半日溶かしたので、自分用にメモと他の誰かのためになれば…

以上JavaScriptが更新されないときの対処法第二弾でした。