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デコードを試す

関連記事

この記事は 開発ツール・基礎 テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
Base64とは？仕組みから使い方まで解説Base64とは？仕組みから使い方まで解説
JSON 整形ツールの使い方JSON 整形ツールの使い方｜オンラインで安全に整形・圧縮
JSONの「Unexpected token」エラー原因と対処法JSONの「Unexpected token」エラー原因と対処法
ハッシュ生成 - SHA-256/384/512をローカルで安全に計算ハッシュ生成 - SHA-256/384/512をローカルで安全に計算
MD5 ハッシュ生成MD5 ハッシュ生成｜md5 hashの使い方の使い方と注意点まとめ実務ガイド実践ガイド
正規表現でよく使うパターン10選正規表現でよく使うパターン10選｜開発で役立つRegex
Markdown記法チートシートMarkdown記法チートシート｜コピペで使える一覧
Gitコマンドよく使う一覧Gitコマンドよく使う一覧｜初心者向けクイックリファレンス
Git Worktree 並行開発ワークフロー完全ガイドGit Worktree 並行開発ワークフロー完全ガイド｜複数ブランチ同時作業・IDE設定・CI連携（2026）
.envファイルのベストプラクティス.envファイルのベストプラクティス｜機密情報を安全に管理する
URLエンコード（パーセントエンコーディング）の使い方URLエンコード（パーセントエンコーディング）の使い方
HTMLエスケープ（サニタイズ）が必要な理由HTMLエスケープ（サニタイズ）が必要な理由｜XSS攻撃を防ぐ基礎知識