JavaScriptでページを再読み込みする方法｜window.location.reload()の使い方を解説

JavaScriptを使ってWebページを再読み込み（リロード）したい場合、window.location.reload()というメソッドを使用します。この記事では、コンソールから直接実行するシンプルな方法と、ボタンのクリックイベントに組み込む実践的な方法の2つを紹介します。

1行のJavaScriptでページを再読み込みする

最も手軽なのは、ブラウザの開発者ツール（Console）から直接コードを実行する方法です。以下のコードをブラウザのコンソールに貼り付けて、Enterキーを押してみてください。

window.location.reload()

これだけで現在開いているページが再読み込みされます。ただし、この方法はあくまで一時的なテスト用であり、実際のWebサイトではあまり実用的ではありません。次に、より実践的な実装方法を見ていきましょう。

ボタンのクリックイベントでページを再読み込みする

ユーザーの操作をきっかけにページを再読み込みしたい場合は、ボタンのクリックイベントと組み合わせるのが一般的です。

HTML側の実装

まず、HTMLマークアップに以下のようなボタンを追加します。

<button onclick="reloadPage()">ページを再読み込み</button>

JavaScript側の実装

続いて、JavaScriptファイルに再読み込みを実行する関数を定義します。

function reloadPage() {
    window.location.reload()
}

この関数は、ボタンがクリックされたタイミングで呼び出され、window.location.reload()によってページ全体が再読み込みされます。

補足：CodePenでテストする際の注意点

window.location.reload()は、CodePenのエディタ画面内では正しく動作しない点に注意してください。CodePenで動作を確認したい場合は、画面右下の「Change View」からデバッグモード（Debug Mode）に切り替えてテストすると、期待どおりに機能します。