【JavaScript入門】アドレス情報の取得

　Web アプリが「今どの URL にいるのか」を知り、履歴を自在に操作できれば、ページ遷移や SPA（Single‑Page Application）の状態管理がぐっと楽になります。ブラウザは location オブジェクトでアドレス情報を、history オブジェクトで履歴スタックを公開しています。ここでは両者の代表的なプロパティ／メソッドを整理し、サンプルで URL を動的に書き換える仕組みを体験します。

１．`location` で現在 URL を読む・書く

プロパティ	戻り値	主な用途
`href`	URL 全体	読: 現在の完全 URL書: 代入するとその URL へ遷移
`protocol`	`https:` など	スキーム判定
`hostname`	`example.com`	ドメイン判定
`pathname`	`/path/file`	ルーティング
`search`	`?key=value`	クエリ解析
`hash`	`#section1`	アンカー制御

例 ― Google 検索 URL を分解

１．Chromeを起してURLに「https://www.google.com/search?q=a」を入力します。

２．「F12」キーを押して、DevToolsを起動します。

上の赤枠のところに以下のコードを入力します。

console.log(location.protocol); // https:
console.log(location.hostname); // www.google.com
console.log(location.pathname); // /search
console.log(location.search);   // ?q=a

するとConsoleに次のように表示されます。

Consoleの出力内容

https:
www.google.com
/search
?q=a

２．`location` の遷移メソッド

メソッド	説明
`assign(url)`	引数 URL へ遷移（履歴に残る）
`replace(url)`	引数 URL へ遷移（履歴を置換）
`reload(force)`	現在ページを再読込。`true` で強制リロード

location.href = 'https://example.com' と代入する方法も assign と同じ動きをします。

３．`history` で履歴スタックを操作

メソッド	説明
`back()` / `forward()`	1 ページ戻る / 進む
`go(n)`	相対 n ページ移動（`-1` は戻る、`1` は進む）
`pushState(state, title, url)`	履歴にエントリ追加し、見かけ上 URL 変更
`replaceState(state, title, url)`	現在エントリを置換
`state` (プロパティ)	現在エントリに保存したオブジェクトを取得

　pushState と replaceState はページ再読み込みなしで URL を変えられるため、SPA のルーティングに欠かせません。

４．実践サンプル ― SPA 風ルーティング体験

ファイル名： spa_router_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アドレス情報の取得デモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
#view{margin-top:1rem;padding:.8rem;border:1px solid #ccc}
button{margin-right:.5rem;padding:.3rem .8rem}
</style>
</head>
<body>
<h2>📍 SPA 風ルーター</h2>
<button data-page="home">Home</button>
<button data-page="about">About</button>
<button data-page="contact">Contact</button>
<div id="view">Home ページです</div>

<script>
(() => {
  const view = document.getElementById('view');

  // ページ名→表示文の簡易マップ
  const pages = {
    home:    'Home ページです',
    about:   'About ページです',
    contact: 'Contact ページです'
  };

  // 画面描画 + 履歴追加
  function navigate(page, replace = false) {
    const url = `?page=${page}`;
    const state = {page};
    replace
      ? history.replaceState(state, '', url)
      : history.pushState(state, '', url);
    render(page);
  }

  // 表示だけを更新
  function render(page) {
    view.textContent = pages[page] ?? '存在しないページ';
  }

  // 初期表示（URL 直打ち対策）
  const initPage = new URLSearchParams(location.search).get('page') || 'home';
  navigate(initPage, true); // replaceState で履歴置換

  // ボタンクリックでページ切替
  document.body.addEventListener('click', e => {
    if (e.target.dataset.page) navigate(e.target.dataset.page);
  });

  // 戻る/進む操作
  window.addEventListener('popstate', e => {
    const page = e.state?.page || 'home';
    render(page);
  });
})();
</script>
</body>
</html>

使い方

いずれかのボタンを押すと pushState で URL が ?page=about などに変わり、表示も更新。
ブラウザの戻るボタンで popstate が発火し、以前のページ表示に復元。

プログラム解説

処理	説明
`history.pushState({page}, '', '?page=xxx')`	ページ切替を履歴に追加
`history.replaceState`	初期化時に履歴を汚さない
`popstate` イベント	戻る/進む時に state からページ名を取得し再描画
`location.search`	直接 URL を入力しても正しいページを表示

まとめ

現在 URL の分解・書き換え → location
履歴スタックの制御 → history
pushState / replaceState を使うと、ページ再読み込みなしで URL だけを変えられ、SPA ルーティングが実現できる。

サンプルを動かし、ブラウザの戻る・進むで表示が切り替わる様子を確認してみてください。

【JavaScript入門】アドレス情報の取得