JavaScriptのlocation.pathnameを使ったURL取得方法9選

JavaScriptのlocation.pathnameプロパティを使ってURLを取得する方法JS
この記事は約15分で読めます。

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●location.pathnameとは？

JavaScriptでURLを動的に操作したい、そんな想いを抱えている学生の皆さん、こんにちは。

プログラミング初心者にありがちな悩みですよね。でも安心してください。

今回は、JavaScriptのlocation.pathnameプロパティを使って、URLを自在に操作する方法をお伝えします。

皆さんは、Webサイトを作る際に、URLを意識したことがありますか？

URLは、Webページの住所のようなものです。

そして、そのURLを構成する重要な要素の1つが、パス(path)です。

例えば、”https://example.com/products/item1″というURLがあったとします。

ここで、”/products/item1″の部分がパスです。

つまり、Webサイトのルートディレクトリ以下の階層構造を表しているのです。

○location.pathnameの基本的な使い方

JavaScriptでは、location.pathnameプロパティを使うことで、現在のページのパスを簡単に取得できます。

試しに、コンソールで次のコードを実行してみましょう。

console.log(location.pathname);

すると、現在のページのパスが出力されるはずです。

もしあなたが”https://example.com/products/item1″というURLのページにいるなら、コンソールには”/products/item1″と表示されるでしょう。

○サンプルコード1：現在のURLパスを取得する

実際のWebサイトでは、URLのパスを使って様々な処理を行うことがあります。

例えば、特定のパスでのみ実行したい処理があるとします。

そんな時は、location.pathnameを使ってURLのパスを取得し、条件分岐を行います。

const currentPath = location.pathname;

if (currentPath === "/products") {
  console.log("製品一覧ページです");
} else if (currentPath === "/about") {
  console.log("会社概要ページです");
} else {
  console.log("その他のページです");
}

このコードでは、現在のパスを取得し、”/products”であれば製品一覧ページ、”/about”であれば会社概要ページ、それ以外はその他のページ、といった具合に条件分岐を行っています。

実行結果

// 現在のパスが"/products"の場合
製品一覧ページです

// 現在のパスが"/about"の場合
会社概要ページです

// 現在のパスが上記以外の場合
その他のページです

○location.pathnameとlocation.hrefの違い

ここで、location.pathnameと似たようなプロパティとして、location.hrefを思い出した方もいるかもしれません。

実は、この2つには大きな違いがあります。

location.hrefは、URLの全体を表します。

つまり、プロトコル(https://)やドメイン(example.com)なども含まれているのです。

一方、location.pathnameは、URLのパスの部分だけを表します。

例えば、”https://example.com/products/item1″というURLの場合、location.hrefは”https://example.com/products/item1″を返しますが、location.pathnameは”/products/item1″を返します。

状況に応じて、適切なプロパティを使い分けることが大切です。

●URLパスの条件分岐

さて、今度はURLのパスを使った条件分岐の方法について、もう少し深堀りしていきたいと思います。

先ほど紹介したif文を使った条件分岐は、シンプルなWebサイトであれば十分に機能します。

しかし、より複雑で柔軟なURLマッチングが必要な場合もあるでしょう。

URLのパスに応じて処理を分岐させる方法は、Webサイトの構築において非常に重要なテクニックです。

特に、モダンなJavaScriptフレームワークを使ったシングルページアプリケーション（SPA）では、URLのパスを使ってページの切り替えを行うことが一般的です。

○サンプルコード2：特定のパスでの処理を実行

まずは、特定のパスにぴったりマッチする場合の処理の実行方法を見てみましょう。

例えば、”/about”というパスにアクセスされた時だけ、特別な処理を行いたいとします。

const path = location.pathname;

if (path === "/about") {
  console.log("About ページです");
  // "/about"の時だけ実行したい処理をここに書く
}

このコードでは、location.pathnameで現在のパスを取得し、それが”/about”と厳密に一致する場合のみ、if文の中の処理が実行されます。

実行結果

// パスが"/about"の場合
About ページです

○サンプルコード3：複数のパスに対応した条件分岐

次に、複数のパスに対応した条件分岐の方法を見てみましょう。

例えば、”/products”というパスではプロダクトの一覧を表示し、”/products/デザイン”というパスではデザインカテゴリのプロダクトを表示したいとします。

const path = location.pathname;

if (path === "/products") {
  console.log("プロダクト一覧ページです");
  // プロダクト一覧を表示する処理をここに書く
} else if (path.startsWith("/products/")) {
  const category = path.split("/")[2];
  console.log(`${category}カテゴリのプロダクトページです`);
  // カテゴリ別のプロダクトを表示する処理をここに書く
}

ここでは、まず”/products”というパスにぴったりマッチする場合の処理を書いています。

次に、”/products/”で始まるパスの場合の処理を書いています。

この部分では、startsWith()メソッドを使ってパスのマッチングを行っています。

さらに、”/products/デザイン”のような形式のパスから、”デザイン”というカテゴリ名を取り出すために、split()メソッドを使ってパスを分割しています。

実行結果

// パスが"/products"の場合
プロダクト一覧ページです

// パスが"/products/デザイン"の場合
デザインカテゴリのプロダクトページです

このように、if文とstartsWith()、split()を組み合わせることで、より柔軟なURLマッチングが可能になります。

○サンプルコード4：正規表現を使ったパスのマッチング

正規表現は、文字列のパターンを表現するための特殊な記法です。JavaScriptでは、正規表現を//で囲んで表現します。

例えば、”/user/\d+”という正規表現は、”/user/”の後に1つ以上の数字が続くパスにマッチします。

const path = location.pathname;

if (path.match(/^\/user\/\d+$/)) {
  const userId = path.split("/")[2];
  console.log(`ユーザーID: ${userId}`);
  // ユーザーIDに基づく処理をここに書く
} else if (path.match(/^\/products\/[a-z]+$/)) {
  const category = path.split("/")[2];
  console.log(`カテゴリ: ${category}`);
  // カテゴリに基づく処理をここに書く
}

ここでは、match()メソッドを使って、パスが正規表現にマッチするかどうかを判定しています。

1つ目の正規表現”/^\/user\/\d+$/”は、”/user/”で始まり、その後に1つ以上の数字が続き、末尾で終わるパスにマッチします。

例えば、”/user/123″はマッチしますが、”/user/abc”はマッチしません。

2つ目の正規表現”/^\/products\/[a-z]+$/”は、”/products/”で始まり、その後に1つ以上の小文字のアルファベットが続き、末尾で終わるパスにマッチします。

例えば、”/products/foo”はマッチしますが、”/products/123″はマッチしません。

実行結果

// パスが"/user/123"の場合
ユーザーID: 123

// パスが"/products/foo"の場合
カテゴリ: foo

正規表現を使えば、数字やアルファベットなどのパターンを柔軟に表現できるため、より複雑なURLのマッチングが可能になります。

ただし、正規表現の記法は少し特殊で、慣れが必要です。

正規表現の詳細については、専門の書籍やWebサイトを参照していただくのが良いでしょう。

では、URLパスの操作と活用方法について、もう少し掘り下げて見ていきましょう。URLのパスは、単に情報を表示するだけでなく、様々な形で操作し、活用することができるんです。

●URLパスの操作と活用

URLのパスを操作することで、Webアプリケーションの動的な振る舞いを実現できます。

例えば、パスからデータを抽出して処理に使ったり、逆にデータからパスを生成したりすることで、URLとアプリケーションの状態を同期させることができるのです。

○サンプルコード5：パスの一部を抽出して使う

まずは、パスの一部を抽出して、アプリケーションの処理に使う方法を見てみましょう。

例えば、”/user/123″というパスがあった場合、”123″の部分がユーザーIDだと考えられます。

この場合、次のようなコードでユーザーIDを抽出できます。

const path = "/user/123";
const parts = path.split("/");
const userId = parts[2];
console.log(userId); // "123"

このコードでは、split()メソッドを使って、パスを”/”で分割しています。

分割された配列のparts[2]、つまり3番目の要素（0から数えて2番目）がユーザーIDになります。

実行結果

123

このようにして取得したユーザーIDを使って、ユーザー情報をデータベースから取得したり、表示を変更したりすることができます。

○サンプルコード6：パスを動的に生成する

次に、逆にデータからパスを動的に生成する方法を見てみましょう。

例えば、ユーザーIDが123の時に、そのユーザーの詳細ページのパスを生成したいとします。

const userId = 123;
const path = `/user/${userId}`;
console.log(path); // "/user/123"

ここでは、テンプレートリテラル（バッククォート`で囲んだ文字列）を使って、変数userIdを埋め込んでパスを生成しています。

実行結果

/user/123

こうして生成したパスを、例えばページ遷移のためのリンクに使ったり、Ajax通信のURLに使ったりすることができます。

これにより、アプリケーションの状態とURLを常に同期させることができるのです。

●よくあるエラーと対処法

これまでURLのパスを使った様々なテクニックを見てきましたが、実際にコードを書いていると、思わぬエラーに遭遇することがあります。

ここでは、パスを扱う際によくあるエラーとその対処法を見ていきましょう。

○パスの比較がうまくいかない場合

パスを比較する際に、思わぬ落とし穴があります。

例えば、次のようなコードを見てみましょう。

const path = "/user/";

if (path === "/user") {
  console.log("ユーザーページです");
} else {
  console.log("ユーザーページではありません");
}

このコードの意図は、パスが”/user”であればユーザーページだと判定することです。

しかし、実際には”/user/”と”/user”は異なる文字列なので、elseのブロックが実行されてしまいます。

実行結果

ユーザーページではありません

このようなミスを防ぐには、比較する前にパスの前後のスラッシュを取り除くのが良いでしょう。

次のように修正することができます。

const path = "/user/";
const normalizedPath = path.replace(/^\/|\/$/g, "");

if (normalizedPath === "user") {
  console.log("ユーザーページです");
} else {
  console.log("ユーザーページではありません");
}

ここでは、正規表現を使って、パスの前と後ろのスラッシュを取り除いています。

これで、”/user/”と”/user”は同じ文字列”user”に正規化されるので、正しく比較できます。

実行結果

ユーザーページです

○パスに余分なスラッシュがある場合

パスを扱っていると、時々余分なスラッシュが紛れ込むことがあります。

例えば、”/user//profile”のように、スラッシュが2つ連続している場合です。

このような場合、意図しない動作につながることがあります。

こういった問題を避けるには、パスを正規化するのが有効です。

具体的には、連続するスラッシュを1つのスラッシュに置き換えます。

次のようなコードで実現できます。

let path = "/user//profile";
path = path.replace(/\/+/g, "/");
console.log(path);  // "/user/profile"

ここでは、正規表現”/\/+/g”を使って、1つ以上のスラッシュにマッチさせ、それを1つのスラッシュに置き換えています。

実行結果

/user/profile

このように正規化することで、余分なスラッシュによる問題を防ぐことができます。

●location.pathnameの応用例

ここまで、location.pathnameの基本的な使い方から、条件分岐、操作方法、エラー対処まで幅広く学んできました。

これらの知識を活かせば、より実践的なWebサイトを作ることができるはずです。

そこで、最後にlocation.pathnameを使った具体的な応用例をいくつか見ていきましょう。

○サンプルコード8：パスに応じたメニューのアクティブ化

Webサイトのナビゲーションメニューで、現在のページに対応するメニュー項目をアクティブな状態で表示したい、そんなニーズはよくあります。

location.pathnameを使えば、これを簡単に実現できます。

const menuItems = document.querySelectorAll(".menu a");

menuItems.forEach(item => {
  if (item.pathname === location.pathname) {
    item.classList.add("active");
  }
});

このコードでは、まず”.menu a”というセレクターで、メニュー内の全てのリンク要素を取得しています。

そして、forEach()を使って各リンク要素をループ処理し、そのパス（item.pathname）が現在のパス（location.pathname）と一致するかどうかを判定しています。

一致する場合は、そのリンク要素に”active”というクラスを追加します。

あとは、CSSで.activeに対するスタイルを定義しておけば、アクティブなメニュー項目を視覚的に強調できます。

実行結果（HTMLの例）：

<nav class="menu">
  <a href="/" class="active">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

○サンプルコード9：パスをもとにしたページ内リンクのスムーズスクロール

ページ内リンクをクリックした時に、目的の位置までスムーズにスクロールさせたい場合があります。これも、location.pathnameを使って実現できます。

const links = document.querySelectorAll('a[href^="#"]');

links.forEach(link => {
  link.addEventListener("click", function(e) {
    e.preventDefault();

    const targetId = this.getAttribute("href");
    const targetElement = document.querySelector(targetId);

    if (targetElement) {
      window.scrollTo({
        top: targetElement.offsetTop,
        behavior: "smooth"
      });

      history.pushState(null, null, targetId);
    }
  });
});

このコードでは、’a[href^=”#”]’というセレクターで、href属性の値が”#”で始まるリンク要素（ページ内リンク）を全て取得しています。

そして、各リンクにクリックイベントリスナーを追加し、クリックされた時の処理を定義しています。

まず、e.preventDefault()でリンクのデフォルトの動作（ページ遷移）をキャンセルします。

まとめ

いかがでしたでしょうか。

今回は、JavaScriptのlocation.pathnameプロパティを使って、URLのパスを操作する様々な方法を解説しました。

URLのパスからデータを取得したり、逆にデータからパスを生成したりすることで、より動的でインタラクティブなWebサイトを作ることができるようになります。

また、パスに応じた条件分岐や、正規表現を使ったパスのマッチングなど、実践的なテクニックも身につけることができたのではないでしょうか。

さらに、よくあるエラーへの対処法や、実際のWebサイトでの応用例も見てきました。

これからは、皆さんが学んだことを活かして、オリジナルのWebサイトやアプリケーションを作ってみてください。

きっと、JavaScriptとlocation.pathnameの力で、これまでにない素晴らしいものが作れるはずです。