絵文字のURLエンコード
絵文字のURLエンコード方法を解説。絵文字が4バイトのUTF-8シーケンスを生成する理由と、URLの長さや共有への影響を理解しましょう。
Character
😀
Encoded
%F0%9F%98%80
詳細な説明
絵文字は他のUnicode文字と同様にUTF-8バイトシーケンスを使ってURLにエンコードされます。ただし、絵文字は高いUnicodeコードポイント(U+1F000以上)を占めるため、UTF-8で4バイトを必要とし、1つの絵文字あたり12文字のpercent-encoding出力を生成します。
percent-encodingの例: にっこり顔の絵文字(😀)のUnicodeコードポイントはU+1F600です:
- UTF-8バイト:0xF0、0x9F、0x98、0x80
- URLエンコード:
%F0%9F%98%80
JavaScriptでの動作:
encodeURIComponent("😀") // "%F0%9F%98%80" (にっこり顔)
encodeURIComponent("❤️") // "%E2%9D%A4%EF%B8%8F" (赤いハート+異体字セレクタ)
encodeURIComponent("🇵🇱") // "%F0%9F%87%BA%F0%9F%87%B8" (旗の絵文字、2つのコードポイント)
// デコード
decodeURIComponent("%F0%9F%98%80") // "😀"
絵文字が特別な理由:
- 長さの展開: 各絵文字はpercent-encodingすると12文字になります(4バイト x 各3文字)。20個の絵文字を含むURLは240文字増加します。
- JavaScriptにおけるサロゲートペア: U+FFFFを超える絵文字はJavaScriptのUTF-16文字列でサロゲートペアとして表現されます。
"😀".lengthは1ではなく2を返します。正確な文字数には[..."😀"].lengthを使用してください。 - 合成絵文字: 多くの現代の絵文字は実際にはゼロ幅接合子(U+200D)で結合された複数のコードポイントのシーケンスです。家族の絵文字👨👩👧👦は7つのコードポイントで構成され、非常に長いエンコード文字列を生成します。
- 異体字セレクタ: ❤️(赤いハート)のような絵文字は、不可視の異体字セレクタ文字(U+FE0F)を含み、さらに3つのエンコードバイトが追加されます。
実用上の影響:
- URLの長さ制限(一般的に2,048〜8,192文字)は絵文字が多いコンテンツですぐに消費される
- 一部の古いサーバー、データベース、APIは4バイトUTF-8シーケンスを正しく処理できない可能性がある
- メールクライアントやメッセージングプラットフォームが絵文字の多いURLを分断・切り詰める可能性がある
- 一部のURL短縮サービスは絵文字URLを正しく保持しない
落とし穴: 絵文字を含むURLを保存・比較する際、同じ見た目の絵文字に複数の表現がある場合があることに注意してください。例えば、一部の絵文字は異体字セレクタの有無で表現でき、異なるエンコード形式を生成します。一貫性のあるURLが必要な場合は、エンコード前にUnicode正規化(NFC正規化)を行ってください。
ユースケース
スラッグや検索パラメータに絵文字を含むSNS共有URL。例えば、絵文字ベースの商品検索やチャットメッセージのディープリンクなど。