URLエンコード / デコードツール｜URL文字列を%形式に変換【無料】

URLエンコード / デコードツールの使い方

このツールは、URLエンコード・デコードを行います。

文字列を入力し変換ボタンを押下すると、URLエンコード/デコード をして、もう一方のテキストエリアに出力します。

URLエンコードとは

URLは本来、ASCII文字（半角英数字と一部の記号）しか安全に扱えない設計になっています。 日本語などのマルチバイト文字や、URLの構造上特別な意味を持つ記号（? & = # など）を そのまま埋め込むと、受け取り側のサーバーやブラウザが誤って解釈するリスクがあります。

URLエンコード（パーセントエンコーディング）は、こうした「安全でない文字」を「%XX（16進数 2桁）」の形式に変換する仕組みです。RFC 3986 で標準化されており、すべての主要ブラウザ・言語ランタイムがサポートしています。

主な役割

• GETパラメータ： URLの末尾に付与されるクエリ文字列で、キーと値を安全に渡すために使用されます
• フォーム送信： HTMLフォームの application/x-www-form-urlencoded 形式でボディを構築する際に使用されます
• APIリクエスト： REST APIのパスやクエリにユーザー入力を含める場合に使用されます
• セキュリティ対策： エンコードせずにユーザー入力をURLに混入させると、クエリ構造が破壊されたり、意図しないパラメータが挿入されるリスクがあります

変換のイメージ

日本語は UTF-8 でエンコードされたバイト列が、それぞれ %XX に置き換えられます。 「こんにちは」は UTF-8 で 15バイトになるため、15個の %XX ブロックに展開されます。

こんにちは

↓

%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF

よく使われる変換例

URL内で「特定の役割」を持つ記号や、本来使用できない文字は、以下のようにエンコードされます。これらはデバッグやログ解析の際によく目にするため、覚えておくと便利です。

元の文字	エンコード後	主な用途・理由
（スペース）	%20	URL内では区切りと誤認されるため変換必須
#	%23	URLフラグメント（ページ内リンク）の区切り文字
%	%25	二重エンコードを防ぐため % は %25 に変換
&	%26	パラメータ同士の区切り記号として使われるため
+	%2B	フォームエンコードでスペースと混同されるため、プラス記号は %2B でエスケープ
/	%2F	パスの階層を区切る記号であるため
=	%3D	キーと値（key=value）を結びつける記号であるため
?	%3F	URL本体とパラメータの境界を示す記号であるため

JavaScriptでURLエンコードする方法

フロントエンドの開発において、URLエンコードを行うには標準関数の encodeURIComponent() を使用するのが最も一般的で安全な方法です。

const text = "きんとき";
const encoded = encodeURIComponent(text);

console.log(encoded); 
// → %E3%81%8D%E3%82%93%E3%81%A8%E3%81%8D

// URLにパラメータを安全に組み込む
const keyword = "東京タワー";
const url = `https://example.com/search?q=${encodeURIComponent(keyword)}`;

console.log(url);
// → https://example.com/search?q=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC

encodeURI()はURL全体が対象

JavaScriptには似た関数で encodeURI() がありますが、こちらは名前の通りURL全体用です。一部の記号 ; / ? : @ & = + $ , # をエンコードしません。

encodeURI("https://example.com/path?q=テスト");
// → https://example.com/path?q=%E3%83%86%E3%82%B9%E3%83%88

英数字 と – _ . ! ~ * ‘ ( ) はどちらもエンコードしません。

const text = "ABCDEFGHIJKLMNOPQRSTUVWZabcdefghijklmnopqrstuvwz0123456789-_.!~*'()";

console.log(encodeURIComponent(text));
// → ABCDEFGHIJKLMNOPQRSTUVWZabcdefghijklmnopqrstuvwz0123456789-_.!~*'()

console.log(encodeURI(text));
// → ABCDEFGHIJKLMNOPQRSTUVWZabcdefghijklmnopqrstuvwz0123456789-_.!~*'()

encodeURI()は : ; / ? @ & = + $ , # についてもエンコードしません。

const text = ":;/?@&=+$,#";

console.log(encodeURI(text));
// → :;/?@&=+$,#

console.log(encodeURIComponent(text));
// → %3A%3B%2F%3F%40%26%3D%2B%24%2C%23
// encodeURIComponent()はエンコードします。

パラメータ部分（検索ワードなど）を個別に処理する場合は、意図しないバグを防ぐために必ず encodeURIComponent() を選ぶようにしましょう。

デコード（逆変換）

encodeURIComponent() で変換した場合、decodeURIComponent() でデコードが可能です。サーバー側では通常フレームワークが自動デコードしますが、手動処理が必要な場面でも同じ関数名で対応できます。