最近仕事で、csvファイルを扱う機会が何度かあり、いい加減何度も同じプログラムを書くのがイヤになったので、コピペできるようにコードを残しておこうと思います。
csvファイルの取り扱い方法
csvファイルは扱ってみると意外と
めんどくさく奥が深くて、対応が難しく感じる事があります。
単純なデータの値を、,(カンマ)で区切っているcsvデータであれば、改行区切りしてから、,（カンマ）区切りで２重ループ処理で簡単に処理できますが、
値に改行が含まれる場合や、値に,（カンマ）や"（ダブルクォート）などの文字列が含まれる場合に、簡単な処理では正確なデータを取り出すのが難しくなります。
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データを読み込んで処理をしたい場合は、入力フォームなどと連携する必要があります。
恐らく下記の方法が最も有効なのだと思い、スニペット化しておきました。
作業不フロー
- csv読み込みボタンをクリックして、csvファイルを選択
- csvファイルをajaxで読み込み、内容の文字列を読み取る
- 読み取った文字列を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データの即時反映にも役立ちます。
お試しあれ。
