JavaScriptでBase64を使用して文字列をエンコードおよびデコードする方法

序章

JavaScriptでは、Base64を使用して文字列をエンコードおよびデコードすることができます。

この記事では、最新のWebブラウザーで使用できるbtoaおよびatobJavaScript関数を紹介します。

前提条件

この記事をフォローするには、次のものが必要です。

JavaScriptの文字列の理解。詳細については、JavaScriptで文字列を操作する方法を参照してください。
WindowまたはWorkerGlobalScopeで使用可能な関数の使用に関する理解。
開発者コンソールの理解。詳細については、JavaScript開発者コンソールの使用方法を参照してください。

Base64での文字列のエンコードとデコード

btoa（）と atob（）は、HTML仕様のコア部分であり、すべての最新ブラウザーで使用できる2つのBase64ヘルパー関数です。

注：これらの関数の名前は、バイナリをASCII（btoa）に、ASCIIをバイナリ（atob）に変換するための古いUnixコマンドを参照しています。ただし、「これらの関数の入力と出力はどちらもUnicode文字列です」。

btoa()は文字列を受け取り、Base64にエンコードします。

文字列"Hello World!"があり、それをBase64にエンコードしたいとします。ブラウザのWeb開発者コンソールで、文字列を定義してエンコードし、エンコードされた文字列を表示します。

// Define the string
var decodedStringBtoA = 'Hello World!';

// Encode the String
var encodedStringBtoA = btoa(decodedStringBtoA);

console.log(encodedStringBtoA);

このコードの出力は、文字と数字を含む文字列です。

OutputSGVsbG8gV29ybGQh

atob()は文字列を受け取り、Base64からデコードします。

以前の'SGVsbG8gV29ybGQh'からエンコードされた文字列を取得し、Base64からデコードしてみましょう。ブラウザのWeb開発者コンソールで、文字列を定義してデコードし、デコードされた文字列を表示します。

// Define the string
var encodedStringAtoB = 'SGVsbG8gV29ybGQh';

// Decode the String
var decodedStringAtoB = atob(encodedStringAtoB);

console.log(decodedStringAtoB);

このコードの出力は、文字列が元のメッセージに変換されたことを示しています。

OutputHello World!

これで、Base64をエンコードおよびデコードするための2つのツールができました。

Base64の一般的なユースケースの調査

Base64を使用して、HTML、JavaScript、およびCSSと互換性のある方法でバイナリデータを表すこともできます。たとえば、Base64を使用してCSSまたはJavaScriptファイルに画像をインラインで埋め込むことができます。

Base64を使用して、フォームデータやJSONなどの入力を、URLセーフな文字セットが削減された文字列に変換することができます。ただし、特定のサーバーがプラス（+）およびスラッシュ（/）文字を解釈する方法のため、代わりにencodeURIComponentを使用することをお勧めします。

Base64の制限を理解する

Base64は、安全な暗号化方式を意味するものではありません。

Base64も圧縮方式ではありません。文字列をBase64にエンコードすると、通常33% longerの出力になります。

結論

この記事では、Base64文字列をエンコードおよびデコードするためのbtoaおよびatobを紹介しました。

ノート： 使ってもいいですか documents the known issue for UTF-8の処理 and provides a polyfill for older browsers.

JavaScriptについて詳しく知りたい場合は、JavaScriptトピックページで演習とプログラミングプロジェクトを確認してください。