JavaScriptでのBase64（btoa/atob）

JavaScriptにはBase64用の組み込みグローバル関数が2つあります。エンコード用の btoa() とデコード用の atob() です。これらの名前は初期のNetscape実装に由来し、btoa は「binary to ASCII」、atob は「ASCII to binary」の略です。

基本的な使い方：

// Encoding
const encoded = btoa("Hello, World!");
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// Decoding
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
console.log(decoded); // "Hello, World!"

Unicodeの問題： btoa() はすべての文字のコードポイントが0から255（Latin-1範囲）の文字列のみを受け付けます。btoa("café") や btoa("☃") のような文字列を渡すと InvalidCharacterError が発生します。解決策はまずUTF-8にエンコードすることです：

// Encode Unicode to Base64
function utoa(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

// Decode Base64 to Unicode
function atou(b64) {
  return decodeURIComponent(escape(atob(b64)));
}

// Modern approach (2024+)
const encoded = btoa(String.fromCodePoint(
  ...new TextEncoder().encode("Hello ☃")
));

ブラウザ vs Node.js：

• ブラウザには初期からwindow、worker、service workerコンテキストで btoa() と atob() が利用できます。
• Node.jsはバージョン16でグローバルな btoa() と atob() を追加しました。それ以前は Buffer を使う必要がありました：

// Node.js Buffer approach (still common)
Buffer.from("Hello").toString("base64");    // encode
Buffer.from("SGVsbG8=", "base64").toString(); // decode

ブラウザでのファイル処理：

// Using FileReader for files
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsDataURL(file); // returns data:...;base64,...

パフォーマンスに関する注意： 非常に大きな文字列（数メガバイト）の場合、btoa() がメインスレッドをブロックする可能性があります。応答性を向上させるためにWeb Workerの使用やデータのチャンク分割を検討してください。