[Javascript] csvファイルをその場でデータ化する方法

2023年11月4日

Javascript

eyecatch 最近仕事で、csvファイルを扱う機会が何度かあり、いい加減何度も同じプログラムを書くのがイヤになったので、コピペできるようにコードを残しておこうと思います。

csvファイルの取り扱い方法

csvファイルは扱ってみると意外とめんどくさく奥が深くて、対応が難しく感じる事があります。 単純なデータの値を、,(カンマ)で区切っているcsvデータであれば、改行区切りしてから、,(カンマ)区切りで2重ループ処理で簡単に処理できますが、 値に改行が含まれる場合や、値に,(カンマ)や"(ダブルクォート)などの文字列が含まれる場合に、簡単な処理では正確なデータを取り出すのが難しくなります。 PHPであれば、csvファイルを直接読み込んでデータ分解してくれる、fgetcsv()や、レコードデータを分解してくれる、str_getcsv()という機能があり、比較的手軽にcsvデータの値を正確に取得する事ができます。 でも、今回は、Javascriptを使ってcsvをサーバーに送信せずにデータ化する方法をする必要があったので、そちらの方法を探してみました。

PapaParseライブラリ

実際に、「javascript csv データ化」と検索してみると、どのサイトにも、簡易csvのデータ化方法しか書かれていない状態だったので、chatGPT様に聞いてみたところ、 「PapaParse」というライブラリを教えてもらいました。 csvを正常にparse(データ分解)してくれるライブラリで、cdnでも配布されていて、手軽にcsvをデータ化できるようです。

ソースコード

html記述

以下のscriptタグを、ページヘッダなどで事前に読み込んでおきます。 <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

javascript記述

Papa.parse(csv_string, { header: false, // 1行目をヘッダーとして認識する場合はtrue(行が連想配列データになります)、falseの場合は各行が配列データになります。 complete: (e => { const data = e.data // 分解されたデータ console.log(data) }) }) 上記のように、グローバルに設置されたPapa関数を使ってparseすることができるようになります。

直接ファイルを選択して読み込んでcsvデータ化するスニペット

上記のコードは、事前にcsvファイルを読み込んでおく必要があるので、固定のcsvファイルを対応する場合はいいのですが、webサイトで、csvデータを読み込んで処理をしたい場合は、入力フォームなどと連携する必要があります。 恐らく下記の方法が最も有効なのだと思い、スニペット化しておきました。

作業不フロー

  1. csv読み込みボタンをクリックして、csvファイルを選択
  2. csvファイルをajaxで読み込み、内容の文字列を読み取る
  3. 読み取った文字列をcsvデータ分解する

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>csv load</title> <script type='module' src='main.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> </head> <body> <button id='get_csv'>csv読み込み</button> <input type='file' name='csv' style='display:none'/> </body> </html>

main.js

class Main{ constructor(){ document.getElementById('get_csv').addEventListener('click' , this.click_button.bind(this)) document.querySelector(`input[type='file'][name='csv']`).addEventListener('change', this.change_file.bind(this)) } click_button(){ document.querySelector(`input[type='file'][name='csv']`).click() } change_file(e){ const file = e.target.files[0] const reader = new FileReader() reader.readAsText(file) // バイナリ処理したい場合は、readAsDataURL reader.onload = this.csv_string.bind(this) } csv_string(e){ const csv_string = e.target.result.trim() Papa.parse(csv_string, { header: false, // 1行目をヘッダーとして認識 complete: (e => { const data = e.data alert(data) }) }) } } switch(document.readyState){ case 'complete': case 'interactive': new Main() break default: window.addEventListener('DOMContentLoaded' , (()=>new Main())) break }

デモ

ボタンをクリックして、csvファイルを選択すると、内容がアラート表示されます。

あとがき

比較的簡単なプログラムにしてみたので、改造してお使いください。 inputタグを非表示にして、ボタンをわざわざ押させるのは、inputタグは、デザイン装飾がやりずらいので、別ボタンを使ってクリックしてもらったほうが、デザイン対応しやすいため、毎回こういう処理にしています。 この方式を使えば、実際のデータをそのままjsonなどにして、サーバーに送って処理することで、的確にデータの受け渡しもできるし、csvデータの即時反映にも役立ちます。 お試しあれ。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。