6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptの更新が反映されないときの対処

Posted at

#結論

ブラウザで古いJavaScriptファイルがキャッシュされており、更新後のファイルを読み込めていなかった。

#前提知識

Google Chrome、Mozilla Firefox、Internet Explorerなどのウェブブラウザは、インターネット上にある情報を取得・閲覧するソフトウェアアプリケーションです。ブラウザは、私たちが探しているウェブサイトやその他の情報を、URL経由で検索、発見、表示しています。

キャッシュとは、一度アクセスしたサイトのデータ(画像やHTMLなど)をブラウザで一時的に保管しておく仕組みです。こうしてデータを保管しておく目的は、帯域幅の混雑を避けページの表示を高速化することにあります。

つまり、次回同じページを閲覧する際に、キャッシュに保存されたページデータが読み込まれるため、インターネット上から読み込むよりも速く表示することができるのです。

言い換えれば、ページデータがキャッシュに保管されていれば、ブラウザは新しくHTMLリクエストを送信する必要がありません。そのため、古いWebサイトが表示される、という結果になるのです。

参考:ブラウザのキャッシュとは?

「.js」に限らず静的なファイル(.jpgなども)はブラウザにキャッシュされているので、更新した後はサーバにあるファイルを再度読み込む必要がある。

#確認

開発者ツールの「Network」タブにて確認する(例はGoogle Chrome)。

1回目のページ読み込み。
「validation.js」という17.3kBのファイルを93msで読み込んでいることがわかる。
1.PNG

2回目のページ読み込み。
ファイルサイズを示す「Size」に(memory cache)が表示されている。通信を行っていないのでTimeも0ms。

「validation.js」はブラウザで保持しているので、jsファイルをとるリクエストが必要なく高速にページを表示できる。
...のはいいが変更した「validation.js」を再度読み込んでほしいので、これでは困る。

2.PNG

#対処

###1.ハード再読み込みを使用する

Ctrl+Rでページの更新を行うことができるが、Ctrl+Shift+Rでキャッシュを破棄しつつページの更新を行うことができる。
(Macの場合はCmd+Shift+R)

###2.開発者ツールの設定を変更する

「Disable cache」にチェックを入れることでブラウザでキャッシュを保持しなくなる。
キャプチャ.PNG

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?