MENU

JavaScriptファイル操作ArrayBuffer

【JavaScript】 2バイト以上のTypedArrayバイナリ保存はエンディアンに注意

更新日:2021/07/06

 

 

JavaScriptのDataViewまたはTypedArrayのバイナリ保存の方法について、次の記事で紹介しています。

 

 

しかし2バイト以上のTypedArrayは、エンディアンについて考慮する必要があります。

 

そこで今回は、上記の二つの記事の補足として、2バイト以上のTypedArrayをバイナリ出力するときの注意点についてお伝えします。

 

2バイト以上のTypedArrayとエンディアン

 

2バイト以上のTypedArrayをバイナリ出力したとき、出力されたデータはJavaScriptエンジンによって異なります。

 

これはエンディアンという概念によるものです。
エンディアンとは、2バイト以上のデータをメモリに格納するときの順番を既定したものです。

 

例えば、次のような2バイトデータがあるとします。

 

0x1234

 

ビッグエンディアンは、このデータを次の順番でメモリに格納します。

 

←下位アドレスアドレス増加分上位アドレス→
+1+2
1234

 

リトルエンディアンは、次のように順番が逆になります。

 

←下位アドレスアドレス増加分上位アドレス→
+1+2
3412

 

 

詳しくは、こちら読んでみてください。
エンディアンとは何か調べてみた

 

では、TypedArrayのエンディアンはどちらでしょうか?

 

答えは、不明です。
JavaScriptの言語仕様では、JavaScriptエンジンを作成するエンジニアに一任されています。
どちらかのエンディアンで固定されているかもしれませんし、CPUのエンディアンを読み取っているかもしれません。

 

後者の場合は、同じJavaScriptエンジンでもエンディアンが異なることになります。

 

 

以上のことから、2バイト以上のTypedArrayから作成したバイナリデータを、異なる環境間でやりとりするのは危険が伴います。

対処法

 

2バイト以上のTypedArrayを出力する場合、新規バッファと共にDataViewを作成して、出力データをリトルエンディアン(またはビッグエンディアン)でコピーしてから、ファイルに書き出します。

 

2バイト以上のTypedArray出力(Node.js)

 


const fs = require("fs");

  // 出力したいデータ
const u16 = Uint16Array.of( 0x1122 , 0x3344 , 0x5566);

  // 出力データと同じサイズのバッファー確保
const dataView = new DataView( new ArrayBuffer( u16.byteLength ) );

 // 出力データをビッグエンディアンでコピー
u16.forEach( (val,index) =>dataView.setUint16(index * 2 , val , false));

 // 変数dataViewをバイナリ出力
fs.writeFile("./binary.dat", dataView, err => {
    if (err) throw err;
    console.log("出力しました");
});

 

ブラウザでのファイル出力は、【JavaScript】 ArrayBufferとTypedArray-メモリを確保してアクセスを参考にしてください。

 

2バイト以上のTypedArrayを読み込む場合は、上のコードと逆のことをおこないます。

 

2バイト以上のTypedArray読み込み(Node.js)

 


const fs = require("fs");

fs.readFile("./binary.dat", (err, result) => {
    if (err) throw err;

    const u16 = new Uint16Array( result.buffer );
    const dataView = new DataView( result.buffer );
   
    for( let i = 0 ; i < u16.length ; i ++ )
        u16[i] = dataView.getUint16( i * 2 , false);

});

 

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    期間限定情報:
    7/16から7/18は63時間のビッグセール!
    欲しかったアレが安く手に入るチャンスです
    忘れずにチェックしてください!
    僕は以前のタイムセール祭りで4Kモニタが買ったけど、それより安かったらどうしよう・・・

    さらにお得なポイントアップキャンペーンも同時開催!

    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。