ツール一覧

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エンコード/デコードツール

日本語の文字化けに完全対応。ブラウザ内で完結する安全なツールです

試す