JavaScriptでBase64デコード！atob()関数の使い方
投稿日 2025年02月07日 更新日 2025年02月07日
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
関連記事
新着記事
4
5
6
関連記事
4
5
6
60秒で完了