エンコーダー・デコーダー

このエンコーダー・デコーダーは何をしますか？

上にテキストを入力または貼り付けて、エンコードかデコードを選ぶと、変換結果がすぐに表示されます。サーバーに送信されるものは何もありません。エンコードモードでは、URLエンコード・URLコンポーネントエンコード・Base64の3つの結果を一度に表示します。デコードモードでは各形式を自動で試し、意味のある結果になったものだけを選んで表示します。クエリ文字列をエスケープしたりトークンをデコードしたりするたびに、ブラウザのコンソールと知らないサイトを行き来するのが面倒で作りました。ブラウザがすでにできることなのですから。

URLにはなぜエンコードが必要ですか？

URLには使える文字が限られていて、それ以外の文字は必ずエスケープしなければならないからです。スペース・アンパサンド(&)・疑問符・スラッシュ・日本語などの非英字をそのまま入れると、URLの意味が変わったり、まるごと壊れたりします。エンコードはこうした文字を % のシーケンスに書き換えます。たとえばスペースは %20 になります。そうすることで、アドレスをコピーし、リンクにし、サーバーが解釈しても元の値がそのまま保たれます。

そのまま残せる文字は多くありません。URLの文法を定めた RFC 3986 は、英字 A–Z a–z、数字 0–9、そして - . _ ~ だけを「非予約(unreserved)文字」とし、それ以外はすべて % の三文字に置き換えます。1バイトがパーセント記号 + 16進数2桁になるため、ASCII1文字は3文字に増え、非ASCII文字はUTF-8に変換されてから符号化されるので、日本語1文字は3バイトで9文字になります。たとえば「あ」は %E3%81%82 になります。

この処理に関数が2つあるのには理由があります。encodeURI はURL全体を対象にするため、:・/・?・# といった構造文字には手を付けません。一方 encodeURIComponent はURLの中に差し込むひとつの断片、つまり検索語やクエリ値ひとつのためのものなので、こうした構造文字までエスケープします。目安はシンプルです。リンク全体をエンコードするなら前者、クエリ文字列に入れる値ひとつをエンコードするなら後者です。MDN に正確なエスケープ対象が整理されています。encodeURIComponent は - _ . ! ~ * ' ( ) だけを残し、encodeURI はこれに加えて構造文字 ; , / ? : @ & = + $ # もそのまま残します。

Base64とは何で、いつ使いますか？

Base64は、任意のテキストやバイナリデータを、英字・数字・+・/ だけからなる安全な文字集合に変換する方式です。プレーンテキストしか想定していない経路で、より複雑なデータを運ぶ必要があるときに使います。小さな画像を data: URIとしてHTMLやCSSに直接埋め込む、認証情報をbasic-authヘッダーに入れる、データの塊を壊さずにJSONへ収める、といった場面が代表的です。その代わりデータの大きさはおよそ3分の1ほど増えます。これが安全と引き換えのコストです。この数値はざっくりした目安ではなく、正確な値です。RFC 4648 はBase64を、3バイト(24ビット)ごとに65文字のアルファベット(A–Z、a–z、0–9、+、/、そしてパディング用の =)から選んだ4文字へまとめる方式として定義しており、これはちょうど4/3、つまり約+33%の増加です。なお実務上の注意として、ブラウザの btoa はコードポイント256未満の文字しか受け付けないため、このツールはテキストをまずUTF-8に変換してから符号化します。だから絵文字や非ラテン文字もそのまま往復でき、素の btoa なら拒否される入力もここでは処理できます(MDN)。

ひとつはっきりさせておくと、Base64は暗号化ではありません。誰でも元に戻せますし、このツールもワンクリックでデコードします。ですからパスワードや秘密の値を隠す手段としては絶対に使わないでください。

3つの形式をひと目で比較

形式	定義する標準	出力文字集合	サイズへの影響	主な用途
URLエンコード (encodeURI)	RFC 3986	%XX の三文字、構造文字は維持	エスケープされた文字ごとに1 → 3文字	URL全体のエスケープ
URLコンポーネント (encodeURIComponent)	RFC 3986	%XX の三文字、構造文字もエスケープ	エスケープされた文字ごとに1 → 3文字	クエリ・パスの値ひとつ
Base64 (btoa)	RFC 4648	A–Z a–z 0–9 + / =(65文字)	約+33%(3バイト → 4文字)	バイナリをテキスト経路で送る

Base64の増加率が内容に関係なく一定なのは、標準の文書にそのまま書かれています。

“The encoding process represents 24-bit groups of input bits as output strings of 4 encoded characters.”

— RFC 4648, §4

デコードの自動判定はどう動きますか？

デコードモードでは、入力をURLデコード・URLコンポーネントデコード・Base64デコードに順に通し、実際にテキストが変わったもの、またはBase64として成功したものだけを表示します。そのため % でエスケープされた文字列はURLの結果が、Base64の塊はデコードされたテキストが現れます。よく使う中で得たコツをいくつか。クエリ値を組み立てるときはURLコンポーネントエンコードを使い、Base64は保護ではなく転送のためのものだと覚えておいてください。すべての変換はブラウザ内だけで行われるので、トークンや非公開の断片でも外に漏れる心配なく安心して貼り付けられます。