導入：なぜURL.prototype.usernameが必要なのか
Web開発において、APIリクエストの構築やURLの解析を行う際、URL文字列から「ユーザー名」や「パスワード」を抽出したり、逆にそれらを安全に埋め込んだりしたい場面があります。従来は正規表現を使って文字列を操作するのが一般的でしたが、不正確な解析やバグの温床になりがちでした。
ブラウザ標準のURL APIを活用すれば、URL文字列の構造をオブジェクトとして安全に操作できます。特にURL.prototype.usernameプロパティを使えば、複雑な文字列操作を一切することなく、堅牢な実装が可能になります。
基礎知識：URL APIとは
URL APIとは、URL文字列を解析・操作するための標準化されたインターフェースです。例えば、URLの各パーツ（ホスト名、パス、クエリパラメータなど）を個別のプロパティとして取得・編集できます。
今回焦点を当てるusernameプロパティは、URLの「認証部分（user:password@host）」におけるユーザー名に該当します。このAPIを使う最大のメリットは、特殊文字（エスケープが必要な文字）が含まれていても、ブラウザが自動的に適切に処理してくれる点にあります。
実装：プロパティの取得と書き換え
URLオブジェクトを生成し、そのインスタンスに対してusernameプロパティを代入するだけで、URL全体が自動的に再構築されます。文字列連結でURLを作成するような「誤字やエスケープ漏れ」のリスクを回避できるのが大きな強みです。
サンプルプログラム：URLの認証情報を安全に操作する
以下のコードは、URLからユーザー名を抽出し、新しいユーザー名に書き換える実用例です。
// 対象となるURL（認証情報を含む）
const urlString = "https://user123:password456@api.example.com/v1/data";
// 1. URLオブジェクトを生成
const url = new URL(urlString);
// 2. ユーザー名の取得
console.log("現在のユーザー名:", url.username); // 出力: user123
// 3. ユーザー名の書き換え
// ブラウザが自動的にURL文字列を再構築します
url.username = "admin_user";
// 4. 結果の確認
console.log("新しいURL:", url.toString());
// 出力: https://admin_user:password456@api.example.com/v1/data
// 5. 特殊文字が含まれる場合の安全な処理
url.username = "user name with space";
console.log("エスケープ後のURL:", url.toString());
// 出力: https://user%20name%20with%20space:password456@api.example.com/v1/data
応用・注意点：現場で役立つポイント
1. パスワードの隠蔽:
ブラウザのコンソールでURLオブジェクトをそのまま表示すると、passwordも丸見えになってしまいます。デバッグ時には注意が必要です。
2. セキュリティの意識:
URL内にパスワードを直接含める「Basic認証のURL埋め込み」は、現在では推奨されていないケースがほとんどです。URL.prototype.usernameは便利ですが、可能な限りAuthorizationヘッダーを使用する設計を検討してください。
3. 対応ブラウザ:
主要なモダンブラウザすべてでサポートされています。IE11など古いブラウザをサポートする必要がある場合は、ポリフィル（core-jsなど）の導入を検討しましょう。
URL APIを使いこなすと、コードが読みやすくなるだけでなく、エスケープ関連のバグを未然に防ぐことができます。ぜひ次のプロジェクトで試してみてください。