【JavaScript】ページ移動・ページリロードの方法について

はじめに

JavaScriptでは、ブラウザのページ遷移やリロード（再読み込み）を実行できます。今回は以下のような基本操作を、HTMLとJavaScriptを分けた形式で紹介します。
・別ページへの移動
・同じページの再読み込み（リロード）
・履歴を使った前後ページへの移動

<button id="toSecondPage">別ページへ移動</button>

JavaScript

document.getElementById("toSecondPage").addEventListener("click", () => {
  window.location.href = "https://selifemorizo.com/";
});

ページのリロード

「location.reload() 」は現在表示中のページを再読み込み（リロード）することができます。

html

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

JavaScript

document.getElementById("reloadPage").addEventListener("click", () => {
  location.reload();
});

ページ移動

history.back() でブラウザの「戻る」操作、history.forward() で「進む」操作を実行することができます。

html

<button id="goBack">1つ前に戻る</button>
<button id="goForward">1つ進む</button>

JavaScript

戻る

document.getElementById("goBack").addEventListener("click", () => {
  history.back();
});

進む

document.getElementById("goForward").addEventListener("click", () => {
  history.forward();
});

最後に

JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript

以上、ログになります。
これからも継続していきましょう！！