大容量JSONファイルのブラウザでの読み込み

ローカルにある大容量のJSONファイルをブラウザで読みたい

前提

ブラウザの文字列変数には使用上の上限があるらしい。
(http://var.blog.jp/archives/52543754.html)
1GBのJSONファイルをJSON.parseで解釈しようとするとエラーを吐く。
（実際にはその全段階で文字列変数に突っ込んだ段階でエラー）
Googleのサービス（ロケーション等）でダウンロードしてJSONなどは平気で数百メガバイトいくため何とかしよう。
以下のサンプルはGoogleサービスでよくみるJSONファイルを前提としています。

※当然搭載メモリによる上限はあります。今回はあくまでブラウザの仕様上の上限突破を目指します。

ちょっとづつ読み込んで配列に突っ込む

GoogleのJSONは1行に一つしか'{'or'}'がない。
・・・ということでまずは、一行ずつJSONファイルを読み込む

FileReaderクラスを拡張してバイト単位の読出しに対応

class LargeFileReader extends FileReader{
  constructor(){
    super();
  }
  readAs(blob, ctx){
    return new Promise((res, rej) => { 
      super.addEventListener('load', ({target}) => res(target.result));
      super.addEventListener('error', ({target}) => rej(target.error));
      super[ctx](blob);
    });
  }
  readAsArrayBuffer(blob){
    return this.readAs(blob, 'readAsArrayBuffer');
  }
  readAsText(blob){
    return this.readAs(blob, 'readAsText');
  }
  readAsDataURL(blob){
    return this.readAs(blob, 'readAsDataURL');
  }
}

巨大ファイルを改行区切りで読み込みます

改行はCR+LF or LFに対応

  async asyncReadLargeText(f, encode){
    const result = [],
      td = new TextDecoder(encode),
      re = new RegExp('\r?\n');
    //Stringの配列を返す
    //Return String array.
    function blob2arrayText(remain, b = new Uint8Array()){
      const nowBlob = new Uint8Array(remain.length + b.length)
      nowBlob.set(remain);
      nowBlob.set(b, remain.length);
      const arr = Uint8Array.from(nowBlob),
        dec = td.decode(arr),
        lines = dec.split(re);
      return lines;
    }
    //指定バイトづつ読込
    //Reading text file per specified byte size.
    const chunkSize = 1024*1024*500;
    //各読み出し単位毎の最後の改行以降のデータを格納
    //Stores the data after the last newline for each read unit.
    let remainBlob = new Uint8Array(),
    //whileループにおける、処理取りこぼしの検知用 (取りこぼしがない場合は-1)
    //For detecting undone operations in the while loop. (-1 if no undone)
      noNewLine = -1,
      offset = 0;
    while(offset < f.size){
      noNewLine = offset;
      //指定バイトのblob作成
      const slice = f.slice(offset, offset + chunkSize);
      offset += chunkSize;
      const buffer = await readAsArrayBuffer(slice).catch( e => console.log(e)),
        view = new Int8Array(buffer);
      for(let i = view.length-1; i >= 0; i--){
        //バイト列の後方から改行をさがす。
        //Search for newlines from the back of the byte sequence.
        const v = view[i];
        if(v === 13 || v === 10){//  \r = 13 , \n = 10
          //最後の改行より前部分を切り取り（改行含む）
          const newBlob = view.slice(0, i+1),
            lines = blob2arrayText(remainBlob, newBlob);
          for(let i=0, len=lines.length; i < len; i++){
            if(lines[i] !== '') result.push(lines[i]);
          }
          //最後の改行以降を保存して次回ループ時に結合
          remainBlob = view.slice(i+1);
          noNewLine = -1;
          break;
        }
      }
    }
    if(remainBlob.length > 0){
      blob2arrayText(remainBlob);
      noNewLine = -1;
    }
    //読み出し単位データ内に改行がない場合の補完
    if(noNewLine >= 0){
      const slice = f.slice(noNewLine),
        buffer = await rd.readAsArrayBuffer(slice).catch( () => result);
      blob2arrayText(remainBlob, new Int8Array(buffer));
    }
    return result;
  }//end of AsyncReadLargeText

読み込んだ行ごとの配列を一個づつのJSONへ組み立てなおします。
{}の出現回数をカウントして、一塊のJSONができ次第、パースしています。

readjsonfile.js

readjsonfile(txtArr){
    //JSONファイルのルートキーを指定
    //今回はGoogleのロケーション履歴を例にしている
    const key = 'locations';
    const arr = {[key]:[]};
    let recode = '{',
      k = 1;
    //let curl=0;//一行に複数個{}がある場合を想定した動き、今回はコメントアウト
    for(let i=2, len=txtArr.length; i<len; i++){
      const s = txtArr[i];
      //const part = s.split('}');
      //一行に{}は各一個までの想定
      if(s.indexOf('}') !== -1) k--;
      if(k === 0){
        recode = recode + '}';
        try{
          //一つの配列ごとにJSONを組み立ててパース
          const js = JSON.parse(recode);
          if(Object.keys(js).length > 0) arr[key].push(js);
        }catch(e){
          continue;
        }
        recode = '{';
        k++;
        continue;
      }
      if(s.indexOf('{') !== -1) k++;
      //curl = curl - (part.length - 1);
      //if(curl > 0) recode = recode + s;
      recode = recode + s;
      //curl = curl + (s.split('{').length - 1);
    }
    return arr;
  }

これでルートキー以下の要素が一つづつ収まった配列が出来上がります。