encoding / url
URL エンコード / デコード
テキストをURLエンコード（パーセントエンコーディング）形式に変換・復元します。日本語を含む文字列に対応しています。
使い方
01- 「エンコード」または「デコード」タブを選択してください
- テキストエリアに入力すると、リアルタイムで変換結果が表示されます
- エンコードでは日本語・記号・スペースなどを
%XX形式に変換します - 「コピー」ボタンで変換結果をクリップボードにコピーできます
実装コード
02ブラウザ標準の encodeURIComponent / decodeURIComponent のみで実装。外部ライブラリ不要でそのままコピーして利用できます。
// URLエンコード: encodeURIComponent を使用
export function encodeUrlComponent(input: string): string {
return encodeURIComponent(input)
}
// URLデコード: decodeURIComponent を使用
export type DecodeResult =
| { ok: true; output: string }
| { ok: false; error: string }
export function decodeUrlComponent(input: string): DecodeResult {
try {
return { ok: true, output: decodeURIComponent(input) }
} catch (e) {
return { ok: false, error: `デコードエラー: ${(e as Error).message}` }
}
}
// 不正な%シーケンスの検出
export function isValidUrlEncoded(input: string): boolean {
return !/%(?![0-9A-Fa-f]{2})/.test(input)
}よくある使用例・注意点
03クエリパラメータへの日本語埋め込み
URLのクエリパラメータに日本語や特殊文字を含める場合、必ずURLエンコードが必要です。例：検索ワード「日本語」→ ?q=%E6%97%A5%E6%9C%AC%E8%AA%9E。ブラウザのアドレスバーでは自動的に変換されることがありますが、コード上では明示的にエンコードしてください。
encodeURI vs encodeURIComponent の違い
encodeURI はURL全体に使い、: / ? # & = などのURL構造文字はエンコードしません。encodeURIComponent はクエリ値などURL部品に使い、これらの文字もすべてエンコードします。このツールは encodeURIComponent を使用しています。
+（プラス）記号の扱い
HTMLフォームのapplication/x-www-form-urlencoded形式ではスペースが+に変換されます。しかし encodeURIComponent ではスペースは%20になります。+をスペースとして扱うのは古い形式のみです。このツールは+をそのまま+として扱い、スペースには変換しません。
デコードエラーの原因
%の後に16進数2桁（0-9, A-F）が続かない場合、デコードエラーになります。例：%ZZ, %G1, 末尾の%など。エラーが出た場合は入力文字列の%シーケンスが正しいか確認してください。
APIリクエストのパラメータ構築
fetch や axios でAPIリクエストを送る際、URLにパラメータを含める場合は encodeURIComponent でエンコードしてください。URLSearchParams を使うと自動的に適切なエンコードが行われます。
関連ツール
04ソースコード
05このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。
GitHub でコードを見る →