JavaScript Base64 エンコード解説
Base64 とは？
Base64 は、バイナリデータをテキストデータに変換するエンコーディング方式です。通常、画像や音声などのファイル形式をテキストベースで扱う必要がある場合に使われます。
JavaScript では、標準で btoa() 関数と atob() 関数が提供されています。
- atob(str)
Base64 エンコードされた文字列をデコードします。 - btoa(str)
文字列を Base64 にエンコードします。
例
const originalString = "こんにちは、世界！";
// 文字列を Base64 にエンコード
const encodedString = btoa(originalString);
console.log(encodedString); // 出力: 5Lit5pel5Y2X6Zm95YWs!
// Base64 エンコードされた文字列をデコード
const decodedString = atob(encodedString);
console.log(decodedString); // 出力: こんにちは、世界！
注意
btoa()関数は、ブラウザ環境でのみ使用可能です。Node.js ではBufferオブジェクトを使用します。btoa()関数は、入力文字列が 1 バイト文字のみであることを想定しています。マルチバイト文字（日本語など）を扱う場合は、適切なエンコーディング変換が必要になる場合があります。
バイナリファイルとの関係
バイナリファイル（画像、音声など）を扱う場合、通常はファイルを読み込んで FileReader API を使用してデータを取得します。その後、取得したバイナリデータを Base64 にエンコードしてテキスト形式に変換することができます。
基本的なエンコードとデコード
// エンコード
const originalString = "こんにちは、世界！";
const encodedString = btoa(originalString);
console.log(encodedString); // 出力: 5Lit5pel5Y2X6Zm95YWs!
// デコード
const decodedString = atob(encodedString);
console.log(decodedString); // 出力: こんにちは、世界！
注意点
btoa()は 1 バイト文字を想定しています。日本語などのマルチバイト文字を扱う場合は、適切なエンコーディング変換が必要になります。
バイナリファイル（画像など）を Base64 エンコードするには、以下のように FileReader を使用します。
const fileInput = document.getElementById('fileInput');
const base64Output = document.getElementById('base64Output');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
cons t base64String = e.target.result;
base64Output.textContent = base64String;
};
reader.readAsDataURL(file);
});
このコードでは、ファイル選択ダイアログで選択されたファイルを読み込み、Base64 エンコードされた文字列を base64Output 要素に表示します。
さらに詳しく
Base64 の仕組みや、より複雑なエンコード・デコードの処理については、以下のリソースを参照してください。
- Qiita: [JavaScript] Unicode 文字列やバイナリデータを Base64 エンコードおよびデコードする
- Qiita: JavaScriptでBase64エンコード・デコード（UTF-8も）
JavaScriptにおけるBase64エンコードの代替方法
標準関数 btoa() と atob() の限界
これまで見てきたように、JavaScriptの標準関数である btoa() と atob() は、基本的な Base64 エンコードとデコードには便利です。しかし、マルチバイト文字やバイナリデータの処理には制限があります。
代替方法
TextEncoder と TextDecoder を使用
Unicode文字列を適切に扱うために、TextEncoder と TextDecoder を利用します。
function encodeToBase64(str) {
const utf8Encoder = new TextEncoder();
const utf8Bytes = utf8Encoder.encode(str);
const base64String = btoa(String.fromCharCode(...utf8Bytes));
return base64String;
}
function decodeFromBase64(base64String) {
const binaryString = atob(base64String);
const utf8Decoder = new TextDecoder();
const decodedString = utf8Decoder.decode(new Uint8Array([...binaryString].map(c => c.charCodeAt(0))));
return decodedString;
}
この方法では、文字列を UTF-8 エンコードしてから btoa() に渡し、デコード時には atob() の結果を Uint8Array に変換してから UTF-8 デコードします。
カスタム実装
より細かい制御が必要な場合、独自に Base64 エンコード/デコードロジックを実装することも可能です。
const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
function encodeToBase64(str) {
// ... カスタムエンコードロジック
}
function decodeFromBase64(base64String) {
// ... カスタムデコードロジック
}
ただし、Base64 のアルゴリズムは複雑なので、既存のライブラリや関数を利用することを推奨します。
外部ライブラリ
より効率的で信頼性の高いエンコード/デコードを行うために、外部ライブラリを利用することも選択肢です。例えば、js-base64 や buffer (Node.js) などがあります。
注意事項
- 特定のユースケースに合わせて最適な方法を選択してください。
- Base64 はテキストデータに変換するため、セキュリティ上のリスクがある場合もあります。
- Base64 はデータサイズを約33%増加させます。
javascript base64 binaryfiles
