ハッシュ記号 (#) のURLエンコード

ハッシュ記号（#）はURLにおいてフラグメント識別子の区切り文字として予約されています。URL内でエンコードされていない#の後のすべてがフラグメントとして扱われ、ページ内のセクションを参照するもので、サーバーには送信されません。URLパスやクエリパラメータでリテラルの#が必要な場合は、%23にエンコードしなければなりません。

percent-encoding形式: %23はハッシュ記号を表します（ASCIIコード35、16進数で0x23）。エンコードすることで、この文字がフラグメント区切りではなくデータとして扱われます。

重要な動作: URLのフラグメント部分（#以降すべて）はブラウザによって完全に処理されます。サーバーに送信されるHTTPリクエストには含まれません。つまり、#FF5733のようなカラーコードをエンコードせずにクエリパラメータで渡すと（/api?color=#FF5733）、サーバーは/api?color=のみを受け取り、残りはフラグメントとして無視されます。

JavaScriptでの動作:

encodeURIComponent("#FF5733") // "%23FF5733"
encodeURI("#FF5733")          // "#FF5733" (# をエンコードしない)

// 16進数カラーをURLに正しく渡す方法
const url = `/palette?color=${encodeURIComponent("#FF5733")}`;
// "/palette?color=%23FF5733"

よくあるシナリオ:

• URLパラメータでCSSカラーコード（16進数カラー）を渡す場合
• アンカー参照を含むURLをパラメータ値として共有する場合
• URL内のC#やF#言語名（ドキュメントリンクなど）
• #1234形式のIssueやチケット番号
• URLパラメータ内のソーシャルメディアのハッシュタグ

落とし穴: これはURLエンコードのバグの中で最も発見しにくいものの一つです。ブラウザは単にエンコードされていない#以降をフラグメントとして扱うだけだからです。サーバーログには切り詰められたURLが表示され、ブラウザのアドレスバーではURLが正しく見える（ブラウザはフラグメントを表示する）ため、デバッグが困難になります。パラメータ値では常にハッシュ記号をエンコードし、URLに16進数カラー値を含むカラーピッカーやデザインツールでは特に注意してください。