JavaScriptだけでCSVを配列・連想配列に変換【ライブラリなし】

データ記述フォーマットのCSV

これをJavaScriptで次のように扱いたいです。

  • CSVをファイルなどから読み込み
  • それを配列・連想配列へと変換
  • 余計なライブラリとかも入れたくない

やってみたら意外と簡単だったので、
JSだけでCSVを配列に変換する方法を紹介します。

ここで想定するCSVのフォーマットについて

ここでは次のフォーマットを前提にします。

▼ 解析対象のCSV例

▼ 前提条件

  • 文字コードは基本的にUTF-8
  • 1行目にあるのがヘッダー
  • 値は " で囲むこと
  • 各値は , で区切ること

CSVにもいろいろ方言があるみたいですが、ここでは汎用的に使えそうな値のダブルクォート囲み+コンマ区切りのCSVを想定しています。

また1行目の "name","hex","rgb"  はヘッダーです。存在しない場合もあるんですが、ここで紹介する方法では必須となるので注意してください

JSによるCSVを配列・連想配列に変換する関数コード例

では本題に入っていきます。

CSVを配列などに変換する方法について

次のようなコードを書くことで可能です。

▼ CSVをJS配列・連想配列に変換する関数

何をしてるかはコメントを見てください。

ここでのポイントは headers.redule(function(obj,header,i){...})  の部分。Array.reduceメソッドを使うと配列に対して連続的かつ順番に処理を行えます。

reduce() メソッドは、配列のそれぞれの要素に対して、順番通りに、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。

引用元 : https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

ここでは headers に対してArray.reduceメソッドを適用し、ヘッダーカラム名をキーにした各行の値オブジェクトを簡単に得られるようにしています。(ただし noHeader = false  の場合)

このcsvToArray関数の使い方コード例

例えばこんな感じに使えます。

▼ 実際に使ってみたコード例

▼ このコードの出力結果

ヘッダーカラム名がいらないなら noHeader=true  をセット、カラム名も含めたオブジェクトに変換したいなら noHeader=false  にすればOKです。

CSVを多用するならライブラリを使う方がいいと思う

CSVは単純なフォーマットです。

ただ次の場合は大人しくライブラリ使ってください

  • CSVの読み込みが複数回ある
  • 方言ごとの違いを考慮したくない
  • そもそも自前実装が嫌い

これは僕の持論ですが……「自前で実装」というと聞こえはいいけど、結局やってることは遠回りにすぎません。他の人が作った優秀なライブラリがあるのに

だから自分自身はできるだけライブラリを使い、できるだけ楽するようにしてます。本当にオリジナリティのある部分にだけ集中するのがグッドですね

以上、JSだけでCSVを配列変換でした。ではまた