【JavaScript】現在の URL を取得する方法｜location・URL オブジェクト・URLSearchParams・各プロパティの違いまで解説

// URL 全体
console.log(window.location.href);
// "https://example.com:8080/blog/post?id=42&lang=ja#section2"

// 各パーツ
console.log(location.protocol);  // "https:"
console.log(location.hostname);  // "example.com"
console.log(location.pathname);  // "/blog/post"
console.log(location.search);    // "?id=42&lang=ja"
console.log(location.hash);      // "#section2"
console.log(location.origin);    // "https://example.com:8080"

// 任意の URL をパース
const url = new URL("https://example.com/blog?id=42&lang=ja#sec2");

console.log(url.hostname);    // "example.com"
console.log(url.pathname);    // "/blog"
console.log(url.searchParams.get("id"));   // "42"
console.log(url.searchParams.get("lang")); // "ja"
console.log(url.hash);        // "#sec2"

// 相対 URL のパース（第 2 引数にベース URL）
const rel = new URL("/about", "https://example.com");
console.log(rel.href); // "https://example.com/about"

// 現在のページの URL をパース
const current = new URL(window.location.href);

// 現在の URL のクエリパラメータを取得
const params = new URLSearchParams(window.location.search);

// 特定のパラメータを取得
const id = params.get("id");       // "42"（文字列）
const lang = params.get("lang");   // "ja"
const missing = params.get("foo"); // null（存在しない場合）

// パラメータの存在チェック
if (params.has("id")) {
  console.log("id パラメータが存在します");
}

// 全パラメータをループ
for (const [key, value] of params) {
  console.log(`${key} = ${value}`);
}

// 同名パラメータが複数ある場合（?tag=js&tag=css）
const tags = params.getAll("tag"); // ["js", "css"]

const params = new URLSearchParams(window.location.search);

// 追加
params.set("page", "2");

// 削除
params.delete("lang");

// 変更後の URL を組み立て
const newUrl = `${location.pathname}?${params.toString()}${location.hash}`;
console.log(newUrl); // "/blog/post?id=42&page=2#section2"

// ページ遷移なしで URL を更新（pushState）
history.pushState(null, "", newUrl);

// 遷移元の URL を取得
console.log(document.referrer);
// "https://google.com/search?q=javascript+url"

// 直接アクセスや noopener の場合は空文字
if (document.referrer === "") {
  console.log("直接アクセス（または referrer なし）");
}

// 別ページに遷移（履歴に残る）
window.location.href = "https://example.com/new-page";

// 別ページに遷移（location.assign: href 代入と同じ）
location.assign("https://example.com/new-page");

// 現在のページを置き換え（履歴に残らない = 戻るボタンで戻れない）
location.replace("https://example.com/new-page");

// 現在のページをリロード
location.reload();

// ページ遷移なしで URL を変更（SPA のルーティング）
history.pushState({ page: 2 }, "", "/blog?page=2");

// 履歴を置き換え（戻るボタンに影響しない）
history.replaceState(null, "", "/blog?page=2");

// popstate イベント: ブラウザの戻る/進むボタン検知
window.addEventListener("popstate", (event) => {
  console.log("URL changed:", location.href);
  console.log("State:", event.state);
});

// ?mode=preview のときだけプレビューモードにする
const params = new URLSearchParams(location.search);
if (params.get("mode") === "preview") {
  document.body.classList.add("preview-mode");
}

async function copyCurrentUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    alert("URL をコピーしました");
  } catch (err) {
    // フォールバック
    prompt("URL をコピーしてください:", location.href);
  }
}

// 本番環境かどうかを URL で判定
const isProduction = location.hostname === "example.com";
const isStaging = location.hostname === "staging.example.com";
const isLocal = location.hostname === "localhost";

if (isProduction) {
  // 本番のみ: アナリティクスを読み込む
  loadAnalytics();
}

// URL のハッシュ（#tab2）に応じてタブを表示
function showTabFromHash() {
  const hash = location.hash; // "#tab2"
  if (hash) {
    document.querySelectorAll(".tab-content").forEach(el => el.hidden = true);
    const target = document.querySelector(hash);
    if (target) target.hidden = false;
  }
}

// ページ読み込み時 + ハッシュ変更時
showTabFromHash();
window.addEventListener("hashchange", showTabFromHash);

// canonical URL を動的に設定（SPA 向け）
const canonical = document.querySelector('link[rel="canonical"]');
if (canonical) {
  canonical.href = location.origin + location.pathname;
}

// OGP の og:url を動的設定
const ogUrl = document.querySelector('meta[property="og:url"]');
if (ogUrl) {
  ogUrl.content = location.origin + location.pathname;
}