window.location / history

// 現在のURLを取得します。
var url = window.location.href;

// ページを移動します。
window.location.href = "移動先のURL";

// ページを再読み込みします。
window.location.reload();

// ブラウザの履歴を操作します。
window.history.back();
window.history.forward();
window.history.pushState(状態, タイトル, "URL");

sample_windowLocation.js

// パターン1: URL情報の取得
// URL: https://example.com/products/list.html?id=123#section1
console.log(location.href);     // 『https://example.com/products/list.html?id=123#section1』と出力されます。
console.log(location.hostname); // 『example.com』と出力されます。
console.log(location.pathname); // 『/products/list.html』と出力されます。
console.log(location.search);   // 『?id=123』と出力されます。
console.log(location.hash);     // 『#section1』と出力されます。

sample_windowLocation.js

// パターン2: クエリ文字列を解析して値を取り出す
// URL: https://example.com/items?category=book&page=3
var params = new URLSearchParams(location.search);
console.log(params.get("category")); // 『book』と出力されます。
console.log(params.get("page"));     // 『3』と出力されます。

// キーが存在しない場合はnullを返します。
console.log(params.get("sort")); // 『null』と出力されます。

sample_windowLocation.js

// パターン3: pushState()でURLを変更しつつページ内状態を更新する
// ページの再読み込みなしにURLが変わります。
function showPage(num) {
	history.pushState({ page: num }, "", "/items?page=" + num);
	document.getElementById("content").textContent = num + "ページ目を表示中";
}

showPage(2); // URLが /items?page=2 に変わります。
showPage(3); // URLが /items?page=3 に変わります。

// ブラウザの「戻る」ボタンが押された時の処理
window.addEventListener("popstate", function(e) {
	if (e.state) {
		document.getElementById("content").textContent = e.state.page + "ページ目を表示中";
	}
});

sample_windowLocation.js

// パターン4: ページ遷移と再読み込み
location.href = "https://example.com/new-page"; // 新しいページに移動します。
location.replace("https://example.com/login"); // 履歴に残さずに移動します。
location.reload(); // ページを再読み込みします。

// 履歴操作
history.back(); // 1つ前のページに戻ります。
history.go(-2); // 2つ前のページに戻ります。

サンプルページはこちら

『window.location』は現在のページのURL情報を管理するオブジェクトです。URLの各部分を個別に取得できるため、ページのパスやクエリ文字列に応じた処理を行う際に活用します。

『window.history』はブラウザの閲覧履歴を操作するためのオブジェクトです。『history.pushState()』を使うとページを再読み込みせずにURLを変更でき、ReactやVue.jsなどのフレームワークで構築するシングルページアプリケーションのルーティングで欠かせない機能となっています。

『location.href』と『location.replace()』はどちらもページを移動しますが、『location.replace()』は履歴に残らないため、ブラウザの「戻る」ボタンで元のページに戻ることができません。ログイン後のリダイレクトなど、ユーザーに戻ってほしくないケースで使い分けてください。