JavaScript 逆引き集 | Base64 エンコード／デコード

JavaScript JavaScript
スポンサーリンク

Base64 エンコード／デコード — btoa(str) / atob(b64)

JavaScript には文字列を Base64 形式に変換するための関数が標準で用意されています。
Base64 は「バイナリデータや特殊文字を安全に文字列として扱う」ためのエンコード方式です。画像やテキストをデータURLにしたり、簡易的にデータを保存・送信するときに使われます。

基本のコード例

// エンコード（文字列 → Base64）
const str = "Hello World!";
const encoded = btoa(str);
console.log(encoded); // "SGVsbG8gV29ybGQh"

// デコード（Base64 → 文字列）
const decoded = atob(encoded);
console.log(decoded); // "Hello World!"
JavaScript
  • btoa(str): 文字列を Base64 に変換。
  • atob(b64): Base64 を元の文字列に戻す。

注意点（UTF-8文字列の場合）

btoa / atob は ASCII（英数字や記号）専用。日本語や絵文字などの UTF-8文字列 を直接渡すとエラーや文字化けになります。
→ 対策: encodeURIComponent / decodeURIComponent を組み合わせて UTF-8 を安全に処理します。

UTF-8対応のラッパー関数

function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function fromBase64(b64) {
  return decodeURIComponent(escape(atob(b64)));
}

const original = "こんにちは世界🌏";
const encoded = toBase64(original);
const decoded = fromBase64(encoded);

console.log(encoded); // "44GT44KT44Gr44Gh44Gv5LiW55WM8J+Mjw=="
console.log(decoded); // "こんにちは世界🌏"
JavaScript

よく使うテンプレート集

画像をBase64に変換（DataURL）

const img = document.getElementById("myImg");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);

const dataURL = canvas.toDataURL("image/png");
console.log(dataURL); // "data:image/png;base64,...."
JavaScript

JSONデータをBase64に変換

const obj = { user: "Aki", age: 20 };
const json = JSON.stringify(obj);
const b64 = btoa(json);
console.log(b64);

const back = JSON.parse(atob(b64));
console.log(back); // { user: "Aki", age: 20 }
JavaScript

HTTPヘッダに安全に埋め込む

const token = "user:password";
const auth = "Basic " + btoa(token);
console.log(auth); // "Basic dXNlcjpwYXNzd29yZA=="
JavaScript

例題: 簡易的な「暗号化」風メモ帳

<textarea id="memo">秘密のメモ</textarea>
<button id="save">保存</button>
<button id="load">復元</button>
<div id="out"></div>

<script>
  let storage = "";

  document.getElementById("save").addEventListener("click", () => {
    const txt = document.getElementById("memo").value;
    storage = btoa(unescape(encodeURIComponent(txt))); // UTF-8対応
    alert("Base64で保存しました！");
  });

  document.getElementById("load").addEventListener("click", () => {
    const decoded = decodeURIComponent(escape(atob(storage)));
    document.getElementById("out").textContent = decoded;
  });
</script>
HTML
  • 効果: 入力したメモを Base64 で保存し、復元ボタンで元に戻せる。

実務でのコツ

  • ASCII専用: 日本語や絵文字は直接渡さず、UTF-8対応ラッパーを使う。
  • 用途: データURL、HTTP認証、簡易的なデータ保存など。
  • セキュリティ: Base64は暗号化ではなく「文字列変換」。安全性はないので秘密情報の保護には不向き。
  • 長さ: Base64は元データより約33%長くなる。大きなファイルには不向き。

ありがちなハマりポイントと対策

  • 日本語が文字化け:
    • 対策: encodeURIComponent と組み合わせる。
  • 暗号化と誤解:
    • 対策: Base64は「変換」であり「暗号化」ではない。
  • サイズが大きくなる:
    • 対策: 大容量データには使わず、ファイル転送は別の方法を。

練習問題（コピー＆ペースト変換ツール）

<input id="txt" placeholder="文字を入力">
<button id="enc">エンコード</button>
<button id="dec">デコード</button>
<div id="out"></div>

<script>
  const out = document.getElementById("out");

  document.getElementById("enc").addEventListener("click", () => {
    const str = document.getElementById("txt").value;
    out.textContent = btoa(unescape(encodeURIComponent(str)));
  });

  document.getElementById("dec").addEventListener("click", () => {
    const str = document.getElementById("txt").value;
    out.textContent = decodeURIComponent(escape(atob(str)));
  });
</script>
HTML
  • 効果: 入力した文字を Base64 に変換したり、逆に戻したりできる。

直感的な指針

  • btoa = 文字列を Base64 に変換。
  • atob = Base64 を元に戻す。
  • 日本語などは encodeURIComponent / decodeURIComponent を組み合わせる。
  • Base64は「安全な文字列化」であって「暗号化」ではない。

これを覚えれば「日本語を含む文字列を安全にURLやHTTPヘッダに埋め込む」「画像やJSONを文字列化する」といった場面で安心して使えます。

スポンサーリンク
タイトルとURLをコピーしました