1. 導入：なぜURL.prototype.originが重要なのか
Web開発をしていると、「現在のページのドメインだけを取得したい」「APIのベースURLを抽出したい」という場面によく遭遇します。文字列操作（splitやindexOf）で無理やりURLを切り出そうとすると、ポート番号が含まれていたり、パスが複雑だったりする場合にバグが生まれやすくなります。
URL.prototype.origin を使えば、ブラウザが標準で提供する機能を利用して、安全かつ確実にURLから「スキーム（http/https）＋ドメイン＋ポート番号」の部分だけを抽出できます。
2. 基礎知識：URLインターフェースとは
JavaScriptには、URLを解析・操作するためのURLオブジェクトが用意されています。これを使うと、URL文字列をバラバラのパーツ（プロトコル、ホスト名、パス、クエリなど）に分解して扱うことができます。
その中でも「origin（オリジン）」とは、URLの起点となる部分を指します。例えば「https://example.com:8080/path/to/page」というURLであれば、そのオリジンは「https://example.com:8080」となります。
3. 実装・解決策
使い方は非常にシンプルです。解析したいURL文字列を new URL() の引数に渡してインスタンスを作成し、その中の .origin プロパティを参照するだけです。正規表現を使って自力で文字列を加工する必要はもうありません。
4. サンプルプログラム
以下のコードをブラウザのコンソール（F12キー）に貼り付けて実行してみてください。
// 解析対象のURL文字列
const urlString = "https://developer.mozilla.org:443/ja/docs/Web/API/URL";
// 1. URLオブジェクトを生成
const urlObject = new URL(urlString);
// 2. originプロパティからドメイン部分だけを抽出
const origin = urlObject.origin;
// 結果を出力して確認
console.log("元のURL: " + urlString);
console.log("抽出されたOrigin: " + origin);
// 出力: https://developer.mozilla.org
// 応用：現在のページURLのオリジンを取得する場合
console.log("現在のページのオリジン: " + window.location.origin);
5. 応用・注意点
現場で活用する際のポイントが2つあります。
注意点1：相対パスには使えない
new URL() には、完全なURL（httpから始まるもの）を渡す必要があります。「/about」のような相対パスをそのまま渡すとエラーになります。相対パスを扱う場合は、基準となるベースURLを第2引数に渡す必要があります。
注意点2：古いブラウザへの対応
主要なモダンブラウザはすべて対応していますが、Internet Explorerなど極めて古い環境では動作しません。もしIE対応が必須のプロジェクトであれば、ポリフィル（機能補完ライブラリ）を導入するか、環境要件を確認してください。
URL操作はバグの温床になりやすい部分です。手動での文字列操作を避け、標準のAPIを積極的に活用することで、より堅牢で読みやすいコードを目指しましょう。