概要

JavaScript の URL オブジェクトは、URL を簡単に操作および操作する方法を提供します。これは、コード内で URL を構築、解析、または変更する必要がある場合に特に便利です。

JavaScript で URL を作成するためにテンプレート文字列が使用されることがよくあります。多くの場合、これは簡単で明確ですが、URL オブジェクトは URL を処理するためのより堅牢な OOP メソッドです。

OpenWeatherMap.org でもドキュメントでテンプレート文字列を使用しています: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API キー}

かなり静的な URL の場合はこれで問題ありませんが、この URL に変更を加えたい場合は、URL オブジェクトの使用を検討してください。

// Using template strings
const lat = 32.087;
const lon = 34.801;
const apiKey = 'your_api_key';
const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&appid=${apiKey}`;

// Using the URL object
const openWeatherUrl = new URL('https://api.openweathermap.org/data/3.0/onecall');
openWeatherUrl.searchParams.set('lat', lat);
openWeatherUrl.searchParams.set('lon', lon);
openWeatherUrl.searchParams.set('appid', apiKey);

基本的な使い方

URL 文字列をコンストラクターに渡すことで、新しい URL オブジェクトを作成できます。

この場合は (上記とは対照的に) URL 全体がさまざまな部分とともに渡されます:

const url = new URL('https://example.com:8080/path?query=123#section');

プロパティ

URL オブジェクトには、URL の一部にアクセスするために使用できるいくつかのプロパティがあります:

• href: 文字列としての完全な URL。
• プロトコル: プロトコル (例: https:).
• ホスト名: ドメイン名 (例: example.com)。
• port: ポート番号 (例: 8080)。
• pathname: ドメインに続くパス (例: /path).
• search: ? を含むクエリ文字列。 (例: ?query=123).
• ハッシュ: # を含むフラグメント識別子 (#section など)。
• host: ホスト名とポートの組み合わせ (例: example.com:8080)。
• オリジン: URL のオリジン (プロトコル、ホスト名、ポート)。

> const url = new URL('https://example.com:8080/path?query=123#section');
> url.port
'8080'
> url.protocol
'https:'
> url.hostname
'example.com'
> url.pathname
'/path'
> url.search
'?query=123'
> url.hash
'#section'
> url.host
'example.com:8080'

これらは、URL のさまざまな部分を変更するためにも使用できます?:

> url.port = 1234
1234
> url.pathname = "differentpath"
'differentpath'
> url.hostname = "example.org"
'example.org'
> url
URL {
  href: 'https://example.org:1234/differentpath?query=123#section',
  origin: 'https://example.org:1234',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'example.org:1234',
  hostname: 'example.org',
  port: '1234',
  pathname: '/differentpath',
  search: '?query=123',
  searchParams: URLSearchParams { 'query' => '123' },
  hash: '#section'
}

メソッド

URL オブジェクトには、URL の変更や操作に役立つメソッドもいくつかあります。

たとえば、URL 検索パラメータ は、ユーザーにサービスを提供するために API サーバーの詳細を通知するキーと値のペアです。

url.searchParams: URLSearchParams オブジェクトを返します。このオブジェクトは、クエリ文字列パラメータを操作するメソッドを提供します。あなたはできる：

クエリパラメータを取得します: url.searchParams.get('query')
クエリパラメータを設定します: url.searchParams.set('query', '456')
クエリパラメータを削除します: url.searchParams.delete('query')

クエリパラメータを反復処理します:

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});

toString(): プロパティまたはクエリ パラメーターに加えられた変更を反映して、完全な URL を文字列として返します。

Open Weather Map API の例

OpenWeatherMap のドキュメントは次のとおりです: https://openweathermap.org/api/one-call-3

これは、URL オブジェクトを作成してその部分を操作する方法を示す簡単な例です:

// get values to interpolate to URL
const apiKey = process.env.openWeatherApiKey || 0
const [lat, lon] = [32.08721095615897, 34.801588162316506]

const openWeatherUrl = new URL("https://api.openweathermap.org")

openWeatherUrl.pathname = "data/3.0/onecall"
openWeatherUrl.searchParams.set('lat',lat)
openWeatherUrl.searchParams.set('lon',lon)

// from the docs
openWeatherUrl.searchParams.set('exclude', 'hourly')

openWeatherUrl.searchParams.set('appid', apiKey)

console.log(openWeatherUrl)

出力：

URL {
  href: 'https://api.openweathermap.org/data/3.0/onecall?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  origin: 'https://api.openweathermap.org',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'api.openweathermap.org',
  hostname: 'api.openweathermap.org',
  port: '',
  pathname: '/data/3.0/onecall',
  search: '?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  searchParams: URLSearchParams {
    'lat' => '32.08721095615897',
    'lon' => '34.801588162316506',
    'exclude' => 'hourly',
    'appid' => '0' },
  hash: ''
}

まとめ

JavaScript の URL オブジェクトは、URL を操作するための構造化された方法を提供し、複雑な URL の簡単な操作と構築を可能にします。テンプレート文字列は静的 URL にはシンプルで効果的ですが、URL オブジェクトは URL が動的である場合や頻繁に変更が必要な場合に最適です。

Unsplash の Anne Nygård による写真