JavaScriptでページをリロードさせる方法：location.reload

サーバーで情報を更新しても、HTMLは静的なコンテンツなためすぐにその結果をページ上に表示することはできません。

その際、ページ全体をリロードする必要があります。リロードさせるにはブラウザの更新ボタンを押してもらうことで実現しますが、できればページ上のギミックで更新できたほうがよいです。

そんなときは、JavaScriptのreload関数を用いて実現します。

reload関数には二つの使い方があるのでそれぞれ紹介します。

キャッシュを用いたリロード

まずはキャッシュを用いたリロード方法です。

キャッシュとは、一度見たページをCPUに一時保存しておき、速く表示させる機能です。

その場合のreloadは以下のように書きます。

キャッシュを用いたリロードのため、早めにリロードを完了するのが特徴です。

キャッシュを用いないリロード

ブラウザのキャッシュを無視したリロードは以下のように書きます。

このリロードではWebページの情報をサーバーから取得して来るため、最新のデータが得られます。

二つのユースケース

キャッシュを用いたリロードの場合は、Webのコンテンツを動的に取得しているWebページでは利用できると思います。

動的に取得する部分はキャッシュがないので仕方ありませんが、他の画像やCSS等のデータに変わりがないので、そのデータを取得する時間を短縮することができます。

キャッシュを用いないリロードは開発で頻繁に更新する部分に使うと良いでしょう。

キャッシュが残ってしまい最新のデータが得られず、Webページのデザインが崩れてしまう事故を防ぐことができます。