readAsBinaryString() の逆の動作が分かりません

Question

問題点

バイナリ　コードを text editor または　ブラウザ　API　から出力させる方法が分からない

設定
バイナリ　コードを読み込んで、javascript 上で
HEX　変換して編集をした内容を
再び　２進数に変換して保存しようと努力をしています。

どのようにすれば、バイナリ　ファイルとして出力することができるでしょうか。

	var blob = new Blob([dataToSave], {type: "application/octet-binary"});
	

ファイル　タイプ　を上記のように指定しても
出力されたファイルは、text editor で開くと
編集前のバイナリ　コードと同じような
文字化け表示がなされずに
２進数の　０１０１　のtext 表示のままでした。

よろしくお願いいたします。

Answer 1

readAsBinaryString()

readAsArrayBuffer() を使ってください。

バイナリデータを JavaScript の {string} で無理やり扱っていたのは
TypedArray 登場以前の古い JavaScript になります（開発者が文字化けを許容していた）。

MDN readAsBinaryString より

File APIの仕様から一度削除されましたが、後方互換のために再導入されました。
FileReader.readAsArrayBuffer() の使用が推奨されています。

Wikipedia コンピュータの数値表現（追記

再び　2進数

2進数の単位はbitになりますので、 テキスト化された "0","1" の値はそれぞれ、16進数（単位はbyte）の　0x30,0x31 になるはずです。

逆の動作

HEX化したテキストの場合、byte単位（16進数）で考えます。

// utf-8 1byte文字（可視文字）の範囲でHEX化してみる例（追記
// [..."Hello,world!"].map( s=>s.charCodeAt(0).toString(16) ).join("");
// => "48656c6c6f2c776f726c6421"
var hexstring = "48656c6c6f2c776f726c6421";

var bytes = hexstring.match(/[\da-f]{2}/ig)
  .map( c => Number("0x"+c) ); // => バイト配列 / Uint8Array() に渡せる

/*
// 参考 binary-string : 1byte ごとに　String.fromCharCode() で文字列化する
var binstr = bytes
  .map( n => String.fromCharCode(n) )
  .join(""); // => "Hello,world!" 現在は utf-8 テキストデータに限って利用
*/

var dataToSave = new Uint8Array( bytes );

データ形式が定まっていないバイナリの mimeType は application/octet-stream です。

• Blobの派生オブジェクトFile もあります

上記コードの続きで

//var blob = new Blob([dataToSave], {type: "application/octet-binary"});
var file = new File([dataToSave], "filename", {type: "application/octet-stream"});

過去のご質問にも回答していますが、convertArrayBufferToHexArray() は、ArrayBufferから、通常の配列に変換（各バイトの値は HEXで示す2文字にする）しています。

// buf はfileから読んだ ArrayBuffer
var hexstring = convertArrayBufferToHexArray( buf ).join("");

Comments

[xmg]

ごていねいな回答をいただいて、非常に感謝しております。
早速、上記のコードを使用させていただきました。

結果は、 binary 化された文字列を text editor で表示すると、空白のページが出るだけでした。

上のコード見本の中で、

.....
var dataToSave = new Uint8Array( bytes );
.....

の引用変数：bytes を binstr　に訂正しても、バイナリコードが出力できませんでした。

お手数ですが、上のコード見本の　hexstring の値を、BINファイルとして
File API を用いてダウンロードする　HTML構文と javascript の一体化された手本をご教示いただけますでしょうか。

よろしくお願いいたします。

[AkitoshiManabe]

MDN にあるとおり、 new Uint8Array(bytes) は File のコンストラクタに渡すために作成したArrayBufferViewerに過ぎません。
> 一体化された手本をご教示いただけますでしょうか
いえ、それでは上達できません。詳細な処理の連続を理解してください。（邪魔なコードはコメントしました）

[xmg]

AkitoshiManabe様へ

懇切ていねいなご指導をいただき、感謝しております。
上記のお答えの内容を理解できるように、map関数のことなどをこの週末から本日まで学習してまいりました。
現時点で、HEXコードを２進数の文字列に変換するだけではなく、buffer に渡せるような配列に変えなければならないということだと理解しています。

そのために、新たな配列に変換されたコードを格納する必要があることは分かりますが、for loop で buffer 内の各バイトをひとつひとつ変換する代わりに map を用いるにあたって、上記の回答に示されている変数　C　の定義がどうなっているのかが分からずに壁に当たってしまいました。

map 関数の見本をいくつも調べましたが、参照する大元のHEXデータを
以下の式で、どうやって変換しているのか
変数 c の意味するところが分かりません。

var bytes = hexstring.match(/[\da-f]{2}/ig)
.map( c => Number("0x"+c) );
-------------------------------

いまだに　HEXコードの文字列を２進数に変換して、それを text file ではなく、多くのアプリケーションがデーター保存に使用している binary file に変換するやり方が分かりません。

初歩的なことで申し訳ありませんが、WEB上をいくら探し回っても、BINARY保存の方法が C 言語のような関数で　javascript に存在していない模様ですので、基本的なバイナリ保存法についてご指導をお願いいたします。

[AkitoshiManabe]

> HEXコードを２進数の文字列に変換
バイナリデータ（ファイルや、通信における生データ）は16進数です。
> map 関数の見本をいくつも調べましたが ...
String#match() の引数に "g"フラグ（global）のついた正規表現を与えると、Arrayが返却されます。
console.log( hexstring.match(/[\da-f]{2}/ig) )
配列要素は "00" ~ "FF" の16進数を示す文字列なので、プレフィックス"0x"を結合して数値化した結果を返却しています（map() で使っている仮引数 c は１バイト分の charCode と思ってください）。
メソッドチェーンは .methodName() ごとに分解して考えたほうが理解しやすいと思います。