URLエンコード(パーセントエンコーディング)の仕組み
URLは使用できる文字が限られているため、日本語や特殊文字を含む場合は%XX形式のパーセントエンコーディングが必要です。APIのクエリパラメータ・フォームデータ送信・リダイレクトURLの処理で必須の知識です。
パーセントエンコーディングとは
URLに使えない文字(日本語・スペース・&など)は%に続く16進数2桁で表現します。「東京」はUTF-8バイト列をパーセントエンコードした%E6%9D%B1%E4%BA%ACになります。スペースは%20またはHTMLフォームデータではapplication/x-www-form-urlencodedとして+で表現されます。URLの各パートによってエンコードすべき文字が異なります。パスセグメント(/で区切られた部分)では/自体をエンコードしてはいけませんが、クエリパラメータの値には/も%2Fとしてエンコードすべきです。RFC 3986に定義される予約文字(!・'・(・)・*)はコンテキストによってエンコードの要否が変わるため、JavaScriptのencodeURIComponentを使うのが最も安全です。
encodeURIComponentとencodeURIの違い
JavaScriptのencodeURIComponentはクエリパラメータの値をエンコードするために使い、?・=・&・/も含めてエンコードします。encodeURIはURL全体をエンコードする際に使い、URLとして有効な文字(?・=・&・/など)はエンコードしません。URL EncoderではこれらのモードをUIで切り替えて比較できます。
クエリパラメータの自動パース
URLにクエリパラメータが含まれる場合(例: https://example.com?q=検索語&lang=ja&sort=price%3Adesc)、URL Encoderは自動的にkeyとvalueに分解して表示します。複数パラメータの内容を一覧確認したり、エンコードされた値をデコードして読みやすくする用途に便利です。解析されたパラメータはそれぞれ個別に編集・追加・削除ができ、変更後のURLを再生成してコピーできます。ブラウザのDevToolsでコピーしたURLのクエリパラメータを素早く確認する、APIドキュメントのサンプルURLのパラメータを解読する、UTMパラメータ付きのマーケティングURLを分析するといった場面で日常的に役立ちます。URLSearchParams APIと同様のパース動作をUIで直感的に行えます。
APIデバッグでの活用
REST APIへのリクエストでクエリパラメータに日本語や記号を含む場合、エンコード漏れで404やパースエラーが発生することがあります。URL Encoderにクエリ文字列を貼り付けて正しくエンコードされているか確認し、デバッグを効率化できます。たとえばaxiosやfetchでURLを構築する際に手動連結すると特殊文字のエンコードが漏れやすく、URLSearchParamsを使った方が安全ですが、実際のリクエストURLがどうなるかを確認するのにURL Encoderが役立ちます。cURLコマンドでAPIを叩く際も日本語パラメータを含む場合はシェルでのエスケープとURLエンコードの両方が必要で、ツールで事前に正規化されたURLを確認してからコマンドに使う運用が効率的です。