【JavaScript】ページをリロードする方法

JavaScriptでページをリロード（再読み込み）するには location.reload() を使います。基本はこれだけですが、「キャッシュを無視して最新にしたい」「自動でリロードしたい」といった場面で誤解しやすいポイントがあります。

この記事では、正しいリロード方法と、JavaScriptではできないこと（キャッシュ無視リロード）を正直に解説します。

標準のリロード（location.reload）

もっとも基本的な方法です。ブラウザの更新ボタンと同じく、ページを再読み込みします（通常どおりキャッシュは利用されます）。

location.reload();

履歴を残さずリロード（location.replace）

同じURLを location.replace() に渡すと、履歴に新しいエントリを追加せずにリロードできます。

location.replace(location.href);

「戻る」で前の状態に戻したくないとき（フォーム再送信を避けたいときなど）に便利です。URLの遷移全般はURLを遷移させる方法でも解説しています。

「キャッシュを無視したリロード」はJSでは確実にできない

よく見かける2つの方法は、いずれもキャッシュ無視にはなりません。まずは誤解を解いておきましょう。

// ❌ 引数 true は非標準。現代ブラウザでは無視され reload() と同じ
location.reload(true);

// ❌ これは「通常のリロード」。キャッシュは無視されない
//    さらに URL に #hash があると、同じURLの再代入では何も起きない
location.href = location.href;

確実に最新を取得したいなら、目的に応じて次のようにします。

// ① URLにユニークな値を付けてキャッシュを回避（キャッシュバスティング）
//    ※ URLに ?_=... が付く点に注意
location.href = location.pathname + "?_=" + Date.now();

// ② データだけ最新化したいなら fetch で no-store
fetch("/api/data", { cache: "no-store" });

そもそもキャッシュの効き方はサーバーの Cache-Control ヘッダーで決まります。常に最新を返したいリソースは、サーバー側でキャッシュ制御するのが本筋です。

一定時間後・定期的にリロードする

一定時間後や定期的にリロードしたいときは、setTimeout / setInterval を使います。JavaScriptを使わない meta refresh もあります。

// 30秒後に1回だけリロード
setTimeout(() => location.reload(), 30000);

// 30秒ごとに繰り返しリロード（clearIntervalで停止できる）
const timer = setInterval(() => location.reload(), 30000);
// clearInterval(timer);

<!-- 30秒ごとにリロード -->
<meta http-equiv="refresh" content="30">

setInterval の使い方や停止方法はsetIntervalの使い方、ウィンドウ幅の条件でリロードする例はウィンドウサイズの条件でページをリロードする方法を参考にしてください。

リロードより部分更新（fetch）を検討する

「最新データを表示したい」だけなら、フルリロードは重すぎる場合が多いです。ページ全体を読み込み直すとCSSや画像も再取得され、スクロール位置や入力中の値もリセットされます。データだけ更新したいなら fetch で取得し、DOMの一部だけ書き換えましょう。

async function refreshData() {
  const res = await fetch("/api/data", { cache: "no-store" });
  const data = await res.json();
  render(data); // 必要な部分だけDOMを更新
}

ボタンによる更新やカウントダウン付き自動更新、Ajax部分更新まで含めた実装はページ更新ボタンの実装完全ガイドが参考になります。

よくある質問（FAQ）

まとめ

ページのリロードは location.reload() が基本で、履歴を残したくないなら location.replace(location.href) を使います。

注意したいのは、location.reload(true) も location.href = location.href もキャッシュ無視にはならない点です。JavaScriptでキャッシュを完全に無視することはできないため、キャッシュバスティングやサーバーの Cache-Control で対応します。最新データの表示が目的なら、フルリロードより fetch での部分更新を検討しましょう。