Base64・URLエンコードを整える。

そもそもエンコードとは

データを、運びたい場所の「決まりごと」に合わせて書き換えること。

どこで・どんな場面で使うか

• Web サイトの検索やリンクを作るとき

  検索語をクエリ文字列に入れるとき、日本語や & を安全な形に直します。ブラウザの URL で %E3… と見えるのがこれです。

• API の認証ヘッダを読み書きするとき

  Basic 認証は、ユーザー名とパスワードを Base64 にして送ります。仕組みを知っていると、通信のデバッグで中身を確認できます。

• メールの添付ファイル

  メールはもともと文字を送る仕組みなので、添付ファイルは Base64 でテキストにして運ばれます。

• Web ページに小さな画像を埋め込むとき

  画像を Base64 の文字列にして、ファイルを別に用意せず data: の形でページに直接書けます。

• 文字化けの原因を調べるとき

  文字コード（UTF-8 など）の違いで文字化けが起きます。エンコードの考え方が分かると、どこで食い違ったか追いやすくなります。

知らないと何が困るか

• URL がうまく動かない。記号や日本語を入れたリンクが途中で切れる原因が分からず、時間を失います。
• 「Base64 にしたから安全」と誤解する。Base64 は誰でも元に戻せます。パスワードを Base64 にして保管するのは、隠したことになりません。
• 通信やログの文字列が読めない。eyJ… や %20 のような文字列を見て、「ああ、これは変換後の姿だ」と気づけないと調査が止まります。

上のツールに日本語の文章を入れて、変換後の姿を見てみてください。元に戻す操作も試せます。

エンコードのポイント・4つ

「読めない形」にするのと「秘密にする」のは別。

1. 1

   Base64 は「3バイトを4文字」に詰め替える

   バイト列を A–Z a–z 0–9 + / の64種類だけで表す方式です。3バイトごとに4文字へ。端数のときは末尾に =（パディング）が付きます（残り2バイトなら = 1個、1バイトなら == 2個）。メール添付や画像のテキスト埋め込みなど、バイナリを文字として運ぶのが本来の用途です。

2. 2

   Base64URL は URL・ファイル名で安全な変種

   標準 Base64 の + と / は URL で別の意味を持つため、+→-、/→_ に置き換え、末尾の = も省きます。JWT（トークン）や URL のクエリ、ファイル名でよく使われます。デコード時は逆変換し、長さを4の倍数に戻してから復号します。

3. 3

   URLエンコードは encodeURIComponent と encodeURI で別物

   クエリの「値」1つを安全にするなら encodeURIComponent。区切り記号 / ? : @ & = + $ , # も含めてエスケープします（例：a b&c→a%20b%26c）。一方、URL全体を渡すなら encodeURI。区切りは壊さず、スペースなどだけ直します（a b&c→a%20b&c）。迷ったらクエリの値には encodeURIComponent。

4. 4

   日本語・絵文字は UTF-8 として扱います

   「こんにちは」や 😀 のようなマルチバイト文字も、まず UTF-8 のバイト列にしてから変換するので文字化けしません（こんにちは の Base64 は 44GT44KT44Gr44Gh44Gv）。デコード時に並びが壊れていると、無言で文字化けさせずエラー表示します。貼り付けた Base64 に含まれる空白・改行は自動で無視します。

🔒 変換はすべてあなたのブラウザの中（JavaScript の TextEncoder / btoa / atob / encodeURIComponent など）で完結します。入力した文字はサーバに送られません（送信ゼロ）。