Base64エンコーディングのすべて

「この画像をAPIでどうやって送るの？」 「このバイナリデータをJSONにどうやって入れるの？」

答えはBase64です。

このガイドでは、Base64の原理から実践活用まで完全に解説します。

---

Base64とは？

Base64はバイナリデータをテキストに変換するエンコーディング方式です。

なぜ必要か？

特徴

• 64文字使用: A-Z, a-z, 0-9, +, /（標準）
• サイズ増加: 元のデータより約33%増加
• 可逆的: エンコード ↔ デコード完全復元
• 暗号化ではない: 誰でもデコード可能

---

Base64の原理

エンコード処理

元の文字列: "Man"

1. ASCII変換
   M = 77 = 01001101
   a = 97 = 01100001
   n = 110 = 01101110

2. 6ビットずつ分割
   010011 | 010110 | 000101 | 101110
      19  |   22   |    5   |   46

3. Base64文字に変換 (A=0, B=1, ... Z=25, a=26, ...)
   19 = T
   22 = W
   5  = F
   46 = u

結果: "TWFu"

Base64文字表

インデックス: 文字
0-25:   A-Z
26-51:  a-z
52-61:  0-9
62:     +
63:     /
パディング:   =

パディング (=)

元の長さが3で割り切れない場合、パディング追加

"M"   → "TQ=="  (2つのパディング)
"Ma"  → "TWE="  (1つのパディング)
"Man" → "TWFu"  (パディングなし)

---

言語別実装

JavaScript（ブラウザ）

// エンコード
const encoded = btoa('Hello, World!');
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// デコード
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');
console.log(decoded); // "Hello, World!"

// Unicode処理（日本語など）
function encodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(
    /%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode(parseInt(p1, 16))
  ));
}

function decodeUnicode(str) {
  return decodeURIComponent(
    Array.from(atob(str), c =>
      '%' + c.charCodeAt(0).toString(16).padStart(2, '0')
    ).join('')
  );
}

// Unicodeテスト
const japanese = 'こんにちは';
const encodedJapanese = encodeUnicode(japanese);
console.log(encodedJapanese);
console.log(decodeUnicode(encodedJapanese)); // "こんにちは"

Node.js

// Buffer使用
const encoded = Buffer.from('Hello, World!').toString('base64');
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

const decoded = Buffer.from('SGVsbG8sIFdvcmxkIQ==', 'base64').toString('utf-8');
console.log(decoded); // "Hello, World!"

// ファイルエンコード
const fs = require('fs');

const imageBuffer = fs.readFileSync('image.png');
const base64Image = imageBuffer.toString('base64');
console.log(base64Image.substring(0, 50) + '...');

Python

import base64

# エンコード
encoded = base64.b64encode(b'Hello, World!').decode('utf-8')
print(encoded)  # "SGVsbG8sIFdvcmxkIQ=="

# デコード
decoded = base64.b64decode('SGVsbG8sIFdvcmxkIQ==').decode('utf-8')
print(decoded)  # "Hello, World!"

# Unicode（日本語）
japanese = 'こんにちは'
encoded_japanese = base64.b64encode(japanese.encode('utf-8')).decode('utf-8')
print(encoded_japanese)

# ファイルエンコード
with open('image.png', 'rb') as f:
    base64_image = base64.b64encode(f.read()).decode('utf-8')

Go

package main

import (
    "encoding/base64"
    "fmt"
)

func main() {
    // エンコード
    data := "Hello, World!"
    encoded := base64.StdEncoding.EncodeToString([]byte(data))
    fmt.Println(encoded) // "SGVsbG8sIFdvcmxkIQ=="

    // デコード
    decoded, _ := base64.StdEncoding.DecodeString(encoded)
    fmt.Println(string(decoded)) // "Hello, World!"

    // URL安全なBase64
    urlSafe := base64.URLEncoding.EncodeToString([]byte(data))
    fmt.Println(urlSafe)
}

---

実践活用

1. 画像インライン挿入（Data URL）

<!-- HTMLに直接画像を挿入 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="1x1 red pixel">

// ファイル → Base64 Data URL
function fileToDataUrl(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 使用
const file = document.getElementById('fileInput').files[0];
const dataUrl = await fileToDataUrl(file);
document.getElementById('preview').src = dataUrl;

2. APIで画像送信

// クライアント
async function uploadImage(file) {
  const base64 = await fileToBase64(file);

  const response = await fetch('/api/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      filename: file.name,
      contentType: file.type,
      data: base64,
    }),
  });

  return response.json();
}

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      // data:image/png;base64, プレフィックスを削除
      const base64 = reader.result.split(',')[1];
      resolve(base64);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// サーバー (Node.js)
app.post('/api/upload', (req, res) => {
  const { filename, contentType, data } = req.body;

  // Base64 → Buffer → ファイル保存
  const buffer = Buffer.from(data, 'base64');
  fs.writeFileSync(`uploads/${filename}`, buffer);

  res.json({ success: true, filename });
});

3. JWTトークン

// JWT = Header.Payload.Signature (各Base64URLエンコード)

const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

// Payloadデコード
const payload = token.split('.')[1];
const decoded = JSON.parse(atob(payload));
console.log(decoded);
// { sub: "1234567890", name: "John Doe", iat: 1516239022 }

4. Basic認証

// HTTP Basic Authentication
const username = 'user';
const password = 'password';

const credentials = btoa(`${username}:${password}`);

fetch('/api/protected', {
  headers: {
    'Authorization': `Basic ${credentials}`,
  },
});

// ヘッダー: Authorization: Basic dXNlcjpwYXNzd29yZA==

5. メール添付ファイル（MIME）

Content-Type: application/pdf
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="document.pdf"

JVBERi0xLjQKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIK
Pj4KZW5kb2JqCjIgMCBvYmoKPDwKL1R5cGUgL1BhZ2VzCi9LaWRzIFszIDAgUl0K
...

---

Base64の変形

URL安全Base64

// URL安全エンコード
function toUrlSafeBase64(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

// URL安全デコード
function fromUrlSafeBase64(str) {
  // パディング復元
  const pad = str.length % 4;
  const padded = pad ? str + '='.repeat(4 - pad) : str;

  return atob(
    padded
      .replace(/-/g, '+')
      .replace(/_/g, '/')
  );
}

Base64 vs Base32 vs Base16

---

注意事項

1. 暗号化ではない

// セキュリティ目的で使用してはいけない
const password = btoa('mySecretPassword');
// 誰でもatob()で復元可能！

// 暗号化が必要な場合は別途暗号化後Base64
const encrypted = await encryptAES(data, key);
const encoded = btoa(encrypted);

2. サイズ増加

// 元: 1MB画像
// Base64: ~1.33MB (33%増加)

// 大容量ファイルは直接アップロードが効率的
// FormData + multipart/form-dataを使用

3. Unicode処理

// ブラウザのbtoa()はLatin-1のみサポート
btoa('日本語'); // Error: The string contains characters outside of the Latin1 range

// Unicode処理が必要
function encodeUnicode(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

4. 改行

// 一部のシステムは76文字ごとに改行を追加
// MIME標準: 76文字改行

// 改行を削除
const cleaned = base64String.replace(/[\r\n]/g, '');

---

パフォーマンス最適化

ストリーミングエンコード

// 大容量ファイルをチャンクで処理
async function* encodeFileInChunks(file, chunkSize = 1024 * 1024) {
  const reader = file.stream().getReader();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // チャンク単位でBase64エンコード
    yield Buffer.from(value).toString('base64');
  }
}

Web Worker活用

// worker.js
self.onmessage = function(e) {
  const { action, data } = e.data;

  if (action === 'encode') {
    const result = btoa(data);
    self.postMessage({ result });
  }
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ action: 'encode', data: largeString });
worker.onmessage = (e) => console.log(e.data.result);

---

デバッグツール

Base64 Encoder/Decoder

1. テキストまたはファイルを入力
2. エンコード/デコードボタンをクリック
3. 結果をコピー

CLI

# エンコード
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==

# デコード
echo "SGVsbG8sIFdvcmxkIQ==" | base64 -d
# Hello, World!

# ファイルエンコード
base64 image.png > image.txt

# ファイルデコード
base64 -d image.txt > restored.png

---

FAQ

Q1: Base64はなぜ33%大きくなるのですか？

A: 3バイト（24ビット）を4文字（4×6=24ビット）で表現するためです。

• 3バイト → 4文字
• 増加率: (4-3)/3 = 33%

Q2: パディング(=)はなぜ必要ですか？

A: デコーダーが元の長さを知るために必要です。パディングの数で最後のバイト数を推測します。

Q3: Base64URLはいつ使いますか？

A: URLやファイル名に使用する場合です。標準Base64の+と/はURLで特別な意味を持つため、-と_に置き換えます。

Q4: 画像インライン挿入の長所短所は？

A:

• 長所: HTTPリクエスト削減、キャッシュの簡素化
• 短所: HTMLサイズ増加、個別画像キャッシュ不可
• 推奨: 小さいアイコン（2KB以下）にのみ使用

Q5: Base64文字列かどうかをどう確認しますか？

A: 正規表現で形式を検査し、デコードを試みます:

function isBase64(str) {
  const regex = /^[A-Za-z0-9+/]*={0,2}$/;
  if (!regex.test(str)) return false;

  try {
    atob(str);
    return true;
  } catch {
    return false;
  }
}

---

まとめ

Base64の要点:

1. 用途: バイナリ → テキスト変換
2. サイズ: 元のデータより33%増加
3. セキュリティ: 暗号化ではない（誰でもデコード可能）
4. 変形: URL安全は-と_を使用
5. 活用: Data URL、JWT、Basic Auth、MIME

---

関連ツール