Base64とは？仕組みから使いどころ

5 min 84 views
base64

Web制作やプログラミングをしていると「Base64（ベース64）」という言葉を必ず見かけます。
画像を1行の文字列に変換したり、API通信で安全にデータを送ったりなど、
幅広い場面で使われるとても重要なエンコード方式です。

この記事では、Base64 の基礎から仕組み、メリット・デメリット、よくある利用シーン、実際のコード例までをまとめて解説します。

目次

Base64とは何か？

Base64とは、バイナリデータを「A〜Z」「a〜z」「0〜9」「+」「/」の64種類の文字で表現するエンコード方式です。

本来コンピュータが扱うデータはバイナリ（0と1の並び）。
しかし、バイナリのままだと以下の問題があります：

  • メールやURL、JSONなど「バイナリ不可」の仕組みで扱えない
  • 通信中に壊れやすい
  • 特殊文字が誤解釈される

そこで、安全にテキストとして扱える形に変換するのが Base64 の役割です。

なぜ64種類なのか？

Base64という名前の通り、以下の64種類の文字を使います。

  • A〜Z（26）
  • a〜z（26）
  • 0〜9（10）
  • +（1）
  • /（1）

合計 64種類 → “Base64” という名前に。
どの文字も ASCIIで安全に扱えるため、メールやWeb APIでも問題なく使えます。

Base64の仕組み

Base64の仕組みをざっくり説明すると次のようになります。

　1. 3バイトずつ読み込む（24ビット）

例：
01001010 01100001 01110110（＝”Jav” の3文字分）

　2. 6ビットずつ4つに分割する

24ビット ÷ 6 = 4つに分割
例：
010010 100110 000101 110110

　3. 6ビットを0〜63の数字として扱い、文字に変換する

その数字を64種類の文字に対応させて変換する → Base64文字列が完成。

Base64で変換するとどんなふうになるの？

例：
“Hello” → Base64 → SGVsbG8=

末尾の = は「パディング」と呼ばれ、桁数調整のために付く記号です。

どんな場面で使われているの？

Base64はWeb制作・開発で頻繁に使われます。

　① 画像やアイコンをHTMLやCSSに直接埋め込む

例：
<img src="data:image/png;base64,iVBORw0KGgoAAAANS…">

→ 外部ファイルの読み込みが不要になりリクエスト減少
→ ただしサイズはやや増える

　② APIでデータを送るとき

画像やPDFなどバイナリは直接送れないことがあるため、Base64で文字列化して送信。

　③ JWT（JSON Web Token）の内部でも使われる

認証やログイン周りの実装で必ず登場。

　④ メール添付ファイル

メールはテキストしか扱えないため、添付ファイルはBase64でエンコードされて送られる。

Base64のメリット

  • テキスト扱いできるため安全
  • URL・HTML・JSON・メールなど互換性が高い
  • 通信でデータが壊れにくい

デメリット

  • データサイズが約 33% 増える（元バイトの 1.33 倍）
  • 画像をBase64で埋め込むと キャッシュ効率が悪化することも
  • 読みづらい＆管理しづらい

画像をBase64に変換する例

　JavaScript

const file = document.querySelector("input[type='file']").files[0];
const reader = new FileReader();

reader.onload = () => {
  console.log(reader.result); // Base64の文字列
};

reader.readAsDataURL(file);

　Python

import base64

with open("sample.png", "rb") as f:
    enc = base64.b64encode(f.read())
    print(enc.decode())

Base64をデコードする例（文字列を元に戻す）

　JavaScript

const decoded = atob("SGVsbG8=");
console.log(decoded); // Hello

　Python

import base64
print(base64.b64decode("SGVsbG8=").decode())

　Base64とURL Safe Base64の違い（重要）

通常のBase64には + と / が含まれます。

しかし、URLでは + や / が特別な意味を持つため、URL-safe版が存在します：

通常URL-Safe
+-
/_

JWT などは URL Safe Base64 を使っています。

Base64を使うべき場面・避けるべき場面

　✔ 使うべき場面

  • APIで画像を送る
  • ローカルでデータを埋め込む小規模UI
  • メール添付
  • JWT、認証周りの実装

　✖ 避けるべき場面

  • 画像ファイル（JPEG/PNG/SVG）が大きい場合
    → データサイズが膨らみ、読み込みが遅くなる
    → キャッシュできないケースが増える

静的ファイルとして配信した方が高速です。

まとめ

Base64は、データを安全に文字列として扱えるようにするための重要なエンコード方式です。
Web制作・アプリ開発・API通信・メールなど、あらゆる場面で活躍します。

ただし サイズ増加 というデメリットもあるため、用途に合わせて使い分けることが大切です。

  • バイナリ → テキスト化する技術
  • 画像やPDFなどを安全に転送できる
  • JWT・API・メールなど幅広く使われる
  • URL-Safe Base64 も存在する
  • 使いすぎはパフォーマンス低下の原因にも

必要なところで賢く活用することで、より安定したデータ処理ができるようになります。

関連

Web関連の規格と技術＋API基礎｜HTML5プロフェッショナル認定試験対策

関連

XMLサイトマップとは？検索エンジンに正しく理解されるための設計と運用ガイド

【補足記事】Base64とURLエンコードの違い

Base64 の記事を読んでいると、ほぼ必ず「え、URLエンコードと何が違うの？」という疑問が出てきます。


どちらも「文字を変換する技術」なので混同されがちですが、目的・使う場面・変換ルールがまったく違うため、この補足で整理しておくと理解が一気に深まります。

Base64とURLエンコードの役割の違い

　Base64

バイナリデータを “安全なテキスト形式” に変換する仕組み

用途：

  • 画像データ → 文字列化
  • APIで画像/PDFを送る
  • JWTの内部データ
  • メール添付のデータ

まとめると、
「データそのものを安全にテキスト化する」のが目的。

　URLエンコード

URLの中で使えない文字を “安全な記号表現” に置き換える仕組み

例：URLにスペースは入れられない → %20 にする

用途：

  • URLのパラメータ
  • クエリ文字列
  • フォーム送信（application/x-www-form-urlencoded）

まとめると、
「URLとして誤動作しないようにする」のが目的。

変換される文字の違い

　Base64

使用する文字：
A–Z a–z 0–9 + / と =（パディング）

例：
Hello → SGVsbG8=

バイナリをテキストとして安全に扱うための64種類の文字セットです。

　URLエンコード

% で始まる16進数に変換されます。

例：
Hello World! → Hello%20World%21

  • スペース → %20
  • ! → %21
  • 日本語 → UTF-8のバイトを16進化

初心者が混乱するポイント：Base64は “暗号化ではない”

似ているのでよく誤解されますが、Base64は情報を隠す技術（暗号化）ではありません。

　✔ Base64

ただのデータ変換（エンコード）

→ 表示が難しいデータを、扱いやすい文字に変換しているだけ
→ セキュリティ目的では絶対に使えない

　✔ URLエンコード

こちらも暗号化ではありません。

→ URL用に文字を変換しているだけ

どちらも「データを安全に送るための準備」に過ぎない点を理解しておくことが大事です。

実務でよくある混同ケース

　① 「Base64をURLにそのまま載せると壊れる」問題

Base64には + と / が含まれます。

URLではこれらが特別な意味を持つため、
URLパラメータに載せると誤動作することがあります。

そのため、実務ではこうします：

  • Base64をさらに URLエンコード する
    または
  • +→-、/→_ の URL Safe Base64 を使う（JWTなど）

　② APIで画像を送るときの混乱

APIは通常文字列しか送れないため
Base64で画像をテキスト化
→ JSONに入れる
→ REST APIで送る

ここでさらに URLパラメータで送る場合は
Base64 → URLエンコード の二段階が必要です。

実務レベルでの使い分け（最重要）

項目Base64URLエンコード
目的バイナリ → テキスト変換URLの安全性確保
対象画像・PDF・バイナリURLに含まれる文字全般
主な用途API, JWT, メール添付クエリパラメータ, URL全般
形式A–Z, a–z, 0–9, +, /, =% + 16進数
暗号化？✖✖

例で理解する：同じデータをそれぞれで変換すると？

元データ：
Hello World!

　✔ Base64

SGVsbG8gV29ybGQh

（バイトをまとめてエンコード → 全く別の見た目になる）

　✔ URLエンコード

Hello%20World%21

（記号やスペースだけを16進数に変換）

一目で違いがわかるはずです。

まとめ：Base64とURLエンコードは全く別物

  • Base64 → データを丸ごとテキスト化する技術
  • URLエンコード → URLの中で安全に使うための変換
  • 目的も、対象も、使う場面も違う
  • APIやJWTではBase64が必須
  • クエリパラメータではURLエンコードが必須
  • 「Base64は暗号化」と誤解しないことが重要

メイン記事とあわせて読むことで、データと文字列の扱い方がしっかり理解できるようになります。

関連

URL正規化とは？SEO評価を守るための「URL統一」完全ガイド

<PREV
Linuxインストールの全体像をつかもう
NEXT>
Linuxのパッケージ管理について学ぼう｜Debianパッケージ・RPMパッケージ・仮想化の基本をまとめて理解する
関連記事