皆さん、こんにちは！フロントエンド開発の世界へようこそ。今日は、Web開発でよく耳にする「URL」について、JavaScriptで扱う際の便利な機能、「`URL.prototype.port`」について、初心者の方にも分かりやすく解説していきます。

なぜURLのポート番号が重要なのか？

URLは、インターネット上のリソース（ウェブサイトのページや画像など）の場所を示す住所のようなものです。普段何気なく見ているURLですが、実は「プロトコル（httpやhttps）」、「ドメイン（example.com）」、「パス（/page/index.html）」、「クエリパラメータ（?id=123）」など、様々な情報を含んでいます。

そして、今回注目する「ポート番号」もURLを構成する重要な要素の一つです。ポート番号は、サーバーが特定のサービス（Webサーバー、メールサーバーなど）を提供するために使用する「窓口」のようなものです。通常、Webサーバーは80番ポート（httpの場合）や443番ポート（httpsの場合）を使用するため、URLに明示的に書かなくてもアクセスできます。

しかし、開発環境でローカルサーバーを立ち上げたり、複数のWebサーバーを同じIPアドレスで動かしたりする場合など、標準とは異なるポート番号を使用することがよくあります。そんな時に、JavaScriptを使ってURLからポート番号を取得したり、設定したりできると、開発がとてもスムーズになります。

基礎知識：URLとポート番号

URL (Uniform Resource Locator): インターネット上のリソースの場所を示す統一的な記述形式です。
ポート番号: サーバー上のサービスを識別するための番号です。0から65535までの範囲で指定され、特定のサービスに割り当てられています。
HTTP: 80番ポート (デフォルト)
HTTPS: 443番ポート (デフォルト)
開発環境でよく使われるポート: 3000, 8000, 8080 など

URL.prototype.port でポート番号を取得・設定する

JavaScriptには、URLを簡単に操作できる `URL` オブジェクトという便利なものがあります。この `URL` オブジェクトのプロパティの一つに「`port`」があります。

ポート番号の取得

`URL.prototype.port` を使うと、URLオブジェクトからポート番号を文字列として取得できます。もしURLにポート番号が指定されていない場合は、空文字列 (`””`) が返されます。

// 例1: ポート番号が指定されているURL
const urlWithPort = new URL(‘http://example.com:8080/path/to/page’);
console.log(urlWithPort.port); // 出力: “8080”

// 例2: ポート番号が指定されていないURL (httpの場合、デフォルトの80番ポートが使われるが、取得できるのは空文字列)
const urlWithoutPortHttp = new URL(‘http://example.com/path/to/page’);
console.log(urlWithoutPortHttp.port); // 出力: “”

// 例3: ポート番号が指定されていないURL (httpsの場合、デフォルトの443番ポートが使われるが、取得できるのは空文字列)
const urlWithoutPortHttps = new URL(‘https://example.com/path/to/page’);
console.log(urlWithoutPortHttps.port); // 出力: “”

ポート番号の設定

`URL.prototype.port` に値を代入することで、URLオブジェクトのポート番号を設定できます。ポート番号は文字列で指定します。

const url = new URL(‘http://example.com/path/to/page’);

// ポート番号を設定する
url.port = ‘3000’;
console.log(url.toString()); // 出力: “http://example.com:3000/path/to/page”

// ポート番号を削除したい場合 (空文字列を設定する)
url.port = ”;
console.log(url.toString()); // 出力: “http://example.com/path/to/page” (ポート番号が削除される)

サンプルプログラム：現在のページのURLからポート番号を取得する

このサンプルでは、現在表示しているページのURLからポート番号を取得し、コンソールに表示します。

URLポート番号取得サンプル

URLのポート番号を確認しよう！

コンソールを開いて、ポート番号を確認してください。

このHTMLファイルをブラウザで開き、開発者ツールのコンソールを見ると、現在のページのURLとそのポート番号（もしあれば）が表示されます。

応用・注意点

デフォルトポート: `http` のデフォルトポートは 80、`https` のデフォルトポートは 443 です。これらのポート番号はURLに明示的に書かれないことがほとんどですが、`url.port` で取得しようとしても空文字列が返されます。ポート番号が指定されていないことを意味します。
数値ではなく文字列: `url.port` で取得できる値は常に文字列です。ポート番号として数値として扱いたい場合は、`parseInt()` などで数値に変換する必要があります。
不正なポート番号: `url.port` に不正な値（例えば “abc” や 70000 など）を設定しようとすると、`TypeError` が発生します。
環境による違い: 開発環境で `localhost:3000` のようにポート番号を指定してアクセスすることが多いですが、本番環境では通常、デフォルトポート（80や443）が使われるため、`url.port` は空文字列になることが多いです。この違いを理解しておくと、デバッグや条件分岐で役立ちます。

`URL.prototype.port` は、URLのポート番号をプログラムで操作するための非常にシンプルで強力なプロパティです。ぜひ、皆さんの開発でも活用してみてください！