はじめに (対象読者・この記事でわかること)

この記事は、Web開発初心者から中級者を対象にしています。JavaScriptを使ってWebページ上のリンクのアドレスを取得する方法について解説します。特に、DOM操作に慣れていない方でも理解できるように、基本的な概念から具体的な実装方法まで段階的に説明します。

この記事を読むことで、リンク要素からURLを取得する基本的な方法、現在のページのURLを取得する方法、URLの各部分（プロトコル、ホスト名、パスなど）を解析する方法などがわかるようになります。また、実装中によく遭遇するエラーとその解決策についても触れることで、実際の開発現場で即戦力となる知識を提供します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTMLの基本的な知識 - JavaScriptの基本的な文法 - DOM（Document Object Model）の基本的な概念

URL取得の概要・背景

Web開発において、リンクのアドレスを取得することは非常に一般的な要件です。例えば、ユーザーがクリックしたリンクのURLを記録したり、動的にリンクを生成したりする際に必要となります。JavaScriptでは、様々な方法でURLを取得・操作することができます。

URL（Uniform Resource Locator）は、インターネット上のリソースを特定するための文字列です。一般的には「プロトコル://ホスト名/パス?クエリパラメータ#フラグメント」のような構成になっています。JavaScriptでは、このURLの各部分を個別に取得したり、URL全体を操作したりすることができます。

特にシングルページアプリケーション（SPA）の開発では、URLの状態を管理することが重要になります。ReactやVue.jsなどのフレームワークでは、ルーティング機能を実装する際にURLの取得・操作が頻繁に行われます。この記事では、これらの技術に必要となるURL取得の基本的なテクニックを解説します。

リンクのアドレスを取得する具体的な実装方法

ステップ1：基本的なURL取得方法

JavaScriptでURLを取得する最も基本的な方法は、window.locationオブジェクトを使用することです。window.locationは、現在のページのURLに関する情報を含むオブジェクトです。

Javascript

// 現在のページのURL全体を取得
console.log(window.location.href);

// プロトコルを取得（例: "https:"）
console.log(window.location.protocol);

// ホスト名を取得（例: "example.com"）
console.log(window.location.hostname);

// ポート番号を取得（例: "8080"）
console.log(window.location.port);

// パスを取得（例: "/path/to/page"）
console.log(window.location.pathname);

// クエリパラメータを取得（例: "?key=value"）
console.log(window.location.search);

// フラグメント（ハッシュ）を取得（例: "#section1"）
console.log(window.location.hash);

また、URLインターフェースを使用すると、URL文字列をより簡単に解析できます。

Javascript

// URLオブジェクトを作成
const url = new URL('https://example.com/path/to/page?key=value#section1');

// URLの各部分にアクセス
console.log(url.href);     // "https://example.com/path/to/page?key=value#section1"
console.log(url.protocol); // "https:"
console.log(url.hostname); // "example.com"
console.log(url.pathname); // "/path/to/page"
console.log(url.search);   // "?key=value"
console.log(url.hash);     // "#section1"

ステップ2：リンク要素からURLを取得する方法

Webページ上のリンク（<a>要素）からURLを取得するには、DOM操作を使用します。

Javascript

// すべてのリンク要素を取得
const links = document.getElementsByTagName('a');

// 各リンクのURLをコンソールに出力
for (let i = 0; i < links.length; i++) {
  console.log(links[i].href);
}

// 特定のIDを持つリンクのURLを取得
const specificLink = document.getElementById('my-link');
if (specificLink) {
  console.log(specificLink.href);
}

// 特定のクラスを持つすべてのリンクのURLを取得
const linksWithClass = document.getElementsByClassName('external-link');
for (let i = 0; i < linksWithClass.length; i++) {
  console.log(linksWithClass[i].href);
}

// CSSセレクタを使用してリンクを取得
const linksBySelector = document.querySelectorAll('a[target="_blank"]');
linksBySelector.forEach(link => {
  console.log(link.href);
});

ステップ3：現在のページのURLを取得する方法

現在のページのURLを取得するには、window.locationオブジェクトを使用します。前述のステップ1で紹介した方法と同じですが、より実践的な例を以下に示します。

Javascript

// 現在のページのURLを取得
const currentUrl = window.location.href;
console.log('現在のURL:', currentUrl);

// 現在のページのパスを取得
const currentPath = window.location.pathname;
console.log('現在のパス:', currentPath);

// 現在のページのクエリパラメータを取得
const searchParams = new URLSearchParams(window.location.search);
console.log('クエリパラメータ:', searchParams.toString());

// 特定のクエリパラメータの値を取得
const paramValue = searchParams.get('key');
console.log('keyの値:', paramValue);

また、URLのクエリパラメータをオブジェクトに変換する便利な関数も紹介します。

Javascript

// クエリパラメータをオブジェクトに変換する関数
function getQueryParams() {
  const params = {};
  const searchParams = new URLSearchParams(window.location.search);

  for (const [key, value] of searchParams) {
    params[key] = value;
  }

  return params;
}

// クエリパラメータをオブジェクトとして取得
const queryParams = getQueryParams();
console.log('クエリパラメータオブジェクト:', queryParams);

ステップ4：ハッシュパラメータを含むURLを取得する方法

URLのハッシュ（#以降の部分）は、ページ内の特定のセクションに移動するために使用されます。ハッシュパラメータを取得する方法を以下に示します。

Javascript

// ハッシュを取得
const hash = window.location.hash;
console.log('ハッシュ:', hash);

// ハッシュからパラメータを取得（例: #section1?param=value）
if (hash) {
  // #を削除
  const hashWithoutSymbol = hash.substring(1);

  // ハッシュ内のクエリパラメータを解析
  const hashParams = new URLSearchParams(hashWithoutSymbol.split('?')[1]);

  // ハッシュのセクション名を取得
  const section = hashWithoutSymbol.split('?')[0];
  console.log('セクション:', section);

  // ハッシュ内のクエリパラメータを取得
  if (hashParams.toString()) {
    console.log('ハッシュ内のクエリパラメータ:', hashParams.toString());
  }
}

// ハッシュパラメータをオブジェクトに変換する関数
function getHashParams() {
  const hash = window.location.hash.substring(1); // #を削除
  const params = {};

  if (hash) {
    // セクション名とクエリパラメータを分割
    const [section, queryString] = hash.split('?');

    // セクション名を保存
    params.section = section;

    // クエリパラメータがある場合
    if (queryString) {
      const searchParams = new URLSearchParams(queryString);
      for (const [key, value] of searchParams) {
        params[key] = value;
      }
    }
  }

  return params;
}

// ハッシュパラメータをオブジェクトとして取得
const hashParams = getHashParams();
console.log('ハッシュパラメータオブジェクト:', hashParams);

ハマった点やエラー解決

URL取得の実装中によく遭遇する問題とその解決策を以下に示します。

問題1：クロスオリジン制約によるエラー

異なるオリジン（ドメイン、プロトコル、ポートが異なる）のURLにアクセスしようとすると、セキュリティ上の理由でエラーが発生します。

Javascript

// エラーの例
const externalLink = document.createElement('a');
externalLink.href = 'https://different-domain.com';
document.body.appendChild(externalLink);

// このコードはクロスオリジン制約によりエラーになる可能性がある
console.log(externalLink.href);

解決策：

Javascript

// 同じオリジン内のURLのみを処理する
function processLinks() {
  const links = document.getElementsByTagName('a');

  for (let i = 0; i < links.length; i++) {
    try {
      // URLを解析
      const url = new URL(links[i].href);

      // 同じオリジンの場合のみ処理
      if (url.hostname === window.location.hostname) {
        console.log('処理中のURL:', url.href);
        // ここにリンク処理のロジックを記述
      }
    } catch (e) {
      console.error('URLの解析に失敗:', e);
    }
  }
}

processLinks();

問題2：相対パスのURLの処理

HTMLで記述された相対パスのURL（例: /path/page や ../other/page）は、直接hrefプロパティにアクセスすると絶対パスに変換されますが、意図しない結果になることがあります。

Javascript

// 相対パスの例
const relativeLink = document.createElement('a');
relativeLink.href = '../page.html';
document.body.appendChild(relativeLink);

// hrefプロパティにアクセスすると絶対パスに変換される
console.log(relativeLink.href); // "https://current-domain.com/../page.html"

解決策：

Javascript

// 相対パスを正しく処理する関数
function resolveRelativeUrl(base, relative) {
  // 一時的なアンカー要素を作成
  const a = document.createElement('a');
  a.href = relative;

  // ベースURLのパスを取得
  const baseParts = base.split('/');
  baseParts.pop(); // ベースURLの最後のパートを削除

  // 相対パスを解決
  const resolvedPath = baseParts.join('/') + a.pathname;

  // 絶対URLを構築
  return new URL(resolvedPath, base).href;
}

// 使用例
const baseUrl = 'https://example.com/current/path/';
const relativeUrl = '../page.html';
const absoluteUrl = resolveRelativeUrl(baseUrl, relativeUrl);
console.log('解決されたURL:', absoluteUrl); // "https://example.com/page.html"

問題3：URLエンコード・デコードの問題

URLには特殊文字を含めることができず、エンコードが必要です。しかし、JavaScriptの組み込み関数は意図しない結果を返すことがあります。

Javascript

// 問題のある例
const specialChars = '特殊文字 & 予約文字 ?#[]@';
const encoded = encodeURI(specialChars);
console.log(encoded); // "特殊文字%20&%20予約文字%20%3F%23%5B%5D%40"

// decodeURIは一部の文字をデコードできない
const decoded = decodeURI(encoded);
console.log(decoded); // "特殊文字 & 予約文字 ?#[]@"

// クエリパラメータとしてエンコードする場合
const queryEncoded = encodeURIComponent(specialChars);
console.log(queryEncoded); // "%E7%89%B9%E6%AE%8A%E6%96%87%E5%AD%97%20%26%20%E4%BA%88%E7%B4%84%E6%96%87%E5%AD%97%20%3F%23%5B%5D%40"

解決策：

Javascript

// 適切なエンコード・デコード関数
function encodeUrlComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
}

function decodeUrlComponent(str) {
  return decodeURIComponent(str.replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode(parseInt(p1, 16))));
}

// 使用例
const specialChars = '特殊文字 & 予約文字 ?#[]@';
const properlyEncoded = encodeUrlComponent(specialChars);
console.log('適切にエンコード:', properlyEncoded);

const properlyDecoded = decodeUrlComponent(properlyEncoded);
console.log('適切にデコード:', properlyDecoded);

まとめ

本記事では、JavaScriptでリンクのアドレスを取得する様々な方法を解説しました。window.locationオブジェクトやURLインターフェースを使用した基本的な取得方法から、DOM操作を用いたリンク要素からの取得方法、クエリパラメータやハッシュの解析方法までを網羅しました。

特に、実際の開発現場でよく遭遇する問題（クロスオリジン制約、相対パスの処理、URLエンコード・デコード）とその解決策に重点を置いて解説しました。これらの知識を活用することで、より堅牢でユーザーフレンドリーなWebアプリケーションを開発できるようになるでしょう。

今後は、取得したURLを基にページ遷移を行う方法や、SPAにおけるルーティングの実装方法についても記事にする予定です。

参考資料