アットマーク (@) のURLエンコード

アットマーク（@）はURLにおいて特別な意味を持ちます。userinfo コンポーネント（ユーザー名とオプションのパスワード）をホストから分離する役割があります。例えば、ftp://user:pass@host.comでは、@が認証情報の終わりとホスト名の始まりをパーサーに示します。@がURLの他の部分でデータとして現れる場合は、%40にエンコードする必要があります。

percent-encoding形式: %40はアットマークを表します（ASCIIコード64、16進数で0x40）。

@が特別な意味を持つ場所: RFC 3986によると、@記号はURLのauthorityコンポーネントのために予約されています：scheme://userinfo@host:port/path。この特定の位置以外では、URL内のエンコードされていない@がホスト部分の始まりについてパーサーを混乱させる可能性があります。

JavaScriptでの動作:

encodeURIComponent("user@example.com") // "user%40example.com"
encodeURI("user@example.com")          // "user@example.com" (@ を保持)

// メールアドレスをクエリパラメータとして渡す
const email = "user@example.com";
const url = `/api/invite?email=${encodeURIComponent(email)}`;
// "/api/invite?email=user%40example.com"

エンコードが必要なよくあるシナリオ:

• クエリパラメータ内のメールアドレス（最も頻繁なケース）
• URLパラメータ内のTwitter/SNSハンドル（例：@username）
• レジストリURLにおける@angular/coreのようなスコープ付きnpmパッケージ名
• パラメータ値として埋め込まれたmailtoリンク

パス内のメールアドレス: 一部のAPIでは、/users/user@example.com/settingsのように、パス内のリソース識別子としてメールアドレスを使用します。多くの実装で動作しますが、技術的には曖昧です。より安全なアプローチは/users/user%40example.com/settingsのようにエンコードすることです。あるいは、一部のAPIではメールをクエリパラメータとして受け付けます。

落とし穴: メールベースのルックアップを行うAPIのURL構築時に@のエンコードを忘れると、URLパーサーが@の前をすべて認証情報として解釈する可能性があります。例えば、https://api.example.com/lookup/admin@company.comは、ユーザー名adminでcompany.comへのリクエストとして解析される可能性があります。パスセグメントやパラメータ値に@が現れる場合は常にエンコードしてください。