ウェブサイト検索

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

紹介

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

この記事では、最新のウェブブラウザで利用可能な btoa および atob のJavaScript関数について紹介します。

DigitalOcean App Platformを使用して、GitHubからフロントエンドアプリケーションをデプロイします。アプリのスケーリングにDigitalOceanが集中できるようにしましょう。

前提条件

この記事を読み進めるには、次のものが必要です:

  • JavaScriptにおける文字列の理解。詳細を知りたい場合は、「JavaScriptでの文字列の扱い方」を参照してください。
  • WindowまたはWorkerGlobalScopeで利用可能な関数の使用に関する理解。
  • 開発者コンソールの理解。詳細については「JavaScript開発者コンソールの使い方」を参照してください。

Base64による文字列のエンコードとデコード

btoa() と atob() は、HTML仕様の重要な部分であり、すべての現代のブラウザで利用可能な2つのBase64補助関数です。

注意: これらの関数の名前は、バイナリをASCIIに変換する古いUnixコマンド（btoa）と、ASCIIをバイナリに変換するコマンド（atob）に由来しています。しかし、これらの関数の入力と出力は両方ともUnicode文字列です。

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

例えば、あなたが文字列「Hello World!」を持っていて、これをBase64にエンコードしたいとします。ブラウザのウェブ開発者コンソールで、文字列を定義し、エンコードしてエンコードされた文字列を表示します:

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

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

console.log(encodedStringBtoA);

このコードの出力は、文字と数字の文字列です:

SGVsbG8gV29ybGQh

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

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

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

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

console.log(decodedStringAtoB);

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

Hello World!

さて、Base64をエンコードおよびデコードするための2つのツールがあります。

Base64の一般的な使用例の探求

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

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

Base64の制限を理解する

Base64は決して安全な暗号化方式として意図されていません。

Base64は圧縮方法ではありません。文字列をBase64にエンコードすると、通常は33%長くなります。

注意: btoa() と atob() 関数は、ASCII 文字を含む文字列にのみ作用することに注意することが重要です。非ASCII 文字を含む文字列をエンコードまたはデコードする必要がある場合は、代わりに TextEncoder と TextDecoder クラスを使用するべきです。

結論

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

注意： Can I Use ドキュメントは、UTF-8の処理に関する既知の問題を示し、古いブラウザ用のポリフィルを提供します。

JavaScriptについてさらに学びたい場合は、演習やプログラミングプロジェクトのためのJavaScriptトピックページをご覧ください。

関連記事: