Base URLとは？意味や相対URLとの関係をわかりやすく解説！

WebサイトやWebアプリを開発していると、「Base URL（ベースURL）」という言葉を目にすることがあります。

例えば、APIへリクエストを送信するときに、次のようなURLを何度も記述することがあります。

https://api.example.com/users
https://api.example.com/products
https://api.example.com/orders

これらのURLでは、https://api.example.comの部分が共通しています。このような共通部分を基準となるURLとして扱うときに使われるのが「Base URL」です。

しかし、

Base URLとは何？
Base URLはどこまでを指すの？
絶対URLや相対URLとは何が違うの？
API通信ではBase URLをどのように使うの？

と疑問に思うこともあるでしょう。

この記事では、Base URLの基本的な意味から、絶対URL・相対URLとの関係、API通信での使い方まで、初心者向けにわかりやすく解説します。

Base URLとは？

Base URL（ベースURL）とは、相対URLなどを解決するときに基準となるURLです。

「Base」には「土台」「基準」といった意味があります。そのため、Base URLは簡単にいうと「URLを組み立てたり、相対URLの参照先を決めたりするときの基準となるURL」です。

例えば、次のBase URLがあるとします。

https://example.com/api/

このBase URLを基準として、usersという相対URLを指定した場合、次のURLとして解決できます。

Base URL
https://example.com/api/

相対URL
users

↓ 解決後

https://example.com/api/users

このように、Base URLを基準として相対URLを解決することで、最終的なURL（絶対URL）を求めることができます。JavaScriptのURL APIでも、相対URLとBase URLを指定して絶対URLへ解決できます。

Base URLはどこまでを指す？

Base URLが「ドメイン部分だけ」を指すとは限りません。

例えば、次のようなURLがあります。

https://api.example.com/v1/users

API通信では、次の部分をBase URLとして設定することがあります。

https://api.example.com/v1/

そして、各APIのパスを次のように指定します。

users
products
orders

それぞれをBase URLを基準にすると、次のようなURLになります。

Base URL	相対URL	解決後のURL
`https://api.example.com/v1/`	`users`	`https://api.example.com/v1/users`
`https://api.example.com/v1/`	`products`	`https://api.example.com/v1/products`
`https://api.example.com/v1/`	`orders`	`https://api.example.com/v1/orders`

つまり、Base URLは必ずhttps://api.example.comのようなドメインまでとは限らず、/v1/などのパスを含む場合もあります。

Base URLと絶対URL・相対URLの関係

Base URLを理解するうえで重要なのが、「絶対URL」と「相対URL」です。

絶対URLとは？

絶対URLとは、アクセス先を完全な形で指定したURLです。

例えば、次のURLは絶対URLです。

https://example.com/api/users

絶対URLには、https:などのスキームやホスト名などが含まれており、ほかのURLを基準にしなくてもアクセス先を指定できます。

そのため、このURLだけでアクセス先を特定できます。

合わせて読みたい

スキームやホスト名については、以下の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

: 【IT用語】スキームとは？「意味」や「役割」などをわかりやすく解説！
続きを見る

: ドメイン名とは？構造やホスト名・FQDNとの違いもわかりやすく解説！
続きを見る

相対URLとは？

相対URLとは、Base URLなどの基準となるURLをもとにアクセス先を決めるURLです。

例えば、Base URLが次のURLだったとします。

https://example.com/api/

ここで、次の相対URLを指定します。

users

この場合、最終的には次のURLに解決されます。

https://example.com/api/users

相対URLだけでは完全なアクセス先を表せないため、基準となるURLが必要になります。

Base URLと相対URLは単純に文字列を連結するわけではない

Base URLを理解するときに注意したいのが、Base URLと相対URLの解決は、単純な文字列の連結とは限らないという点です。

例えば、JavaScriptで次のコードを実行します。

const url = new URL("users", "https://example.com/api/");

console.log(url.href);

// 実行結果
// https://example.com/api/users

この例では直感的にhttps://example.com/api/とusersがつながっています。

しかし、Base URLの末尾に/がない場合は結果が変わります。

const url = new URL("users", "https://example.com/api");

console.log(url.href);

// 実行結果
// https://example.com/users

https://example.com/apiのapiはディレクトリではなく、現在のURLの最後のパス部分として扱われます。そのため、usersによってapiが置き換えられ、https://example.com/usersになります。

末尾の/の有無によって結果が変わることがあるため、Base URLを扱う場合は注意が必要です。

/から始まる相対URLの場合

相対URLが/から始まる場合にも注意が必要です。

例えば、次のコードを実行します。

const url = new URL("/users", "https://example.com/api/");

console.log(url.href);

// 実行結果
// https://example.com/users

/usersのように/から始まる参照は、Base URLのオリジンを基準として解決されます。そのため、Base URLのパス部分である/api/は引き継がれません。

つまり、

https://example.com/api/

を基準にしていても、/usersを指定すると、

https://example.com/users

になります。/から始まる相対参照は、Base URLのパスではなくサイトのルートを基準として解決されます。

JavaScriptでBase URLを指定する

JavaScriptでは、URLオブジェクトを使用してBase URLと相対URLから絶対URLを作成できます。

基本構文は次のとおりです。

new URL(url, base)

第1引数にURL、第2引数にBase URLを指定します。第1引数が相対URLの場合、第2引数のBase URLを基準として最終的なURLが決まります。

例えば、次のコードを実行します。

const baseUrl = "https://example.com/api/";
const url = new URL("users", baseUrl);

console.log(url.href);

// 実行結果
// https://example.com/api/users

usersは相対URLなので、https://example.com/api/を基準としてhttps://example.com/api/usersに解決されています。

API通信でBase URLを使用するメリット

Webアプリでは、同じAPIサーバーへ複数のリクエストを送信することがあります。

例えば、次のように毎回完全なURLを記述することもできます。

fetch("https://api.example.com/v1/users");
fetch("https://api.example.com/v1/products");
fetch("https://api.example.com/v1/orders");

しかし、https://api.example.com/v1/という共通部分を何度も記述しています。

そこで、Base URLとして共通部分を変数にまとめることができます。

const baseUrl = "https://api.example.com/v1/";

fetch(new URL("users", baseUrl));
fetch(new URL("products", baseUrl));
fetch(new URL("orders", baseUrl));

このようにBase URLをまとめておけば、APIサーバーのURLが変更された場合にも、Base URLを設定している箇所を変更することで対応しやすくなります。

開発環境と本番環境でBase URLを切り替える

Base URLは、開発環境と本番環境でAPIの接続先を切り替える場合にも利用できます。

例えば、開発環境では次のAPIを使用するとします。

http://localhost:3000/api/

本番環境では次のAPIを使用します。

https://api.example.com/

アプリケーション内のすべてのAPI URLを直接書き換えるのではなく、Base URLを環境ごとに設定しておけば、接続先を管理しやすくなります。

開発環境
Base URL → http://localhost:3000/api/

本番環境
Base URL → https://api.example.com/

実際のWebアプリでは、Base URLを環境変数や設定ファイルなどで管理する方法がよく使われます。

本記事のまとめ

この記事では『Base URL』について、以下の内容を説明しました。

Base URLには、ドメインだけでなく/api/などのパスを含むこともある
Base URLと相対URLは単純な文字列連結ではなく、URLのルールに従って解決される
/から始まる相対URLは、サイトのルートを基準として解決される
API通信ではBase URLをまとめて管理することで、接続先の変更に対応しやすくなる

お読みいただきありがとうございました。