JavaScriptで atob と btoa を使用する際に扱う"バイナリー文字列"、Base64との関係も含めてしっかり理解できていなかったため覚え書き。

バイナリー文字列(Binary strings)とは？

つまるところ charCodeAt で 0-255 の範囲の値を返す文字コードだけで構成された文字列(string)の事を指す
制御コード等も含むため文字としての表示は保証されない
ECMAScriptの言語仕様に特にそういう概念は無い
TypedArray登場以前にバイナリを扱うために利用されていたとか

(参照) バイナリー文字列 - Web API | MDN (archive.org)

バイナリー文字列はどこで使うの？

atob、btoaを利用する時。令和の今ではたぶんそこ以外ほぼない。 ~~知らんけど。~~

そもそも atob と btoa は何をするもの？

Base64文字列とバイナリ文字列を相互変換する

atobはBase64文字列をバイナリ文字列へ変換する
atobにBase64以外の文字を入力するとエラーを吐く。
btoaはバイナリ文字列をBase64文字列へ変換する
btoa に0-255範囲外の文字を入力するとエラーを吐く。

要するに atob と btoa はどこで使うの？

Base64からバイナリデータに戻したい、又はバイナリデータをBase64化したい時。代表的なのは Data URI 関連。しかしatob、btoaはバイナリ文字列のための関数なので、TypedArrayなどでやりとりするには以下のような変換処理が必要になる。

TypedArray ⇒ バイナリ文字列 ⇒ btoa ⇒ Base64
Base64 ⇒ atob ⇒ バイナリ文字列 ⇒ TypedArray

バイナリ文字列自体に用はなくても必ずバイナリ文字列変換を挟まなければならない。 非合理だけど昔からJavaScriptについているBase64用の組み込み関数がこういう仕様だったのだから仕方がないという解釈で合ってるだろうか。

実際の使用例

Uint8Array ⇒ バイナリ文字列 ⇒ Base64

{
  let bin = new Uint8Array([0, 16, 65, 128, 144]); // Uint8Array (数値は適当)
  let bstr = String.fromCharCode(...bin); // バイナリ文字列化
  let b64 = btoa(bstr); // Base64化
  console.log(b64); // "ABBBgJA="
}

Base64 ⇒ バイナリ文字列 ⇒ Uint8Array

{
  let b64 = "ABBBgJA="; // Base64 (上のコードで得たBase64データから復元を試みる)
  let bstr = atob(b64); // バイナリ文字列化
  let bin = Uint8Array.from(bstr, str => str.charCodeAt(0)); // Uint8Array化
  console.log(bin); // Uint8Array(5) [0, 16, 65, 128, 144] // 元のバイナリ
}

以下余談

atob、btoaの生まれと名称

"a"はASCII、"b"はBinaryを意味しているのは明らかだけど、実際の所はASCIIではなくBase64だし入出力に使用されているのはどちらも文字列型なので解りづらい。どうしてこんな名前なのかというと歴史的事情的なアレで仕方がないらしい。そんなに歴史があったの？

In these APIs, for mnemonic purposes, the "b" can be considered to stand for "binary", and the "a" for "ASCII". In practice, though, for primarily historical reasons, both the input and output of these functions are Unicode strings.
(訳: これらのAPIは、覚えやすいように「b」が「バイナリ」、「a」が「ASCII」を表すと考えることができます。しかし実際には、主に歴史的な理由から、関数の入力と出力は両方ともUnicode文字列です。)

(参照) HTML Standard (8.3 Base64 utility methods)

知らなかったけどatob、btoaはかなり昔からNetscapeに搭載されていたらしい。以下のJavaScript作者氏のツイートによると、この名前は1995年にUnixから持ってきたものとのこと。

Old Unix names, hard to find man pages rn but see https://t.co/lWkceMwFad. The names carried over from Unix into the Netscape codebase. I reflected them into JS in a big hurry in 1995 (after the ten days in May but soon).
— BrendanEich (@BrendanEich) May 21, 2018

なんでこんな名前付けちゃったの？というツイートに対する氏の連投を意訳すると、「名前なんてそんなもんだ。文句いうな、はげ」という感じでしょうか。

Netscape Navigator 4を試す

1995と書いてあったが atob が実装されたのは1997年に出たNetscape Navigator 4.0(JavaScript 1.2)かららしいので確認

この時代からあったんですね…(IEは10から)