序章

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

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

前提条件

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

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);

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

  1. Output
    SGVsbG8gV29ybGQh

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

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

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

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

console.log(decodedStringAtoB);

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

  1. Output
    Hello 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トピックページで演習とプログラミングプロジェクトを確認してください。