JavaScript | Web API：ウィンドウ・ブラウザ制御 － ページリロード

JavaScript JavaScript
スポンサーリンク

「ページリロード」は「このURLをもう一度最初から開き直すこと」

まずイメージからいきます。
ブラウザの「再読み込みボタン」や F5 を押すと、

今表示している URL にもう一度アクセスする
HTML・CSS・JS・画像などを取り直す
JavaScript も最初から実行し直す

ということが起きます。
これを JavaScript から行うのが「ページリロード」です。

一番よく使うのは location.reload() です。
ここを軸に、「何が起きるのか」「いつ使うのか」を整理していきます。

location.reload() がやっていること

基本の書き方と動き

location.reload();
JavaScript

これだけで、
「今のページを再読み込みして」とブラウザに頼むことができます。

ユーザーが再読み込みボタンを押したのとほぼ同じで、

同じ URL にもう一度アクセス
→ HTML を読み込む
→ JavaScript を最初から実行
→ 画面が描き直される

という流れになります。

つまり、「今の状態を全部捨てて、最初からやり直す」 という動きです。

キャッシュを使うかどうか（古い仕様の第1引数）

昔の仕様では、location.reload(true) のように書くと
「キャッシュを無視してサーバーから取り直して」とお願いできる、とされていました。

location.reload(true); // 古い書き方
JavaScript

ただ、今はブラウザごとの挙動もまちまちで、
あまりこの引数に頼るのはおすすめしません。

「どうしてもキャッシュを無視したい」ようなケースでは、
URL にクエリを付ける（?t=タイムスタンプ など）といった別の手段を使うことが多いです。

リロードすると「何がリセットされて、何が残るのか」

JavaScript の状態は全部リセットされる

例えば、こんなコードを考えます。

let count = 0;

button.addEventListener("click", () => {
  count++;
  console.log("count:", count);
});
JavaScript

このページでボタンを何度か押すと、
count は 1, 2, 3… と増えていきます。

ここで location.reload() をすると、

ページが再読み込みされる
→ JavaScript が最初から実行される
→ let count = 0; からやり直し

となるので、
count はまた 0 からスタートします。

つまり、メモリ上の状態（変数・オブジェクトなど）は全部消える、と考えてください。

DOM の変更も全部リセットされる

JavaScript で DOM を書き換えていた場合も、
リロードすると元の HTML からやり直しです。

document.body.innerHTML = "<h1>書き換えました</h1>";
JavaScript

こうしていても、
location.reload() をすると、

サーバーから配信された元の HTML
（あるいはローカルファイルの元の HTML）

に戻ります。

「JavaScript でいろいろいじったけど、一旦全部リセットしたい」
というときに、リロードは分かりやすい手段です。

ローカルストレージなど「ブラウザに保存したデータ」は残る

一方で、localStorage や sessionStorage、Cookie など、
ブラウザに保存されたデータ は、リロードしても消えません。

localStorage.setItem("name", "Taro");
location.reload();
// リロード後
console.log(localStorage.getItem("name")); // "Taro"
JavaScript

このように、

メモリ上の状態 → 消える
ブラウザに保存したデータ → 残る

という違いがあります。

ここを理解しておくと、
「何をどこに保存すべきか」の設計がしやすくなります。

具体例：ボタンでページをリロードする

HTML

<button id="reload">ページをリロード</button>
<p id="time"></p>

JavaScript

const reloadButton = document.querySelector("#reload");
const timeP = document.querySelector("#time");

function showTime() {
  const now = new Date();
  timeP.textContent = "読み込まれた時刻: " + now.toLocaleTimeString();
}

reloadButton.addEventListener("click", () => {
  location.reload();
});

showTime();
JavaScript

このページを開くと、

「読み込まれた時刻: 〇〇:〇〇:〇〇」
という表示が出ます。

ボタンを押すと location.reload() が呼ばれ、
ページが再読み込みされて、
showTime() がもう一度実行されます。

その結果、
表示されている時刻が新しいものに変わります。

これで、

リロードすると JavaScript が最初から実行される
→ 初期化処理もやり直される

という感覚がつかめるはずです。

「リダイレクト」と「リロード」の違いを整理する

リロードは「同じ URL にもう一度行く」

location.reload() は、
「今の URL にもう一度アクセスする」 だけです。

URL は変わりません。
https://example.com/page にいるなら、
リロード後も https://example.com/page のままです。

リダイレクトは「別の URL に移動する」

一方で、リダイレクトは

location.href = "/login";
location.replace("/login");
JavaScript

のように、
「別の URL に移動する」 動きです。

URL が /page から /login に変わります。

どちらも「画面が切り替わる」ので似ていますが、

同じ URL に行き直す → リロード
別の URL に行く → リダイレクト

と整理しておくと、頭の中がスッキリします。

ページリロードを使う場面・使わない場面

使う場面の典型例

学習中・デバッグ中に「一旦全部リセットしたい」
フォーム送信後に「同じページをクリーンな状態で見せたい」（ただし注意点あり）
「最新の状態を必ずサーバーから取りたい」簡単なツール

などでは、location.reload() は分かりやすくて便利です。

特に学習中は、

「状態がぐちゃぐちゃになったら、とりあえずリロード」

というのは全然アリです。
ブラウザの再読み込みボタンを押すのと同じことを、
コードからやっているだけです。

使わないほうがいい場面

最近の Web アプリ（SPA など）では、
「ページをリロードせずに、画面の一部だけを更新する」 のが基本です。

リロードを多用すると、

毎回 JavaScript を全部読み直す
毎回初期化からやり直し
ネットワーク負荷も増える

など、ユーザー体験としてもパフォーマンスとしても微妙になります。

「この部分だけ更新したい」
「このリストだけ最新にしたい」

という場合は、

API を叩いてデータだけ取り直す
DOM の一部だけ書き換える

といった設計のほうが、現代的で気持ちいいです。

リロードはあくまで「最後の手段」くらいの感覚で持っておくと、
設計の幅が広がります。

初心者として「ページリロード」で本当に掴んでほしいこと

location.reload() は「今の URL をもう一度最初から開き直す」
リロードすると JavaScript の状態・DOM の変更は全部リセットされる
localStorage など「ブラウザに保存したデータ」はリロードしても残る
リロードは「同じ URL」、リダイレクトは「別の URL」
学習・デバッグでは便利だが、本番アプリでは「部分更新」を優先することが多い

一度、ブラウザのコンソールで

console.log("リロード前");
location.reload();
console.log("リロード後"); // ここは実行されないと思ってよい
JavaScript

と打ってみてください。

「ここで処理が途切れて、最初からやり直しているんだな」という感覚が
自分の中でつながると、
ページリロードはただの「再読み込みボタン」ではなく、
「状態をまるごとリセットする強力なスイッチ」 として見えてきます。

スポンサーリンク
タイトルとURLをコピーしました