CSV (Comma Separated Values) ファイル形式は、アプリケーション間でデータを交換する人気のある方法です。 このクイック ヒントでは、JavaScript を使用して CSV ファイルのデータを視覚化する方法を学びます。
Creating a CSV File
まず初めに、単純な CSV ファイルを作成しましょう。 これには、オンラインのテストデータ作成ツールであるMockarooを活用します。 以下はそのファイルです。
Converting a CSV File into an HTML Table
さて、ファイルを生成したので、それを解析して関連する HTML テーブルを構築する準備が整いました。
最初のステップとして、jQuery の ajax 関数を使用してこのファイルからデータを取得します。
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
AJAX リクエストが成功したと仮定して、successFunction が実行されます。 この関数は、返されたデータを解析して HTML テーブルに変換する役割を果たします。
考え方は、CSV 行をそれぞれテーブル行に変換することです。
- 最初に、正規表現を使用して AJAX レスポンスを分割し、CSV 行を分離します。
この時点で、なぜ CSV 行を分割するために
/\r?\n|\r/正規表現を使用したかを明確にすることが重要です。 たとえば、Windows プラットフォームでは、改行を表す文字は\r\nです。 とはいえ、上記の正規表現を使用することにより、これらすべての可能な表現に一致させることができます。さらに、ほとんどのテキスト エディターでは、改行の形式を選択することができます。 たとえば、Notepad++ を見てみましょう。 このエディターでは、次のパスに移動することにより、ドキュメントに必要な形式を指定することができます:
それを説明するために、ファイルを考えてみましょう。 選択した形式によっては、次のようになります。
HTML テーブルにスタイルを追加する
結果のテーブルを見る前に、いくつかの基本スタイルを追加してみましょう。
これが生成されたテーブルです。
How to Parse a CSV File With the Papa Parse Library
このセクションでは、CSV ファイルを瞬時に解析する Papa Parseライブラリの使用方法を説明します! Papa Parse は本当に強力な CSV パーサーで、多くの設定オプションを提供し、本当に大きな CSV ファイルにも使用できます。
Papa Parse ライブラリは npm で利用可能で、npm を使用したくない場合は、代わりに unpkg から公式 Papa Parse npm パッケージをダウンロードできます。
仕組み
次の例は、CSV文字列のパースがいかに簡単かを示しています。
var results = Papa.parse(data); // data is a CSV string
変数
resultsは次の内容を保持しています。ご覧のように、
Results.dataにはすべての行の配列が保持されています。 もしパース中にエラーがあれば、それはResults.errorsに入ります。 最後に、CSV 文字列のメタ情報にアクセスするためにResults.metaを使用することができます。一方、ローカルのCSVファイルを直接パースしたい場合は、JavaScriptのFileオブジェクトを渡します。
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});また、リモートCSVファイルへのURLを渡すこともできます。
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});基本パース以外にも、Papa Parseには以下のような多くの機能が用意されています。
- 大きなファイルのストリーミング (行ごとに処理可能)
- 逆解析 (JavaScript オブジェクトから CSV を生成)
- jQuery 統合
- など
このライブラリは本当にパワフルで簡単に使用できるので、ぜひ探求してほしい!
まとめ
この短い記事で、CSV ファイルを HTML テーブルに変換するプロセスを説明しました。 もちろん、この変換には Web ベースのツールを使用することもできましたが、自分でコードを書くことによって実現する方が常にやりがいがあると思います。