何度も同じ内容を忘れては調べてるので、備忘録として要点をまとめたページを作りました。
外部ファイルのCSSやJavaScriptを修正しても更新されない理由は、ブラウザのキャッシュクリアができていないためです。
対策：クエリパラメータを付けて強制的に最新版を読み込ませる
<link rel="stylesheet" href="style.css?1">
<script src="script.js?1"></script>反映されないのはキャッシュが残っているため
キャッシュとは、一度アクセスしたウェブサイトのデータを一時的に保存し、次回アクセス時に高速に表示させる仕組みのことです。
このキャッシュが残っていると、保存されている以前のCSSやJavaScriptを読み込むので最新版が反映されません。
それを解決するためには、
・キャッシュをクリアする
・スーパーリロードする
・強制的に最新版を読み込むようにする
などの対処法があります。
キャッシュを削除する方法
キャッシュを削除する方法はお使いのブラウザによって変わりますが、設定メニューから「閲覧履歴データの削除」を選択します。そこから「キャッシュされた画像とファイル」にチェックを入れ、「データを削除」をクリックすれば完了です。
しかし、キャッシュを削除することで、ウェブサイトの読み込み速度が一時的に遅くなったり、データ通信量が増える可能性があります、また、ログイン情報などが消える場合があります。
特定のページだけキャッシュクリアする方法に、スーパーリロードがあります。スーパーリロードは、ブラウザのキャッシュを無視して最新のデータを取得します。
Windowsの場合は、ショートカットキー「Ctrl + F5」
Macの場合は、Shiftキーを押しながら更新ボタンをクリック
強制的に最新版を読み込むようにする方法
ユーザー側は最新版になってない状態を知らないことも多く、アップデートのたびにキャッシュクリアをお願いするのも良い方法とは言えません。
プログラミング上で強制的に最新版を読み込むようにすることが可能です。
HTMLファイルにあるCSSやJavaScriptのファイル名の後ろ（URLの末尾）にクエリパラメータ、「?ver=1.00」などハテナをつけて数字やアルファベットを付けると最新版を読み込ませることができます。
イコールを付けずに「?1」や「?2」などでも可能です。
修正前
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>修正後
<link rel="stylesheet" href="style.css?1">
<script src="script.js?1"></script>CSSやJavaScriptを修正したら、ハテナの後ろの値を変更すれば即反映されるようになります。
