URLエンコーディング（パーセントエンコーディングとも呼ばれる）は、URL内の特殊文字を%XX形式で表現するメカニズムで、XXは16進数値です。このエンコーディングは、Web開発、API統合、データ転送に不可欠です。スペース、アンパサンド（&）、疑問符（?）、非ASCII文字などの特殊文字をURLまたはクエリパラメータに含める必要がある場合、適切なエンコーディングによりURL構造を壊すことなくデータを安全に送信できます。このツールは2つのエンコーディングモードをサポート：完全URLエンコード（encodeURI）は:、/、?、&、=などのURL構造文字を保持しながら他の特殊文字をエンコード—完全なURLのエンコードに最適。コンポーネントエンコード（encodeURIComponent）はURL構造文字を含むすべての特殊文字をエンコード—クエリパラメータ値、フォームデータ、APIリクエストペイロードに最適。すべての処理はブラウザのクライアント側で行われ、サーバーにデータは送信されません。
How to Use
上部のラジオボタンでエンコードまたはデコードモードを選択します。エンコード時：テキストまたはURLを入力エリアに貼り付けると、出力が自動的にエンコード結果で更新されます。スペースエンコーディングスタイルを選択：%20（標準、RFC 3986準拠）または+（クエリ文字列とフォームデータで一般的）。「完全URLをエンコード」をトグルして、完全URLエンコード（:、/、?、&、=を保持）とコンポーネントエンコード（すべてをエンコード）を切り替えます。デコード時：エンコードされたURLテキストを貼り付けると、%20と+の両方のスペース表現を処理して、自動的に読みやすい形式にデコードされます。コピーボタンでワンクリックで出力をコピー、またはテキストファイルとして結果をダウンロードします。
Common Use Cases & Examples
**クエリパラメータ**：「smart watch」を「smart%20watch」または「smart+watch」にエンコードしてURLクエリ文字列に使用。**APIリクエスト**：「https://api.example.com/search?q=電子機器%20%26%20ガジェット&価格=%3E100」のようなAPI URLを適切にエンコードされたパラメータで構築。**OAuthと署名**：多くのOAuthフローとAPI署名アルゴリズムはURLエンコードされたパラメータが必要。**フォームデータ**：application/x-www-form-urlencodedコンテンツタイプのフォーム送信をエンコード。**ディープリンク**：パラメータ付きモバイルアプリ用のエンコードされたディープリンクを作成。**デバッグ**：APIレスポンスまたはブラウザのURLバーをデコードして実際のパラメータ値を確認。**特殊文字**：URL内の&、=、?、#、/、@、:、<、>、\"、'、%、+、スペースなどの文字を処理。
Limitations & Important Notes
このツールはUTF-8エンコーディング（現代のWeb標準）を使用します。非UTF-8エンコーディングはサポートされていません。標準URLエンコーディングを処理します。他のエンコーディングスキーム（base64やHTMLエンティティなど）については、それぞれのツールを使用してください。非常に長いURL（>100KB）は古いブラウザでパフォーマンス問題を引き起こす可能性があります。デコードモードでの不正な形式のパーセントシーケンス（%ZZや不完全なシーケンスなど）はエラーメッセージをトリガーします。「完全URLをエンコード」オプションは、http://またはhttps://で始まる完全なURLにのみ使用してください。クエリパラメータ値のみの場合は、コンポーネントエンコーディングを使用してください。URLエンコーディングによりテキストサイズが増加することを覚えておいてください：各特殊文字が3文字（%XX）になるため、「hello world」（11文字）は「hello%20world」（13文字）になります。
// JavaScript URL Encoding Examples
// Encode full URL (preserves protocol, slashes, etc.)
const fullUrl = 'https://example.com/search?q=hello world';
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/search?q=hello%20world
// Encode URL component (encodes all special chars)
const queryParam = 'hello world & special chars';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// hello%20world%20%26%20special%20chars
// Build URL with encoded parameters
const baseUrl = 'https://api.example.com/search';
const params = {
q: 'smart watch',
category: 'electronics & gadgets',
price: '>100'
};
const queryString = Object.entries(params)
.map(([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
const fullApiUrl = `${baseUrl}?${queryString}`;
console.log(fullApiUrl);
// https://api.example.com/search?q=smart%20watch&category=electronics%20%26%20gadgets&price=%3E100
// Decode URL
const encoded = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world';
const decoded = decodeURIComponent(encoded.replace(/\+/g, ' '));
console.log(decoded);
// https://example.com/search?q=hello world
// Handle encoding errors
try {
const malformed = '%E0%A4%A'; // Incomplete UTF-8 sequence
const result = decodeURIComponent(malformed);
} catch (error) {
console.error('Invalid URL encoding:', error.message);
}