Base64エンコード・デコードとは？使い方を解説【無料ツール】

Handy Dev Tools 未分類

画像データをHTMLに埋め込んだり、バイナリデータをテキストとして扱ったり、開発現場でBase64を使う場面は意外と多いですよね。

この記事では、Base64の基本からエンコード・デコードの方法を、ツール・コマンドライン・プログラムの3つの視点から解説します。

Base64とは

概要

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

特徴：

  • 64種類の文字（A-Z, a-z, 0-9, +, /）を使用
  • バイナリデータを安全にテキストとして扱える
  • メールやJSON、URLなどテキストのみの環境で使える

Base64の用途

1. 画像のHTMLへの埋め込み

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..." />

メリット：

  • HTTPリクエストを減らせる
  • 外部ファイルへの依存をなくせる

2. API通信でのバイナリデータ転送

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQKJeLjz9MK..."
}

メリット：

  • JSONでバイナリデータを扱える
  • REST APIで送受信できる

3. メール添付ファイル

MIMEエンコーディングで使用されます。

4. Basic認証

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

重要な注意点

⚠️ Base64は暗号化ではない

Base64はエンコード（符号化）であり、暗号化ではありません。

元データ: "password"
Base64エンコード: "cGFzc3dvcmQ="

簡単にデコードできます：

echo "cGFzc3dvcmQ=" | base64 -d
# 出力: password

用途：

  • ✅ データ形式の変換
  • ❌ セキュリティ保護（暗号化ではない）

📏 データサイズが約1.33倍になる

元データ: 100 KB
Base64エンコード後: 約133 KB

理由：

  • 8ビット（256種類）→ 6ビット（64種類）に変換
  • 3バイトを4文字で表現

方法1：Webツールで変換（最も簡単）

最も手軽な方法は、Webツールを使うことです。

おすすめツール

Base64 エンコード・デコード | Handy Dev Tools
Base64エンコード・デコードツールです。テキストデータをBase64形式にエンコードしたり、Base64形式のデータをデコードしたりできます。最大5120文字までのデータを処理できます。
handy-dev.tools

👆 今すぐ試してみる（無料・登録不要）

使い方

エンコード（テキスト → Base64）：

  1. 「エンコード」タブを選択
  2. テキストを入力
  3. 自動的にBase64に変換される
  4. 「コピー」ボタンでクリップボードにコピー

デコード（Base64 → テキスト）：

  1. 「デコード」タブを選択
  2. Base64文字列を入力
  3. 自動的に元のテキストに変換される
  4. 「コピー」ボタンでコピー

メリット

  • インストール不要
  • ブラウザだけで完結
  • リアルタイム変換
  • エラーチェック機能付き

こんな時に便利

  • 一時的な変換作業
  • コマンドラインに慣れていない
  • 複数人で共有したい

方法2：コマンドラインで変換

継続的に変換作業が必要な場合は、コマンドラインが便利です。

Linux/Mac（base64コマンド）

エンコード

# 文字列をエンコード
echo -n "Hello World" | base64
# 出力: SGVsbG8gV29ybGQ=

# ファイルをエンコード
base64 input.txt > output.txt

# 改行なしでエンコード（macOS）
echo -n "Hello World" | base64

# 改行なしでエンコード（Linux）
echo -n "Hello World" | base64 -w 0

デコード

# 文字列をデコード
echo "SGVsbG8gV29ybGQ=" | base64 -d
# 出力: Hello World

# ファイルをデコード
base64 -d input.txt > output.txt

macOSの注意点：

  • デコードオプションは -D（大文字）
echo "SGVsbG8gV29ybGQ=" | base64 -D

Windows（PowerShell）

エンコード

# 文字列をエンコード
$text = "Hello World"
$bytes = [System.Text.Encoding]::UTF8.GetBytes($text)
$base64 = [Convert]::ToBase64String($bytes)
Write-Output $base64
# 出力: SGVsbG8gV29ybGQ=

# ファイルをエンコード
$bytes = [System.IO.File]::ReadAllBytes("input.txt")
$base64 = [Convert]::ToBase64String($bytes)
[System.IO.File]::WriteAllText("output.txt", $base64)

デコード

# 文字列をデコード
$base64 = "SGVsbG8gV29ybGQ="
$bytes = [Convert]::FromBase64String($base64)
$text = [System.Text.Encoding]::UTF8.GetString($bytes)
Write-Output $text
# 出力: Hello World

# ファイルをデコード
$base64 = [System.IO.File]::ReadAllText("input.txt")
$bytes = [Convert]::FromBase64String($base64)
[System.IO.File]::WriteAllBytes("output.txt", $bytes)

方法3：プログラムで実装

アプリケーション内で変換が必要な場合は、各言語のライブラリを使います。

JavaScript（Node.js）

エンコード

// 文字列をエンコード
const text = "Hello World";
const base64 = Buffer.from(text).toString('base64');
console.log(base64);
// 出力: SGVsbG8gV29ybGQ=

// ファイルをエンコード
const fs = require('fs');
const fileContent = fs.readFileSync('input.txt');
const base64 = fileContent.toString('base64');
fs.writeFileSync('output.txt', base64);

デコード

// 文字列をデコード
const base64 = "SGVsbG8gV29ybGQ=";
const text = Buffer.from(base64, 'base64').toString('utf-8');
console.log(text);
// 出力: Hello World

// ファイルをデコード
const fs = require('fs');
const base64 = fs.readFileSync('input.txt', 'utf-8');
const buffer = Buffer.from(base64, 'base64');
fs.writeFileSync('output.txt', buffer);

JavaScript（ブラウザ）

エンコード

// 文字列をエンコード（ASCII文字のみ）
const text = "Hello World";
const base64 = btoa(text);
console.log(base64);
// 出力: SGVsbG8gV29ybGQ=

日本語を含む場合（UTF-8対応）

モダンな方法（推奨）：

// TextEncoderを使う方法（推奨）
function encodeBase64(text) {
  const encoder = new TextEncoder();
  const uint8Array = encoder.encode(text);
  const binaryString = Array.from(uint8Array, byte => String.fromCharCode(byte)).join('');
  return btoa(binaryString);
}

const text = "こんにちは";
const base64 = encodeBase64(text);
console.log(base64);
// 出力: 44GT44KT44Gr44Gh44Gv

レガシーな方法（非推奨）：

// unescape()は非推奨（Deprecated）
// 古いブラウザのみで使用
const text = "こんにちは";
const base64 = btoa(unescape(encodeURIComponent(text)));
console.log(base64);

注意
unescape() は非推奨（Deprecated）です。モダンなブラウザでは TextEncoder を使用してください。

デコード

// 文字列をデコード（ASCII文字のみ）
const base64 = "SGVsbG8gV29ybGQ=";
const text = atob(base64);
console.log(text);
// 出力: Hello World

日本語を含む場合（UTF-8対応）

モダンな方法（推奨）：

// TextDecoderを使う方法（推奨）
function decodeBase64(base64) {
  const binaryString = atob(base64);
  const uint8Array = Uint8Array.from(binaryString, char => char.charCodeAt(0));
  const decoder = new TextDecoder();
  return decoder.decode(uint8Array);
}

const base64 = "44GT44KT44Gr44Gh44Gv";
const text = decodeBase64(base64);
console.log(text);
// 出力: こんにちは

レガシーな方法（非推奨）：

// escape()は非推奨（Deprecated）
const base64 = "44GT44KT44Gr44Gh44Gv";
const text = decodeURIComponent(escape(atob(base64)));
console.log(text);

注意
escape() は非推奨（Deprecated）です。モダンなブラウザでは TextDecoder を使用してください。

ブラウザ対応状況

TextEncoder / TextDecoder：

  • Chrome 38+
  • Firefox 19+
  • Safari 10.1+
  • Edge 79+

ほぼすべてのモダンブラウザで使用可能です。

レガシーブラウザ（IE11など）をサポートする必要がある場合のみ、unescape()/escape() を使用してください。

Python

エンコード

import base64

# 文字列をエンコード
text = "Hello World"
base64_bytes = base64.b64encode(text.encode('utf-8'))
base64_string = base64_bytes.decode('utf-8')
print(base64_string)
# 出力: SGVsbG8gV29ybGQ=

# ファイルをエンコード
with open('input.txt', 'rb') as f:
    file_content = f.read()
    base64_bytes = base64.b64encode(file_content)

with open('output.txt', 'wb') as f:
    f.write(base64_bytes)

デコード

import base64

# 文字列をデコード
base64_string = "SGVsbG8gV29ybGQ="
base64_bytes = base64_string.encode('utf-8')
text_bytes = base64.b64decode(base64_bytes)
text = text_bytes.decode('utf-8')
print(text)
# 出力: Hello World

# ファイルをデコード
with open('input.txt', 'rb') as f:
    base64_bytes = f.read()
    file_content = base64.b64decode(base64_bytes)

with open('output.txt', 'wb') as f:
    f.write(file_content)

PHP

エンコード

<?php
// 文字列をエンコード
$text = "Hello World";
$base64 = base64_encode($text);
echo $base64;
// 出力: SGVsbG8gV29ybGQ=

// ファイルをエンコード
$fileContent = file_get_contents('input.txt');
$base64 = base64_encode($fileContent);
file_put_contents('output.txt', $base64);
?>

デコード

<?php
// 文字列をデコード
$base64 = "SGVsbG8gV29ybGQ=";
$text = base64_decode($base64);
echo $text;
// 出力: Hello World

// ファイルをデコード
$base64 = file_get_contents('input.txt');
$fileContent = base64_decode($base64);
file_put_contents('output.txt', $fileContent);
?>

実例：よくある使い方

例1：画像をHTMLに埋め込む

手順

  1. 画像ファイルをBase64エンコード
base64 image.png > image.txt
  1. HTMLに埋め込む
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..." />

メリット

  • HTTPリクエストが不要
  • 外部ファイルへの依存がない

デメリット

  • HTMLファイルサイズが大きくなる
  • キャッシュが効きにくい

例2：APIでPDFを送信

JSON例

{
  "filename": "report.pdf",
  "mimeType": "application/pdf",
  "content": "JVBERi0xLjQKJeLjz9MKMSAwIG9iago8PC..."
}

サーバー側（受信）

// Base64デコードしてファイル保存
const buffer = Buffer.from(content, 'base64');
fs.writeFileSync('report.pdf', buffer);

例3：Basic認証のヘッダー生成

手順

  1. ユーザー名とパスワードを結合
username:password
  1. Base64エンコード
echo -n "username:password" | base64
# 出力: dXNlcm5hbWU6cGFzc3dvcmQ=
  1. HTTPヘッダーに設定
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

よくあるエラーと対処法

エラー1：「Invalid character」

原因：

  • Base64文字列に不正な文字が含まれている
  • 改行やスペースが混入している

対処法：

# 改行を削除してからデコード
echo "SGVs bG8g V29y bGQ=" | tr -d ' \n' | base64 -d

エラー2：文字化け

原因：

  • 文字エンコーディングの不一致
  • UTF-8以外のエンコーディング

対処法（JavaScript）：

// UTF-8を明示
const text = Buffer.from(base64, 'base64').toString('utf-8');

エラー3：データが壊れる

原因：

  • Base64文字列の途中で切れている
  • パディング（=）が不足

Base64のパディング：

元データのバイト数を3で割った余りに応じて = を付ける
- 余り0: パディングなし
- 余り1: == を付ける
- 余り2: = を付ける

例:
"Hello" → "SGVsbG8=" （余り2）
"Hi" → "SGk=" （余り1）

ユースケース別の選び方

Webツールを使うべき場合

  • 一時的な変換作業
  • 少量のデータ（〜100KB）
  • チームメンバーと共有したい
  • コマンドラインに慣れていない

コマンドラインを使うべき場合

  • 大量のファイルを一括変換
  • CI/CDパイプラインに組み込む
  • スクリプトで自動化したい
  • 大きなファイル（100MB以上）

プログラムで実装すべき場合

  • アプリケーション内で動的に変換
  • APIでバイナリデータを送受信
  • リアルタイム変換が必要
  • ユーザーからのアップロードを処理

セキュリティ上の注意

❌ 機密情報をBase64だけで保護しない

悪い例：

// パスワードをBase64エンコードして保存（危険）
const password = "secret123";
const encoded = btoa(password);
localStorage.setItem('password', encoded);

なぜ危険か：

  • Base64は簡単にデコードできる
  • 暗号化ではない

良い例：

// ハッシュ化やAES暗号化を使う
const bcrypt = require('bcrypt');
const hash = await bcrypt.hash(password, 10);

✅ 適切な使い方

Base64を使うべき場面：

  • データ形式の変換（バイナリ→テキスト）
  • API通信でのバイナリデータ転送
  • HTMLへの画像埋め込み

使うべきでない場面：

  • パスワードの保存
  • 機密情報の保護
  • データの暗号化

📦 その他の開発ツールもチェック

Handy Dev Toolsでは、他にも50種類以上の開発ツールを提供しています。

👉 全ツール一覧を見る

人気のツール

すべて無料・登録不要・ブラウザで完結です。

まとめ

Base64エンコード・デコードの方法を3つ紹介しました：

  1. Webツール：最も簡単、インストール不要
  2. コマンドライン：大量処理、自動化に向いている
  3. プログラム：アプリケーション内で動的に変換

重要なポイント：

  • Base64は暗号化ではない
  • データサイズが約1.33倍になる
  • セキュリティ保護には不向き

手軽に変換したい場合は、Webツールが便利です。

Base64 エンコード・デコード | Handy Dev Tools
Base64エンコード・デコードツールです。テキストデータをBase64形式にエンコードしたり、Base64形式のデータをデコードしたりできます。最大5120文字までのデータを処理できます。
handy-dev.tools

ブラウザだけで動作し、データはサーバーに送信されないので安心して使えます。

この記事が役に立ったら、ぜひツールも使ってみてください！

この記事はZennにも投稿しています

https://zenn.dev/redwing/articles/69a881469fc481
zenn.dev
スポンサーリンク
タイトルとURLをコピーしました