encodeURIComponent ツール
スペースは%20、&は%26、=は%3Dになるので、hello world & caféはhello%20world%20%26%20caf%C3%A9となり、1つの値の中に収まります。どの値もencodeURIComponentの規則で変換し、戻す操作で元に戻せます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- テキスト
- hello world & café
- 生産量
- hello%20world%20%26%20caf%C3%A9
- 計算モード
- Encode
- 入力
- hello world & café
- 長さ
- 31
クエリ文字列を組み立てるとき、エスケープされていないアンパサンドや空白が一つあるだけでパラメーターが分割され、連携が壊れてしまうことがあります。この encodeURIComponent ツールは、JavaScript の encodeURIComponent と decodeURIComponent とまったく同じ規則を適用します。行きは予約文字がパーセントエンコード列に変わり、帰りは正しい %XX 列が読みやすいテキストに戻ります。
encodeURIComponent が実際に守るもの
完全な URL は不透明なひとかたまりではありません。スキーム、パス区切り、クエリ区切り、フラグメント記号にはそれぞれ構造上の意味があります。encodeURIComponent は、構造そのものを書き換えずに、値をその構造の内側にデータとして運びたいときに使う関数です。
空白は %20 に、アンパサンドは %26 に、等号は %3D になり、アクセント付き文字や絵文字などの非 ASCII テキストは UTF-8 のパーセント列に展開されるため、プロキシやサーバーがバイト境界を読み違えることがありません。これは、アドレス全体をエンコードする前提で多くの予約文字をそのまま残す encodeURI とは異なります。
https:// で始まるリンク全体をコンポーネントの規則でエンコードすると、コロンやスラッシュが % 列に変わりリンクが機能しなくなります。逆に自由入力の検索語をエンコードせずに ?の後ろに貼り付ければ、埋め込まれた & が新しいパラメーターに見えてしまいます。
本ツールは常にコンポーネントの意味論を用いるため、各値はキーの後ろ、データであるパスセグメントの間、後でクエリになるフォーム本文の中に安全に置けます。エンコードの経路が別のエスケープ方式を勝手に発明することはありません。
コンポーネントエンコードが実務のどこに収まるか
顧客のメールアドレス、チケットの件名、自由入力のタグは、受信側のパーサーを壊さずにコールバック URL に収まる必要があります。検索やフィルターの UI は、空白・引用符・非ラテン文字を含むユーザー入力の語句から共有可能なリンクを組み立てます。
データ移行では、古いエクスポーターが二重にエンコードした列を戻したり、後でリダイレクトに差し込む値を保存する際に一貫したコンポーネントエンコードを一度だけ適用したりします。
教育やコードレビューのチェックリストでは、既知の正しい encodeURIComponent を基準として用い、若手開発者が言語ごとの補助関数を JavaScript の基準と比較し、プラス記号やチルダを異なる扱いにするライブラリーを見つけられるようにします。いずれの場合も契約は同じです。
活用例
安全なクエリパラメーター値
メールアドレス・氏名・自由入力フィルターを ?key=value に付け加える前にエンコードし、予約文字がクエリ文字列を分割しないようにします。
スタック横断の一致確認
他言語の URL エンコーダーを JavaScript の encodeURIComponent 出力と比較し、混在するマイクロサービスがエスケープ規則で一致することを確かめます。
よくある質問
encodeURIComponent と encodeURI の違いは何ですか？
encodeURIComponent は &、=、?、/ などの予約文字をエスケープし、値をデータとして安全にします。encodeURI は URL 全体を対象とするため、それらの構造文字をそのまま残します。本ツールは常にコンポーネントの意味論を用います。
デコード入力が不正だとどうなりますか？
文字列を修正するか、デコードせず不透明なデータとして扱ってください。
encodeURIComponent ツールは無料ですか？
ブラウザーツールは無料で、ローカルで動作します。検証に失敗した場合は課金されません。
Unicode や絵文字にも対応していますか？
はい。 エンコードは JavaScript の encodeURIComponent と一致する UTF-8 のパーセント列を使うため、アクセント付きテキストや絵文字はデコード時に正しく往復します。
検索条件全体と値ごとでは、どちらをエンコードすべきですか？
値を1つずつエンコードしてから、普通の&と=でつなぎます。組み立て済みの条件全体をエンコードすると区切り記号まで変換され、受け取る側がどこで値が切れるのか分からなくなります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/enc/url-component \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"hello world & café"}'const res = await fetch("https://api.kit.forhosting.com/enc/url-component", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "hello world & café"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/enc/url-component",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "hello world & café"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/enc/url-component", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"hello world & café"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"hello world & café"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/enc/url-component", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"text": "hello world & café"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "enc.url_component",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
値を URL に入れる前の準備、ログや外部ペイロードのエンコード解除、そしてブラウザで無料実行しても KIT API を呼び出しても同一となる決定的な結果を得るためにお使いください。
エンドポイントの呼び出し方と結果の読み方
既定は encode で、エンジンは入力に対して encodeURIComponent を実行し、mode、元の入力、変換後の出力、そして出力長を返すため、パイプラインは二度目の処理なしにサイズ予算を検証できます。decode は decodeURIComponent を実行し、復元した文字列を output に入れた同じ形を返します。空文字列も有効で、空文字列に往復します。text が欠けている場合も、変換が走る前に検証で失敗します。すでに組み上がったクエリ文字列をエンコードするのではなく、各値をエンコードしてからリテラルの & と = で連結してください。対象の文字列を text フィールドで送り、任意で mode フィールドに encode または decode を指定します。数値や真偽値は、JavaScript がエンコード前に文字列化するのと同じ方法でテキストに変換されるため、手早い API テストに役立ちます。デコード時の不正なパーセント列、たとえば単独のパーセント記号や不完全な %X の末尾は invalid_input を発生させ、デコード失敗を示すメッセージを返します。これらのタスクは課金されません。この経路はネットワーク・モデル・時刻・乱数を伴わない純粋な解析なので、同じ text と mode の組は無料のブラウザーツールでも有料の API でも常に同じ JSON オブジェクトを返します。成功リクエスト 1 件 $0.002 という価格はわずかなエッジ変換を反映しており、階層交渉なしにクリーンアップ作業で何千ものクエリ値をエンコードできます。そうすれば区切り文字は構造として保たれ、ペイロードの文字だけがエスケープされます。
コンポーネントエンコードが実務のどこに収まるか
外向きの Webhook が典型例です。組み立て前に各フィールドをエンコードしておけば、素の URL を書き換えてしまうメールクライアントやチャットアプリをまたいでも共有リンクは安定します。ログやサポートツールはパーセント列を含む生のリクエスト行を表示することが多く、それらの値をデコードすれば、使い捨てのコンソールに貼らずとも元の検索語やファイル名を調査のために復元できます。
連携の活用例
リクエストログとエクスポートのデコード
アクセスログや CSV エクスポートのパーセントエンコードされたパス・クエリ断片を、サポートや分析向けに読みやすい UTF-8 へ戻します。
技術的な質問
同じエンドポイントでエンコードとデコードの両方ができますか。
はい。mode を encode（既定）または decode に設定してください。応答には常に mode、input、output、length が含まれます。