相対参照の URL への解決

URL() コンストラクター、または URL.parse() 静的メソッド (URL API) を使用すると、相対参照とベース URL を絶対 URL に解決することができます。

どちらのメソッドも、最大 2 つの文字列引数を取り、絶対 URL を表す URL() オブジェクトを返します。最初の引数は絶対 URL または URL への相対参照を表し、2 番目の引数は、最初の引数に相対参照が指定されている場合にその相対参照を解決するために使用されるベース URL です。これらのメソッドは、無効な URL が渡されると URL() コンストラクターがエラーを発生させるのに対し、parse() は null を返すという点を除いて、同じ方法で相対参照を解決します。

下記コードは、同じ url および base URL 値を使用してメソッドがどのように使用されるかを示しています。

const url = "articles";
const base = "https://developer.mozilla.org/some/path";
const constructorResult = new URL(url, base);
// => https://developer.mozilla.org/some/articles
const parseResult = URL.parse(url, base);
// => https://developer.mozilla.org/some/articles

例えば、指定されたベース URL と相対参照から URL を解決することは、単純に指定された引数を結合するだけではないことが分かります。

この場合、カレントディレクトリーに相対するパス (articles) が渡されます。ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列です。この例では、https://developer.mozilla.org/some/path の末尾にスラッシュが指定されていないため、カレントディレクトリーは https://developer.mozilla.org/some/ となり、最終的な URL は https://developer.mozilla.org/some/articles となります。

相対参照は、カレントディレクトリー (./)、カレントディレクトリーの親ディレクトリー (../)、またはサイトルート (/) に対する相対パス参照を使用して、ベース URL に対して解決されます。以下の章では、相対パスの各タイプについて、解決の作業方法を表示させます。

カレンとディレクトリーからの相対

./ で始まる相対参照、または接頭辞のない参照、例えば ./article、article、./article/ は、base 引数で表される URL のカレントディレクトリーに対する相対参照です。

<pre id="log"></pre>

#log {
  height: 90px;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列であり、下記コードブロックのベース文字列どちらも https://test.example.org/api/ です。カレントディレクトリーから相対参照する article がこれに追加され、https://test.example.org/api/article に解決されます。

log(new URL("./article", "https://test.example.org/api/").href);
// => https://test.example.org/api/article
log(new URL("article", "https://test.example.org/api/v1").href);
// => https://test.example.org/api/article

同様に、下記どちらのベース URL 文字列も、カレンとディレクトリーは https://test.example.org/api/v2/ です。最終的な URL を解決するために、これらに story/ と story を追加します。

log(new URL("./story/", "https://test.example.org/api/v2/").href);
// => https://test.example.org/api/v2/story/
log(new URL("./story", "https://test.example.org/api/v2/v3").href);
// => https://test.example.org/api/v2/story

親ディレクトリーからの相対

../ という接頭辞が付いた相対参照、例えば ../path は、base 引数で表される URL の現在のディレクトリーの親ディレクトリーに対する相対参照です。 ../ の各インスタンスは現在のディレクトリーからフォルダー内を削除し、../ 以降のテキストは残りのベースパスに追加されます。 ../ を複数回指定することで親ディレクトリーに移動できますが、サイトルートのレベルまでです。

例えば、ベース URL https://test.example.com/test/api/v1/ とその親の相対 URL ../some/path が指定された場合、カレントディレクトリーは https://test.example.com/test/api/v1/、親ディレクトリーは https://test.example.com/test/api/、解決された絶対 URL は https://test.example.com/test/api/some/path となります。

<pre id="log"></pre>

#log {
  height: 80px;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

次の例では、この点をより詳しく説明します。すべてのケースにおいて、カレントディレクトリーは https://test.example.org/api/v1/v2/ です（2 つ目のケースでは、v3 が最後のスラッシュの後に続きます）。相対参照はそれぞれ異なる親ディレクトリを指します。

log(new URL("../path", "https://test.example.org/api/v1/v2/").href);
// => https://test.example.org/api/v1/path
log(new URL("../../path", "https://test.example.org/api/v1/v2/v3").href);
// => https://test.example.org/api/path
log(new URL("../../../../path", "https://test.example.org/api/v1/v2/").href);
// => https://test.example.org/path

ルートからの相対

/ 接頭辞付きの相対参照、たとえば /path は、base 引数で指定された URL のサイトルートに対する相対パスとなります。例えば、ベース URL が https://test.example.com/api/v1 の場合、ルート相対 URL /some/path の解決後の URL は https://test.example.com/some/path となります。

メモ: ルート相対 URL を解決すると、base URL のパス部分は関係なくなります。

<pre id="log"></pre>

#log {
  height: 80px;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

以下に、いくつか例を挙げます。

log(new URL("/some/path", "https://test.example.org/api/").href);
// => https://test.example.org/some/path
log(new URL("/", "https://test.example.org/api/v1/").href);
// => https://test.example.org/
log(new URL("/article", "https://example.com/api/v1/").href);
// => https://example.com/article

カレンとディレクトリーからの相対

親ディレクトリーからの相対

ルートからの相対

関連情報