JavaScriptでページをリロードする3つの方法 - 初心者向け解説

JavaScriptでページをリロードする方法を初心者向けに解説。location.reload、history.go、window.openの使い方と使い分けを分かりやすく紹介します。

Learning Next 運営
20 分で読めます

JavaScriptでページをリロードする3つの方法 - 初心者向け解説

「JavaScriptでページを更新したいけど、どうやるの?」と疑問に思ったことはありませんか?

「ボタンをクリックしたらページを再読み込みしたい」 「フォーム送信後にページをリフレッシュしたい」

そんな機能を実装したい方は多いと思います。 でも大丈夫です!

この記事では、JavaScriptでページをリロードする3つの方法を初心者向けに詳しく解説します。 それぞれの使い分けも分かりやすく説明するので、ぜひ参考にしてください。

きっと「こんなに簡単だったんだ!」と感じられるはずですよ。

ページリロードってどんなもの?

基本的な仕組みを理解しよう

ページリロードとは、現在表示されているWebページを再度読み込むことです。

簡単に言うと、ブラウザの更新ボタンを押したのと同じ動作をJavaScriptで実行することです。 ユーザーの操作に応じて、プログラムでページを自動的に更新できます。

イメージとしては、本のページをめくり直すような感じですね。

どんな時にリロードが必要?

Webアプリケーションでページリロードが必要になる場面を見てみましょう。

実際の開発では、こんな時に使います。

  • データの更新: 最新の情報を取得したい場合
  • フォーム送信後: 送信完了後にページをリセットしたい場合
  • エラー後の復旧: エラーが発生した後に初期状態に戻したい場合
  • 設定変更後: 設定変更を反映させたい場合
  • 認証後: ログイン・ログアウト後にページを更新したい場合

どれも日常的なWebサイトで見かける機能ですよね。

方法1: location.reload() - 最も基本的な方法

シンプルで確実な基本形

location.reload()は最もシンプルで一般的なリロード方法です。

初心者の方はまずこれを覚えましょう。

// 基本的なリロード
location.reload();
// または
window.location.reload();

この方法は、ブラウザの更新ボタンを押したのと同じ動作をします。 とてもシンプルで覚えやすいですね。

実際に使ってみよう

実用的な使用例を見てみましょう。

// ボタンクリックでページをリロード
document.getElementById('reloadButton').addEventListener('click', function() {
location.reload();
});

まず、全体の流れを見てみましょう。 ボタンが押されたときにリロード処理を実行する仕組みです。

では、細かく見ていきましょう。

document.getElementById('reloadButton')

getElementByIdでボタン要素を取得しています。 reloadButtonという名前のボタンを探して取得します。

次に、イベントリスナーを設定します。

.addEventListener('click', function() {
location.reload();
});

addEventListenerでクリックイベントを監視します。 ボタンが押されたらlocation.reload()が実行されます。

フォーム送信後のリロード

もう少し実践的な例も見てみましょう。

// フォーム送信後にページをリロード
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // デフォルトの送信を防止
// フォームデータの処理
const formData = new FormData(this);
// 送信処理の例
fetch('/api/submit', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert('送信が完了しました');
location.reload(); // 送信後にページをリロード
} else {
alert('送信に失敗しました');
}
});
});

ちょっと長いですが、大丈夫です! 順番に見ていきましょう。

まず、フォームの送信をキャッチします。

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

preventDefault()で通常のフォーム送信を停止します。 これにより、自分でコントロールできるようになります。

次に、データを送信して結果に応じてリロードします。

if (response.ok) {
alert('送信が完了しました');
location.reload(); // 送信後にページをリロード
}

送信が成功したらアラートを表示して、その後ページをリロードします。 これで送信後にページがきれいにリセットされますね。

自動リロードも設定できます

一定時間後に自動でリロードすることもできます。

// 5秒後に自動リロード
setTimeout(function() {
location.reload();
}, 5000);

setTimeoutを使って5秒後にリロードを実行します。 数値を変えれば好きな時間に設定できますよ。

方法2: history.go() - 履歴を使ったリロード

ブラウザの履歴機能を活用

history.go()はブラウザの履歴を使ってページ移動やリロードを行います。

この方法は履歴操作と組み合わせて使えるのが特徴です。

// 現在のページをリロード
history.go(0);
// 1つ前のページに戻る
history.go(-1);
// 1つ後のページに進む
history.go(1);

history.go(0)は現在のページをリロードします。 数字を変えることで前後のページにも移動できます。

実際の活用例を見てみよう

戻るボタンと進むボタンの実装例です。

// 戻るボタンの実装
document.getElementById('backButton').addEventListener('click', function() {
history.go(-1); // 1つ前のページに戻る
});
// 進むボタンの実装
document.getElementById('forwardButton').addEventListener('click', function() {
history.go(1); // 1つ後のページに進む
});

ブラウザの戻る・進むボタンと同じ動作を実現できます。 ナビゲーション機能を自作したい時に便利ですね。

条件に応じた使い分け

履歴の有無に応じて処理を変えることもできます。

// 条件に応じたリロード
function conditionalReload() {
if (history.length > 1) {
// 履歴がある場合は前のページに戻る
history.go(-1);
} else {
// 履歴がない場合は現在のページをリロード
history.go(0);
}
}

history.lengthで履歴の数をチェックします。 履歴があれば前のページに戻り、なければリロードします。

賢い処理ですよね!

エラー処理と組み合わせた例

エラーが発生した時の処理も実装してみましょう。

// エラー処理と組み合わせた使用例
function handleError() {
const userChoice = confirm(
'エラーが発生しました。前のページに戻りますか?
' +
'「キャンセル」を選択するとページをリロードします。'
);
if (userChoice) {
history.go(-1); // 前のページに戻る
} else {
history.go(0); // 現在のページをリロード
}
}

confirmでユーザーに選択肢を提示します。 「OK」なら前のページに戻り、「キャンセル」ならリロードします。

ユーザーに選択権を与える親切な設計ですね。

方法3: window.open() - 新しいウィンドウでのリロード

新しいウィンドウやタブで開く

window.open()は新しいウィンドウまたはタブでページを開きます。

リロードというよりは、ページを別の場所で開く機能です。

// 現在のページを新しいタブで開く
window.open(location.href, '_blank');
// 同じウィンドウで現在のページをリロード
window.open(location.href, '_self');
// 特定のURLを開く
window.open('https://example.com', '_blank');

_blankは新しいタブ、_selfは同じウィンドウです。 使い分けることで様々な動作を実現できます。

実用的な使用例

新しいタブでページを複製する例を見てみましょう。

// 新しいタブでページを複製
document.getElementById('duplicateButton').addEventListener('click', function() {
window.open(location.href, '_blank');
});

現在のページと同じ内容を新しいタブで開きます。 比較や参照用に便利な機能ですね。

ポップアップウィンドウでの表示

ポップアップウィンドウでページを開くこともできます。

// ポップアップウィンドウでページを開く
function openPopup() {
const popup = window.open(
location.href,
'popup',
'width=800,height=600,scrollbars=yes,resizable=yes'
);
// ポップアップが開けたかチェック
if (popup) {
popup.focus();
} else {
alert('ポップアップがブロックされました。ブラウザの設定を確認してください。');
}
}

3つ目の引数でウィンドウのサイズや機能を指定できます。 popup.focus()でポップアップにフォーカスを当てています。

ポップアップがブロックされた場合のエラー処理も含まれていますね。 これで安全にポップアップを開けます。

モバイル対応の賢い処理

デバイスに応じて開き方を変える例も見てみましょう。

// 条件に応じた開き方の制御
function smartOpen(url) {
// モバイルデバイスかどうかをチェック
const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
// モバイルでは同じウィンドウで開く
window.open(url, '_self');
} else {
// デスクトップでは新しいタブで開く
window.open(url, '_blank');
}
}

navigator.userAgentでデバイスの種類を判定します。 モバイルなら同じウィンドウ、デスクトップなら新しいタブで開きます。

ユーザーの環境に配慮した実装ですね。

各方法の使い分けを理解しよう

特徴を比較してみましょう

それぞれの方法には特徴があります。

実際の開発では用途に応じて選択します。

location.reload()の特徴

  • 最もシンプルで確実
  • 全ブラウザで確実に動作
  • キャッシュ制御も可能
  • 初心者におすすめ

history.go()の特徴

  • 履歴操作と組み合わせ可能
  • ナビゲーション機能に適している
  • 少し複雑だが柔軟性がある

window.open()の特徴

  • 新しいウィンドウ・タブでの表示
  • ウィンドウ制御が可能
  • リロードというより新規表示

実際の選択基準

どの方法を選ぶべきか迷った時の基準です。

// 状況に応じた選択例
function chooseReloadMethod(situation) {
switch (situation) {
case 'normal':
// 通常のリロード
return () => location.reload();
case 'form-submit':
// フォーム送信後
return () => location.reload();
case 'navigation':
// ナビゲーション機能
return (steps) => history.go(steps);
case 'new-tab':
// 新しいタブで開く
return () => window.open(location.href, '_blank');
default:
return () => location.reload();
}
}

迷った時はlocation.reload()を選んでおけば間違いありません。 シンプルで確実に動作しますよ。

実践的な統合例

複数の機能を組み合わせたクラスも作れます。

// リロード機能を統合したクラス
class PageReloader {
constructor() {
this.reloadCount = 0;
this.maxReloads = 3; // 最大リロード回数
}
// 基本的なリロード
reload() {
if (this.reloadCount < this.maxReloads) {
this.reloadCount++;
location.reload();
} else {
console.warn('最大リロード回数に達しました');
this.showReloadLimitMessage();
}
}
// 新しいタブでリロード
reloadInNewTab() {
window.open(location.href, '_blank');
}
// 自動リロード
autoReload(interval = 30000) { // デフォルト30秒
return setInterval(() => {
this.reload();
}, interval);
}
// リロード制限メッセージ
showReloadLimitMessage() {
alert('ページのリロードが制限されています。手動でブラウザの更新ボタンを押してください。');
}
}

ちょっと複雑に見えますが、基本的にはlocation.reload()を使っています。 追加機能として回数制限や自動リロードを実装しているだけです。

このクラスを使えば様々なリロード機能を簡単に実装できますね。

安全なリロード実装のコツ

エラー処理を忘れずに

リロード機能には適切なエラー処理を含めましょう。

// エラー処理を含む安全なリロード
function safeReload(options = {}) {
const {
showConfirm = false,
confirmMessage = 'ページをリロードしますか?'
} = options;
try {
// 確認ダイアログの表示
if (showConfirm) {
const confirmed = confirm(confirmMessage);
if (!confirmed) {
return false;
}
}
// リロード実行
location.reload();
return true;
} catch (error) {
console.error('リロード中にエラーが発生しました:', error);
alert('ページのリロードに失敗しました。手動で更新してください。');
return false;
}
}

try-catchでエラーをキャッチしています。 確認ダイアログも表示できるので、ユーザーに親切ですね。

未保存データの確認

フォームに入力中のデータがある場合は確認を表示しましょう。

// 未保存データの確認
function checkUnsavedChanges() {
const forms = document.querySelectorAll('form');
for (let form of forms) {
const inputs = form.querySelectorAll('input, textarea, select');
for (let input of inputs) {
if (input.defaultValue !== input.value) {
return true; // 変更あり
}
}
}
return false; // 変更なし
}
// スマートリロード
function smartReload() {
const hasUnsavedChanges = checkUnsavedChanges();
if (hasUnsavedChanges) {
const confirmReload = confirm(
'保存されていない変更があります。
' +
'リロードすると変更が失われますが、続行しますか?'
);
if (confirmReload) {
location.reload();
}
} else {
location.reload();
}
}

フォームの値をチェックして変更があれば確認を表示します。 ユーザーの作業を無駄にしない配慮ですね。

まとめ

JavaScriptでページをリロードする方法は、用途に応じて使い分けることが重要です。

最も一般的で確実なlocation.reload()を基本として覚えましょう。 履歴操作が必要な場合はhistory.go()、新しいウィンドウで開きたい場合はwindow.open()を使用します。

また、ユーザビリティを考慮した確認ダイアログやエラー処理も忘れずに実装することが大切です。

まずは基本的なlocation.reload()から始めて、必要に応じて他の方法も習得していきましょう。 ぜひこの機会に、ページリロード機能をマスターしてみませんか?

関連記事