window.location.reload は、JavaScript でページをプログラムから再読み込みするためのメソッドです。このメソッドを実行すると、ユーザーがブラウザの「再読み込み」ボタンを押したときと同じ効果が得られます。
window.location.reloadの書式
window.location.reload(forceGet);引数
reload メソッドは1つの引数を受け取ります。この引数はオプションです。
forceGet(オプション): 真偽値（Boolean）trueを指定すると、ブラウザがサーバーから最新のページを強制的に取得します。これはキャッシュを無視してページを再読み込みすることを意味します。falseまたは指定しない場合は、ブラウザがキャッシュされたページを使用して再読み込みします。
具体例1. キャッシュを使用してページを再読み込みする場合
ページがブラウザのキャッシュに保存されている場合、そのキャッシュを使用して再読み込みが行われます。
window.location.reload();または
window.location.reload(false);2. サーバーから最新のページを再取得して再読み込みする場合
ブラウザがキャッシュを無視して、サーバーから最新のページを取得し、再読み込みを行います。
window.location.reload(true);詳細な使用シナリオ1: フォームのリセット
フォーム送信後にページをリセットしたい場合があります。この場合、ユーザーがフォームを再度入力するためにページをリロードすることができます。
document.querySelector('form').onsubmit = function(event) {
event.preventDefault(); // デフォルトのフォーム送信を防ぐ
window.location.reload(); // ページを再読み込み
};シナリオ 2: 更新されたデータの取得
アプリケーションがサーバー上のデータを頻繁に更新する場合、ユーザーが常に最新の情報を表示するためにページをリロードする必要があります。
function checkForUpdates() {
fetch('/check-updates').then(response => response.json()).then(data => {
if (data.hasUpdates) {
window.location.reload(true); // 最新のデータを取得してページを再読み込み
}
});
}
setInterval(checkForUpdates, 60000); // 1分ごとに更新をチェック
まとめ
window.location.reload は、現在のページを再読み込みするための便利なメソッドです。オプションの引数を使用して、キャッシュを使用するか、サーバーから最新のページを取得するかを制御できます。具体的なシナリオに応じて適切な方法を選択してください。
