HOWTO · JavaScript
JavaScript で文字列を Base64 にエンコードおよびデコードする
この記事では、Base64 エンコーディングとは何か、JavaScript で文字列をエンコードおよびデコードする方法について説明します。
このページの内容
Base64 エンコーディング文字セットは、A-Z、a-z、0-9、+、および/で構成されます。このシステムには合計 64 文字あるため、Base64 と呼ばれます。Base64 エンコーディングは、データを ASCII（情報交換のためのアメリカ標準コード）形式に変換します。
たとえば、文字列 Git がある場合、Base64 エンコード形式では、この文字列は R29vZ2xl として表されます。
ここで起こったことは、文字列の個々の文字が最初に ASCII 値に表されることです。つまり、大文字の G の場合、ASCII 値は 71、小さい i の場合、ASCII 値は 105 です。他のキャラクターも同様です。ASCII 値の完全なリストを取得するには、このリンクにアクセスしてください。
次に、これらの ASCII 値は 8 ビットのバイナリ表現に変換されます。この 8 ビットのバイナリ表現は、4つの 6 ビットセグメントに分割されます。次に、これらの 4つのバイナリセグメントが 10 進数に変換されます。
最終的に、これらの 10 進数は Base64 エンコーディングテーブルに従って Base64 に変換されます。
これで、この変換をすべて手動で行う必要はありません。今まで、私たちが見たのは、理解を目的としたものだけです。文字列を Base64 にエンコードおよびデコードする方法を見てみましょう。
JavaScript での文字列の Base64 へのエンコードとデコード
JavaScript には、文字列を Base64 エンコーディングに、またはその逆に変換するための 2つの Base64 ヘルパー関数 btoa() と atob() があります。btoa() は文字列を取得して Base64 にエンコードし、atob() はエンコードされた文字列を取得してデコードします。
以下のコードでは、2つの div 要素があり、その中にエンコードおよびデコードされた文字列が表示されます。JavaScript の getElementById() メソッドを使用して、これら 2つの div の参照を myDiv_1 と myDiv_2 内に保存しています。この例でエンコードおよびデコードする文字列は、str 変数内に格納されている Git です。
この文字列をエンコードするには、btoa() 関数を使用します。このためには、str 変数をパラメーターとしてこの関数に渡すだけです。この結果を encodedStr 変数内に保存します。次に、myDiv_1.innerHTML プロパティを使用して、div_1 内にこの変数の値を表示します。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="div_1"></div>
<div id="div_2"></div>
<script>
let myDiv_1 = document.getElementById('div_1');
let myDiv_2 = document.getElementById('div_2');
let str = "Git";
let encodedStr = btoa(str);
myDiv_1.innerHTML = encodedStr;
</script>
</body>
</html>
出力：
R2l0
これは、出力として取得されるものです。文字列は Base64 に変換されていません。
上記の文字列を元の形式にデコードするには、atob() 関数を使用して、その中に encodedStr を渡すことができます。次に、myDiv_2.innerHTML プロパティを使用して、div_2 内の decodedStr 変数の値を表示します。
let decodedStr = atob(encodedStr);
myDiv_2.innerHTML = decodedStr;
出力：
Git
Base64 はバイナリデータの送信に使用され、暗号化方式ではないことに注意してください。また、圧縮方式ではありません。
