5_2_1 CSVファイルの読み込み

TensorFlow.jsに限らず、機械学習ではまずデータが必要です。このWebアプリでは、前出のエクセルファイルからCSVファイルを書き出して、それを読み込みます。

ブラウザで外部ファイルを読み込むには、ユーザーが読み込みを積極的に許諾する必要があります。これは、簡単に言うと、ユーザーが自分からボタンをクリックし、読み込みたいデータを選択する手順が必要だということです。ユーザーに害を及ぼすものが送り込まれないようにするためのJavaScriptの仕様です。

let temperatureData = [];
document.getElementById('load-file').addEventListener('change', (e) => {
    // 読み込んだCSVファイル
    const fileData = e.target.files[0];

    let salesData = [];
    let beer = [temperatureData, salesData];

    // FileReaderを使って、テキストとして読み取る
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.addEventListener('load', (e) => {
        resolve(e.target.result);
      }, false);
      reader.readAsText(fileData);
    // 読み取りに成功したら
    }).then((result) => {
      const lines = result.split('\r\n');
      // CSVデータの配列の各行をループ処理する
      // 配列の先頭要素(行)は項目名のため処理対象外
      // 配列の最終要素(行)は空のため処理対象外
      for (let i = 1; i < lines.length - 1; i++) {
        // カンマで区切られた各データに分割する
        const cells = lines[i].split(",");
        // 各データをループ処理する
        for (let j = 0; j < cells.length; j++) {
          beer[j].push(cells[j]);
        }
      }
      // グラフに描画する
      plot(beer);
    });
}, false);

temperatureDataという最高気温を入れる配列は、後でTensorFlow.jsのモデルが導き出したy = ax + bの直線の描画に使用するので、<input type="file" id="load-file">のイベントリスナーコードの外に出し、他からも参照できるようにしています。

CSVのデータは、beerという名前の配列の中に、最高気温がtemperatureData配列として、売上本数が２つめの配列として入ります。CSVデータの取得ができたら、別に定義してあるplot()関数にbeerを渡します。