URL Encoder

URLエンコーダー / デコーダー

任意のテキストをURLセーフなpercent-encoding文字列に変換、またはエンコード済みURLをプレーンテキストに戻します。リアルタイムプレビュー、UTF-8対応、すべてブラウザ内で動作します。

コンポーネント（encodeURIComponent）は予約外文字以外をすべてエスケープします。クエリ文字列の値やパスセグメントなど、単一フィールドに最も安全です。URI（encodeURI）はURL構造に必要な文字（:/?#=&）を保持するため、URL全体に使います。フォーム（application/x-www-form-urlencoded）はコンポーネント形式に加え、半角スペースを「+」に置換するもので、HTMLフォームで使われる形式です。

RFC 3986 では、エンコード不要の「予約外文字」として A-Z a-z 0-9 - _. ~ が定義されています。それ以外はpercent-encodingされます。encodeURIComponent はさらに :/?#&= もエンコードしますが、encodeURI はそれらを残します。クエリ値とURL全体のどちらをエンコードするかでこの違いが重要になります。

プレーンテキスト

0 文字

エンコード結果

0 文字

iKit URLエンコーダーが選ばれる理由

高速・正確・ブラウザ完結。開発者やコピーライター、URLをデバッグするすべての方のために設計しました。

3つのエンコードモード

クエリ文字列の値、URL全体、HTMLフォームのペイロードなど、用途に応じてコンポーネント／URI全体／フォームの3モードから選択できます。

プライバシー重視の設計

エンコードもデコードも、ネイティブのJavaScriptを用いてブラウザ内で完結します。テキストやURLが端末から送信されることはありません。

ライブプレビュー

キーを打つたびに結果が更新されます。「エンコード」ボタンを押す必要も、サーバーとの往復もありません。

UTF-8セーフ

絵文字、CJK文字、アクセント付きラテン文字、キリル文字も、encodeURIComponentで往復しても正しく復元されます。

フォーム形式の「+」処理

デコード時に「+」を半角スペースとして扱うことができます。これは application/x-www-form-urlencoded におけるHTMLフォームの慣例です。

ファイルの一括処理

txt.csv.json ファイルをドロップするだけで一括エンコード／デコード。結果はクリーンな.txt としてダウンロードできます。

URLエンコーディングの仕組み

3つのネイティブブラウザAPI、3つのモード、すべてこのページ内で動作します。

  1. 1

    エディタに入力する

    キーを押すたびに、入力文字列が小さなJavaScript関数に渡されます。デバウンスもAPI呼び出しもfetchもなく、ブラウザのタブ内で同期的に実行されます。

  2. 2

    モードを選ぶ

    コンポーネントは encodeURIComponent を呼び出し、A-Z a-z 0-9 - _. ~ 以外をすべてエスケープします。URIは encodeURI を呼び出し、:/?#=& を保持してURL全体を有効に保ちます。フォームは encodeURIComponent を使い、application/x-www-form-urlencoded に従って半角スペースを + に置換します。

  3. 3

    UTF-8は自動で処理されます

    encodeURIComponent も encodeURI も、文字列を内部的にUTF-8バイト列へ変換してから、安全でない各バイトをpercent-encodingします。これにより漢字「中」は %E4%B8%AD となり、RFC 3986 の要件どおりです。

  4. 4

    結果はライブで表示されます

    結果は読み取り専用の出力欄に設定されます。Copy をクリックすると navigator.clipboard.writeText でクリップボードへコピーされ、Download をクリックすると Blob URL を介して .txt として保存できます。いずれもブラウザ内で完結します。

よくあるユースケース

適切なエンコードモードを選ぶことでバグを防げる、現実のシナリオを紹介します。

クエリ文字列の値を組み立てる

?q=... に入れるユーザー入力は、必ずコンポーネントモードでエンコードしてください。URIモードでは = や & がそのまま残るため、値にこれらが含まれるとURLが壊れます。

長いURLをチャットで共有する

一部のチャットアプリやPDFでは、半角スペースや非ASCII文字を含むリンクが壊れることがあります。URIモードを通せば、どこにコピー＆ペーストしても安全になります。

400を返すバックエンドのデバッグ

APIがリクエストを拒否したら、URLをデコードモードに貼り付けてサーバーが実際に受け取った内容を確認しましょう。% 自体が %25 としてエンコードされた二重エンコードもすぐに見つかります。

フォームデータのラウンドトリップ

application/x-www-form-urlencoded のPOSTボディをデバッグする際は、「+を半角スペースとして扱う」をオンにしてデコードしてください。これがブラウザの慣例で、忘れると「ユーザー名にプラス記号が表示される」バグの最大の原因になります。

ローカルでエンコードする意義

エンコードするURLには、実在の顧客のメールアドレス、ID、セッショントークンなど、見知らぬサーバーのツールに貼り付けたくないデータが含まれていることがよくあります。iKit URLエンコーダーは、すでにブラウザに読み込まれたJavaScriptとして動作するため、入力がタブの外に出ることはありません。

  • エンコード／デコード中に fetch、XHR、beacon を一切使用しません。
  • ページが一度読み込まれればオフラインでも動作します。
  • ログ、レート制限、サインアップ、1日の利用上限は一切ありません。

関連ガイド

iKit ブログの詳しいチュートリアルとツール比較。

よくある質問

コンポーネント、URI、フォームの各モードの違いは？

コンポーネント（encodeURIComponent）は予約外文字以外をすべてエスケープします。クエリ文字列の値やパスセグメントなど、単一フィールドに最も安全です。URI（encodeURI）はURL構造に必要な文字（:/?#=&）を保持するため、URL全体に使います。フォーム（application/x-www-form-urlencoded）はコンポーネント形式に加え、半角スペースを「+」に置換するもので、HTMLフォームで使われる形式です。

エンコードされない文字があるのはなぜ？

RFC 3986 では、エンコード不要の「予約外文字」として A-Z a-z 0-9 - _. ~ が定義されています。それ以外はpercent-encodingされます。encodeURIComponent はさらに :/?#&= もエンコードしますが、encodeURI はそれらを残します。クエリ値とURL全体のどちらをエンコードするかでこの違いが重要になります。

デコード結果がおかしいのはなぜ？

よくある原因は3つです。(1) 元がフォーム形式で「+」を半角スペースとして扱う必要がある場合 — オプションを切り替えてください。(2) 二重エンコード — 入力が2回エンコードされている場合は、もう一度デコードしてください。(3) 不正なpercentシーケンス — 「%」の後に16進2桁が続いていません。エラーメッセージで該当バイト位置を確認してください。

JavaScript の encodeURIComponent と完全に同じ結果ですか？

コンポーネントモードでは「はい」 — encodeURIComponent を直接呼び出しています。フォームモードでは RFC 3986 と WHATWG に従って ! ' * を %21 %27 %28 %29 %2A に変換する標準的な調整を加えています。URIモードでは encodeURI を呼び出しており、多くの言語が言う「URLをpercent-encodingする」処理に相当します。

入力したURLはどこかにアップロードされますか？

いいえ。このツール全体がページ内のJavaScriptで動作しており、エンコードもデコードもブラウザ内で完結します。DevTools の Network タブを開いて確認できます — エンコード／デコード時にリクエストは送信されません。