JavaScriptでBase64エンコードされた文字列をデコードする際、一般的に`atob()`関数を使用します。しかし、日本語などの非ASCII文字を含む文字列をデコードする場合、以下のようなエラーが発生することがあります。

DOMException: Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range.

このエラーは、`atob()`関数がLatin1（ISO-8859-1）の範囲外の文字を含む文字列を処理できないことが原因です。

解決方法

日本語などの非ASCII文字を含むBase64文字列を正しくデコードするには、以下のような方法を使用します。

function decodeBase64(str) {
  return decodeURIComponent(escape(atob(str)));
}

使用例

// 日本語のBase64エンコード文字列
const encodedStr = 'SGVsbG8g5pel5pys6Kqe';

// デコード
const decodedStr = decodeBase64(encodedStr);
console.log(decodedStr); // "Hello 日本語"

なぜこの方法が動作するのか

1. `atob()`でBase64デコードを行う

2. `escape()`でUnicode文字列をURLエンコードする

3. `decodeURIComponent()`でURLエンコードされた文字列を元に戻す

この3つのステップを組み合わせることで、非ASCII文字を含むBase64文字列を正しくデコードすることができます。

注意点

  • この方法は古いブラウザでは動作しない可能性があります
  • セキュリティ上重要なデータを扱う場合は、より安全な暗号化方式を検討してください
  • Base64エンコード/デコードは暗号化ではなく、エンコーディング方式の一つです

まとめ

JavaScriptで非ASCII文字を含むBase64文字列をデコードする場合は、単純な`atob()`関数では対応できません。`decodeURIComponent(escape(atob()))`を使用することで、日本語を含むBase64文字列を正しくデコードすることができます。

検索エンジンでよく使用されるキーワード：

  • JavaScript Base64デコード
  • atob 日本語
  • Base64 デコードエラー
  • JavaScript Unicode Base64
  • atob DOMException