JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。

URLオブジェクトの作成例

以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Url object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create and display a url object</h3>
<script>
    let resEle = document.querySelector(".result");
    let url = new URL("https://google.com/image=23&size=440px");
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML += "url protocol = " + url.protocol + "<br>";
        resEle.innerHTML += "url host = " + url.host + "<br>";
        resEle.innerHTML += "url.pathname = " + url.pathname + "<br>";
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のような画面が表示されます。

JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、URLオブジェクトから取得した各プロパティの値が表示されます。

JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

コードのポイント

  • new URL(文字列)：URL文字列を渡すことで、URLオブジェクトを生成できます。不正なURLを渡した場合はエラー（TypeError）が発生します。
  • url.protocol：「https:」など、使用されているプロトコルを返します。
  • url.host：「google.com」など、ホスト名（ポート番号があればそれも含む）を返します。
  • url.pathname：ドメイン以降のパス部分（この例では「/image=23&size=440px」）を返します。

このように、URLオブジェクトを利用すれば、複雑な文字列操作を行わなくても、URLの各構成要素を簡単に取得・加工することができます。クエリパラメータの追加や変更に使えるsearchParamsプロパティなど、他にも便利な機能が多数用意されていますので、ぜひ活用してみてください。

  1. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /

  2. 【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

    はじめにJavaScriptでオブジェクトごとに一意のIDを作成したい場合、Symbol()を使うのが最も簡単かつ確実な方法です。Symbolは呼び出されるたびに必ず新しい一意の値を生成するため、たとえ同じ説明文字列を渡しても、二度と同じ値にはなりません。以下は、各オブジェクトに対して一意のIDを作成するサンプルコードです。実装例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp