Base64エンコードとは？画像・データをテキスト化する仕組みと用途
Base64エンコード・デコードの仕組みを図解で解説。画像のData URL埋め込み、メール添付、JWT認証など実際の使用例と注意点を網羅した開発者向け入門ガイド。
バイナリデータをテキストで扱うための変換技術
Webアプリを開発していると「Base64でエンコードして送信する」「画像をBase64に変換してHTMLに埋め込む」という場面によく出会います。しかし、「なぜわざわざテキストに変換する必要があるの？」と疑問に思ったことはないでしょうか。
Base64は、バイナリデータ（画像・音声・PDFなど）を、テキストとして安全に扱える64種類の文字（A-Z、a-z、0-9、+、/）に変換するエンコーディング方式です。インターネットの通信プロトコルの多くはテキストを前提として設計されているため、バイナリデータを安全に送受信するためにBase64が使われます。
Base64エンコード/デコードテキストやファイルをBase64に変換・復元（data URI対応）Base64の仕組み
なぜ64種類の文字を使うのか
「64」という数字はコンピュータと深い関係があります。2の6乗が64であるため、6ビットのデータを1文字で表現できます。これにより、8ビット（1バイト）×3バイト＝24ビットを、6ビット×4文字に変換できます。
つまり、Base64は3バイトのデータを4文字のテキストに変換します。
変換のステップ
- 元のバイナリデータを3バイト（24ビット）ずつのブロックに分割
- 各ブロックを6ビット×4つのグループに分割
- 各6ビットの値（0〜63）をBase64の変換テーブルに従って文字に変換
Base64変換テーブル（一部）:
| 値 | 文字 | 値 | 文字 | 値 | 文字 |
|---|---|---|---|---|---|
| 0 | A | 26 | a | 52 | 0 |
| 1 | B | 27 | b | 53 | 1 |
| 25 | Z | 51 | z | 63 | / |
3バイトに満たない端数が生じた場合は=（パディング）が使われます。
エンコード後はサイズが約33%増加する
Base64エンコードすると、元のバイナリデータに比べてデータ量が約**4/3倍（約33%増）**になります。これは3バイトを4文字に変換するためです。大きなファイルをBase64化する際は、このサイズ増加を考慮する必要があります。
Base64の主な使用場面
1. HTMLへの画像埋め込み（Data URL）
HTMLやCSSでdata:image/png;base64,iVBOR...という形式を見たことがある方も多いでしょう。これはBase64でエンコードした画像データを直接HTML/CSSに書き込む方法です。
<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">メリット: 画像ファイルを別途サーバーに置く必要がなく、HTMLファイル1つに完結する。HTTPリクエスト数を減らせる。 デメリット: ファイルサイズが約33%増加する。ブラウザキャッシュが効かない。大きな画像には不向き。
2. メールの添付ファイル（MIME）
メールプロトコル（SMTP）は元々テキストのみを扱うよう設計されていました。添付ファイルを送るためにMIME（Multipurpose Internet Mail Extensions）という仕様が作られ、その中でBase64が使われています。
メーラーが「添付ファイルを送信」する際に裏側でBase64エンコードを行い、受信側でデコードして元のファイルに戻しています。
3. JWT（JSON Web Token）
APIの認証でよく使われるJWTは、ヘッダー・ペイロード・署名の3部分がBase64URLエンコード（通常のBase64の+を-、/を_に置換したもの）されています。
JWTの形式: xxxxx.yyyyy.zzzzz（ドット区切りの3つのBase64URL文字列）
JWTはBase64デコードするだけで中身が見えるため、秘密情報をペイロードに入れてはいけません。署名は改ざん検知のためのものであり、暗号化ではありません。
4. Webフォントの埋め込み
CSSにフォントファイルをBase64で埋め込むことで、外部フォントのHTTPリクエストを削減し、フォントの読み込みを最適化する手法があります。ただし、ファイルサイズが増加するためトレードオフがあります。
5. Basic認証ヘッダー
HTTPのBasic認証では、ユーザー名:パスワードをBase64エンコードしてAuthorizationヘッダーに含めて送信します。
Authorization: Basic dXNlcjpwYXNzd29yZA==重要: Base64は暗号化ではなくエンコードです。HTTPS（TLS）での通信と組み合わせることが必須です。HTTP通信でBasic認証を使うと、パスワードは簡単にデコードされてしまいます。
Base64エンコード/デコードテキストやファイルをBase64に変換・復元（data URI対応）Base64とBase64URLの違い
標準的なBase64では+と/が使われますが、これらの文字はURLやファイル名では特別な意味を持つため、URLやファイル名での使用に問題が生じます。
Base64URLはこの問題を解決するために:
+→-（ハイフン）/→_（アンダースコア）- パディング
=を省略
に変更したバリアントです。JWTやOAuthなどのWeb認証プロトコルで広く使われています。
エンコード・デコードの使い方
JavaScriptでの操作
ブラウザのJavaScriptでは標準関数が使えます：
// エンコード（文字列 → Base64）const encoded = btoa('Hello, World!');// 結果: "SGVsbG8sIFdvcmxkIQ=="// デコード（Base64 → 文字列）const decoded = atob('SGVsbG8sIFdvcmxkIQ==');// 結果: "Hello, World!"注意: btoa()/atob()は日本語などのマルチバイト文字を直接扱えません。日本語を含む場合はUTF-8に変換してから処理する必要があります。
// 日本語などマルチバイト文字を扱う場合function unicodeToBase64(str) { const encoder = new TextEncoder(); const utf8Bytes = encoder.encode(str); const binaryString = String.fromCodePoint(...utf8Bytes); return btoa(binaryString);}function base64ToUnicode(base64) { const binaryString = atob(base64); const bytes = Uint8Array.from(binaryString, c => c.charCodeAt(0)); const decoder = new TextDecoder(); return decoder.decode(bytes);}const encodedJa = unicodeToBase64('こんにちは');// 結果: "44GT44KT44Gr44Gh44Gv"const decodedJa = base64ToUnicode(encodedJa);// 結果: "こんにちは"Node.jsでの操作
// エンコードconst encoded = Buffer.from('Hello, World!').toString('base64');// デコードconst decoded = Buffer.from('SGVsbG8sIFdvcmxkIQ==', 'base64').toString('utf-8');コマンドラインでの操作（macOS/Linux）
# エンコードecho -n 'Hello' | base64# 結果: SGVsbG8=# デコードecho 'SGVsbG8=' | base64 --decode# 結果: HelloBase64を使う際の注意点
暗号化ではない
Base64は暗号化（Encryption）ではなく、エンコード（Encoding）です。誰でも簡単にデコードできるため、機密情報の保護には使えません。パスワードやAPIキーなどの秘密情報を保護するには、適切な暗号化アルゴリズムを使用してください。
サイズ増加を考慮する
大きなファイルをBase64化するとサイズが約33%増えます。大量の画像をBase64で埋め込むとHTMLが肥大化し、パフォーマンスに影響します。用途に応じて通常のファイル参照との使い分けを検討しましょう。
改行コードに注意
一部の実装では、Base64エンコード後の文字列が76文字ごとに改行（ ）を挿入する場合があります。APIリクエストなどで送信する際は、改行なしの1行文字列として扱うことを確認してください。
よくある質問（FAQ）
Q1. Base64でエンコードしたデータは安全ですか？ A. Base64はエンコード（符号化）であり、暗号化ではありません。デコードは誰でも行えるため、機密情報の保護には使えません。Base64は、バイナリデータをテキストとして送受信できるようにするための変換技術です。通信の機密性を確保するにはHTTPS（TLS暗号化）を使用し、データの機密性はAESなどの適切な暗号化アルゴリズムで保護してください。
Q2. Base64エンコードした文字列の末尾に=や==がついているのはなぜですか？
A. Base64は3バイトを4文字に変換するアルゴリズムのため、元データのバイト数が3の倍数でない場合に端数が生じます。この端数を補うために、=（パディング文字）が1〜2個追加されます。=が2つなら元データが「3の倍数-1バイト」、=が1つなら「3の倍数-2バイト」であることを示しています。パディングを省略するBase64URLなどの実装もあります。
Q3. 日本語テキストをBase64エンコードする際の注意点は？
A. JavaScriptのbtoa()は文字コードが0〜255の範囲に収まるLatin-1文字しか扱えないため、日本語などのマルチバイト文字を直接エンコードするとエラーが発生します。TextEncoderを使ってUTF-8バイト列に変換してからBase64エンコードするか、専用のライブラリを使用する必要があります。Node.jsのBuffer.from(str, 'utf-8').toString('base64')なら正しく処理できます。
まとめ：用途を理解して適切にBase64を活用しよう
Base64は、バイナリデータをテキスト環境で安全に扱うための重要なエンコーディング技術です。
- バイナリを64種類の文字に変換するエンコード方式
- データサイズは約33%増加する
- HTMLへの画像埋め込み・メール添付・JWT認証などで使われる
- 暗号化ではないため、機密情報の保護には使えない
- URLで使う場合はBase64URL（
-と_を使用）が適切
文字列や画像ファイルを簡単にBase64形式に変換・復元できます。開発作業やデータ確認に積極的に活用してください。
関連記事
