Base64
Base64とURLエンコードの違い｜混同して壊した話
2025-11-23
:::note ※Base64とURLエンコードで迷っている人向けの「判断材料」記事です :::
結論（私の判断基準）
- バイナリをテキストにしたい → Base64
- URLに日本語を含めたい → URLエンコード
- Base64をURLに含めたい → Base64 → URLエンコード（両方必要）
私はこれを混同して、データを壊したことがある。
🚀 Base64変換 → Base64エンコーダー
私が混同して壊した話
Base64文字列をURLパラメータに含めた。
?data=abc+def/ghi
動かなかった。
原因：Base64には + と / が含まれる。これらはURLで特別な意味を持つ。+ はスペース、/ はパス区切りとして解釈された。
Base64をURLに含めるなら、さらにURLエンコードが必要。
// ✅ 正しい方法
const param = encodeURIComponent(btoa("データ"));
何が違うのか
| Base64 | URLエンコード | |
|---|---|---|
| 目的 | バイナリ→テキスト変換 | URL内で安全に文字を送る |
| 変換対象 | 任意のバイナリ | 文字列 |
| 出力 | A-Z, a-z, 0-9, +, /, = | 元の文字 or %XX |
| サイズ | 約33%増 | 変換文字のみ3倍 |
**目的が違う。**Base64は「バイナリをテキストにする」。URLエンコードは「URLで安全に送る」。
Base64を使う場面
- 画像をHTMLに埋め込む
- バイナリをJSONで送る
- メール添付（MIME）
- 認証トークンの文字列化
「バイナリをテキスト形式で扱いたい」ときに使う。
URLエンコードを使う場面
- URLパラメータに日本語を含める
- フォームデータの送信
- クエリ文字列の構築
「URLとして安全に送りたい」ときに使う。
https://example.com/search?q=%E6%A4%9C%E7%B4%A2
組み合わせパターン
| 場面 | 処理 |
|---|---|
| 画像をHTML埋め込み | Base64のみ |
| URLパラメータに日本語 | URLエンコードのみ |
| Base64をURLに含める | Base64 → URLエンコード |
| バイナリをURLで送る | Base64 → URLエンコード |
**Base64をURLに含めるなら、両方必要。**私はこれを忘れて壊した。
Base64URL（補足）
URLセーフなBase64の亜種。+ → -、/ → _ に置換したもの。
JWTなどで使われる。これを使えばURLエンコード不要。
迷ったときの判断
| 迷い | 私の判断 |
|---|---|
| どっちを使うか | バイナリならBase64、URLならURLエンコード |
| Base64をURLに含めるか | 含めるならURLエンコードも必要 |
| Base64URLを使うか | JWTなど仕様で決まっているなら使う |
この記事で解決しない場合
- Base64でエラーが出た → Base64でよくあるエラーと対処法
- Base64の思想を知りたい → Base64は本来、使うべき技術ではない
Base64とURLエンコードは目的が違う。混同すると壊れる。