Base64デコードで日本語が文字化けする原因と対処法
Base64 エンコード JavaScript エラー解決
結論
atob() だけでは日本語は正しくデコードできない。TextDecoderを使ってUTF-8として解釈し直すのが正解。
問題:atob()で文字化けする
const base64Str = "44GT44KT44Gr44Gh44Gv"; // 「こんにちは」
const decoded = window.atob(base64Str);
console.log(decoded);
// → "ã"ã‚"ã«ã¡ã¯" (文字化け)
原因
atob() は 1文字=1バイト(ASCII/Latin-1) を前提に設計されています。
日本語は UTF-8(1文字=3バイト) なので、バイト列がバラバラに解釈されて文字化けします。
| atob()の想定 | 日本語(UTF-8) |
|---|---|
| 1文字 = 1バイト | 1文字 = 3バイト(マルチバイト) |
| バイトをそのまま文字として解釈 | 複数バイトを組み合わせて1文字にする必要がある |
解決コード
function safeBase64Decode(base64) {
const binStr = window.atob(base64);
const bytes = new Uint8Array(binStr.length);
for (let i = 0; i < binStr.length; i++) {
bytes[i] = binStr.charCodeAt(i);
}
return new TextDecoder('utf-8').decode(bytes);
}
console.log(safeBase64Decode("44GT44KT44Gr44Gh44Gv"));
// → "こんにちは"
Node.jsの場合
const decoded = Buffer.from("44GT44KT44Gr44Gh44Gv", 'base64').toString('utf-8');
console.log(decoded); // "こんにちは"
注意
JWT等のBase64URL形式(+ → -、/ → _、パディング省略)の場合は、atob() に渡す前に標準Base64に戻す前処理が必要です。
ツールでサクッと確認
コードを書く前にBase64の中身を確認したいなら、UTF-8対応のデコードツールが便利です。
🧪 Base64エンコード/デコードツール
日本語の文字化けに完全対応。ブラウザ内で完結する安全なツールです
試す