変換する目的の違い（根本的な違い）
プログラミングやWeb開発において、文字列やデータを特定の規則に従って別の文字列に変換する処理を頻繁に行います。中でも代表的なのが「Base64」と「URLエンコード（パーセントエンコーディング）」です。
どちらも元のデータを英数字を中心とした安全な文字列に変換するため混同されがちですが、その設計目的と使用される場面は全く異なります。
- Base64: メールやJSONなど「テキストデータしか扱えない環境」で、画像やファイルなどのバイナリデータを破損せずに安全に転送するためにテキスト化する技術。
- URLエンコード（パーセントエンコーディング）: ブラウザやWebサーバーが解釈するURLの中で、日本語やスペース、あるいは「
?」「&」といったシステム上特別な意味を持つ記号を安全に含めるためにエスケープする技術。
早見表
| 項目 | Base64 | URLエンコード（パーセントエンコーディング） |
|---|---|---|
| 主な対象データ | バイナリデータ（画像・PDFなど）、任意のテキスト | URLを構成する文字列（クエリパラメータ、パスなど） |
| 変換の目的 | バイナリデータをテキスト形式に安全に変換すること | URLで使用できない文字や記号を安全にエスケープすること |
| 使用される文字 | A-Z, a-z, 0-9, +, / （および末尾パディングの =） |
A-Z, a-z, 0-9, -, _, ., !, ~, *, ', (, ) および %XX（16進数） |
| データサイズの変化 | 元データの約133%（約3割増）に増加 | 英数字はそのまま。日本語はバイト数に応じて最大3倍に増加 |
| 主なユースケース | メール添付ファイル、CSS内のインライン画像、認証用ヘッダー、JWT | URLパラメータ（検索クエリなど）、日本語URLの表記ゆれ防止 |
Base64の仕組みとユースケース
Base64は、すべてのデータをアルファベットの大文字・小文字、数字、そして「+」「/」の合計64文字（および余りの位置を埋めるための「=」）だけで表現する方式です。
データを3バイト（24ビット）ずつ切り出し、それを6ビットずつの4つに分割して、64種類の文字に置き換えます。
注意点：標準のBase64はURLで問題を起こすことがある
標準のBase64で使用される「+」「/」「=」は、いずれもURLの中で特別な意味を持つ記号です。そのため、Base64化したデータをそのままURLパラメータに埋め込むと、正しくパースされずにデータが破損する原因になります。
これを防ぐために、+ を - に、/ を _ に置き換え、末尾の = を省略またはエスケープする 「URL-safe Base64」 という派生仕様が存在します。
主な用途
- Basic認証: IDとパスワードを「
ユーザー名:パスワード」の形で結合し、Base64化してAuthorization: Basic <base64>ヘッダーとして送信します。 - インライン画像: 小さなアイコン画像をBase64化し、HTMLやCSSの中に
data:image/png;base64,...（Data URIスキーム）として直接埋め込むことで、HTTPリクエスト回数を減らします。 - JSONやXML内でのバイナリ転送: テキスト形式のAPIデータ内で画像などの添付ファイルを送る際に使用します。
- Torinoa Toolsで試す: Base64 Encode / Decode
URLエンコード（パーセントエンコーディング）の仕組み
URLエンコードとパーセントエンコーディングは、事実上同じものを指します。
インターネットの規格上、URLに使用できる文字（未予約文字）は英数字と一部の記号（-, _, ., ~ など）に限られています。これ以外の文字（日本語、スペース、その他の制御記号）が含まれる場合、それぞれの文字を一度バイト値（通常はUTF-8）に変換した上で、% の後ろに16進数2桁を並べる形式（例：%E6%9D%B1）に変換します。
注意点：encodeURI と encodeURIComponent の違い
JavaScriptなどの処理系には、URLエンコードに2つの異なる方式が用意されています。
encodeURI（URL全体用）::や/、?、&、=といった「URLの構造自体を示す記号」はエンコードしません。日本語やスペースなど、URLとして不正な文字だけをエンコードします。- 用途:
https://example.com/検索?q=東京全体をブラウザで開ける形にしたいとき。 - Torinoa Toolsの「URL Encode / Decode」ツールは、この方式を採用しています。
- 用途:
encodeURIComponent（パラメータ値用）: URLの構造を示す記号も含めて、ほぼすべての記号をエンコードします。- 用途:
q=A&Bのように値に「&」が含まれる場合、そのまま結合するとクエリの境界と誤認されてしまうため、値の部分だけをピンポイントでエンコードするときに使用します。
- 用途:
主な用途
- クエリパラメータの送信: 検索エンジンの検索キーワード（日本語）などをWebフォームからGET送信するとき。
- 日本語URLの標準化: Wikipediaの「
https://ja.wikipedia.org/wiki/東京」のようなURLを、プログラムが安全に認識できる形に変換します。 - Torinoa Toolsで試す: URL Encode / Decode
まとめ：使い分けの判断基準
- 画像ファイルなどのバイナリファイルや、APIトークンなどの構造化データを「プレーンテキスト（ASCII）の文字列」に変えてデータ転送・保存したいとき ➔ Base64
- URL（Webアドレス）の一部として、日本語、スペース、あるいはバグの原因になり得る特殊記号を「Webサーバーが解釈可能な安全なアドレス文字列」にエスケープしたいとき ➔ URLエンコード（パーセントエンコーディング）