JavaScriptで画面をリロードする方法【作り方】

2024 4/26

2024年4月25日 2024年4月26日

キーボードのF5やブラウザのリロードボタンではなく、

JavaScriptを使ってリロードする方法を紹介します。

また、クリックによってそのリロードを行うボタンの作成方法も解説します。

おねしゃす

完成コード

今回完成コードは２つ用意します。

HTML

<button onclick="reloadPage()">ページをリロード</button>

JavaScript

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

これでリロードボタン実装完了です。

JavaScriptで定義したリロード関数「reloadPage」を、ボタンのonclick属性に設定しただけです。

以下はこの方法のメリットとデメリットです。

メリット
・シンプル
・実装が簡単

デメリット
・ボタンが複数ある場合、それぞれに関数を呼び出すonclick設定が必要
・コードが散らばりやすい

HTML

<button id="reloadButton">ページをリロード</button>

JavaScript

const button = document.getElementById("reloadButton");
button.addEventListener("click", function () {
    location.reload();
});

これで完成です。

クリックイベントを、HTMLではなくJavaScript側でaddEventListenerを使って監視しています。

以下はこの方法のメリットとデメリットです。

メリット
・複数のボタンに同じイベントを簡単に連結できる
・JavaScriptとHTMLの分離ができる

デメリット
・ちょっとだけコード量が増える

基本的には、可能ならこちらのパターンで実装するのがベターかなと思います。

純粋なJavaScriptでのみ記述するという場合はあまり不都合ないかと思いますが、

ReactやNext.jsなどで今回のコードをそのまま使用するのは向いていません。

ReactはSPAのアーキテクチャを基本にしているため、ページの完全リロードは推奨されていません。

細かい話をするとステートの喪失につながるとか、パフォーマンスの低下、ルーティングの問題などがあるのですが

ここではひとまず「使用には注意が必要である」ということだけ覚えておいてください。

というわけで今回はJSでリロードする機能の作り方でした。

参考になれば幸いです。

よかったらシェアしてね！