【jQuery】ページ更新ボタンの実装完全ガイド｜ハードリロード・カウントダウン・自動更新・Ajax部分更新まで

ページ更新ボタンは location.reload() の1行で実装できますが、実務では「スピナー付きの更新アニメーション」「n秒後の自動リロード」「データが変わった部分だけAjaxで再取得」など、様々なパターンが求められます。

1. 基本実装とlocation.reload()の挙動

まず基本の実装から確認します。location.reload() を呼ぶだけでページが再読み込みされます。

<button id="reload-btn">ページを更新する</button>

$(function () {
  $('#reload-btn').on('click', function () {
    location.reload();
  });
});

// ハードリロード（キャッシュを無視して必ず最新を取得）
$(function () {
  $('#hard-reload-btn').on('click', function () {
    // URLにタイムスタンプを付けてキャッシュを回避
    var url = location.href.split('?')[0] + '?t=' + Date.now();
    location.href = url;
  });
});

2. ローディングスピナー付き更新ボタン

ボタンをクリックした瞬間にスピナーを表示し、リロード中であることをユーザーに伝えます。「更新ボタンを何度も押してしまう」問題も防げます。

<button id="spinner-btn">
  <span class="btn-text">データを更新する</span>
  <span class="btn-spinner" style="display:none;"> ⟳ 更新中...</span>
</button>

@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn-spinner {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

$(function () {
  $('#spinner-btn').on('click', function () {
    var $btn = $(this);

    // ボタンを無効化してスピナーを表示
    $btn.prop('disabled', true);
    $btn.find('.btn-text').hide();
    $btn.find('.btn-spinner').show();

    // 少し待ってからリロード（スピナーをユーザーに見せるため）
    setTimeout(function () {
      location.reload();
    }, 300);
  });
});

3. カウントダウン付きリロード

「3秒後に自動で更新されます」のようにカウントダウンを表示してからリロードするパターンです。セッションタイムアウト画面やエラー画面でよく使われます。

<p id="countdown-msg">3秒後にページを更新します...</p>
<button id="cancel-reload">キャンセル</button>

$(function () {
  var count    = 3;  // カウントダウン秒数
  var timer    = null;
  var canceled = false;

  function tick() {
    if (canceled) return;

    if (count <= 0) {
      location.reload();
      return;
    }

    $('#countdown-msg').text(count + '秒後にページを更新します...');
    count--;
    timer = setTimeout(tick, 1000);
  }

  tick();  // カウントダウン開始

  // キャンセルボタン
  $('#cancel-reload').on('click', function () {
    canceled = true;
    clearTimeout(timer);
    $('#countdown-msg').text('更新をキャンセルしました。');
    $(this).prop('disabled', true);
  });
});

4. n秒ごとに自動更新する

株価・ニュース・スポーツスコアなど、リアルタイムデータをポーリングで定期更新するパターンです。残り時間の表示と手動更新ボタンも組み合わせます。

<div id="data-area">
  <!-- ここにリアルタイムデータを表示 -->
</div>
<button id="manual-refresh">今すぐ更新</button>
<span id="auto-refresh-timer"></span>

$(function () {
  var INTERVAL = 30000;  // 30秒ごとにリロード

  // 残り時間を表示しながらカウントダウン
  var remaining = INTERVAL / 1000;
  var timer = setInterval(function () {
    remaining--;
    $('#auto-refresh-timer').text('次の更新まで ' + remaining + ' 秒');

    if (remaining <= 0) {
      location.reload();
    }
  }, 1000);

  // 手動更新ボタンでタイマーリセット
  $('#manual-refresh').on('click', function () {
    clearInterval(timer);
    location.reload();
  });
});

5. 未保存データがある場合に警告して離脱を阻止する

フォームに入力中のユーザーが誤ってリロードや離脱をしようとしたとき、確認ダイアログを表示して入力データを守ります。

$(function () {
  var isDirty = false;  // 未保存の変更があるかどうか

  // フォームへの入力で「変更あり」フラグをオン
  $('form input, form textarea, form select').on('input change', function () {
    isDirty = true;
  });

  // フォーム送信時は警告しない
  $('form').on('submit', function () {
    isDirty = false;
  });

  // リロード・タブ閉じ・URL遷移を検知して警告
  $(window).on('beforeunload', function () {
    if (isDirty) {
      return '入力中のデータが失われます。本当にページを離れますか？';
    }
  });

  // 更新ボタンから手動でリロードする場合
  $('#reload-with-check').on('click', function () {
    if (isDirty) {
      if (!confirm('入力中のデータが失われます。ページを更新しますか？')) {
        return;  // キャンセル
      }
    }
    isDirty = false;  // フラグをリセット
    location.reload();
  });
});

6. AjaxでページのHTML一部を取得して更新する

ページ全体をリロードせず、特定のエリアのコンテンツだけを最新状態に更新するパターンです。スクロール位置を保ったまま、表示中のデータを差し替えられます。

<div id="news-feed">
  <!-- 動的に更新されるコンテンツエリア -->
  <p>記事の一覧がここに表示されます。</p>
</div>
<button id="fetch-btn">最新の記事を取得する</button>
<span id="fetch-status"></span>

$(function () {
  $('#fetch-btn').on('click', function () {
    var $btn = $(this);
    $btn.prop('disabled', true);
    $('#fetch-status').text('更新中...');

    // 同じURLのHTMLを取得して #news-feed のコンテンツを差し替え
    $.ajax({
      url:     location.href,
      type:    'GET',
      success: function (html) {
        var $newContent = $(html).find('#news-feed').html();
        if ($newContent) {
          $('#news-feed').html($newContent);
          $('#fetch-status').text('更新しました（' + new Date().toLocaleTimeString() + '）');
        }
      },
      error: function () {
        $('#fetch-status').text('更新に失敗しました。');
      },
      complete: function () {
        $btn.prop('disabled', false);
      }
    });
  });
});

パターン選択の目安まとめ

まとめ

ページ更新ボタンの実装は location.reload() が基本ですが、ユーザー体験を高めるためにスピナー・カウントダウン・beforeunload・Ajax部分更新などを組み合わせることが重要です。要件に合わせてパターンを選んでください。

関連記事: ローディング画面を実装する完全ガイド / カウントダウンを表示する方法 / アニメーション完全ガイド

よくある質問（FAQ）