--- title: jQueryで外部CSVファイルをロードする tags: jQuery JavaScript CSV author: cnloni slide: false --- 外部CSVファイルからデータを取得して、javascriptで操作したい場合がある。そんなときには、jQueryと[jquery.csv.js](https://github.com/evanplaice/jquery-csv/)を使うのが最も簡単である。 ところが、この方法を紹介しているサイトがいくつかあるのに、紹介されているコードを実行しても動作しなかった。これは、jquery.csv.jsのバージョンアップや開発環境の変化のためである。そこで、現在の時点(2019-12-27)で動作するコードを紹介する。 ### jquery.csv.jp の環境変化 まず、jquery.csv.jpに起きた変化を上げる。他サイトのコードが動作しなかった原因である。 #### $.csv()(data) は使えない jquery.csv.jsの現在のバージョンは1.0.11である。バージョンアップのため、他サイトで紹介されている ```javascript var csv = $.csv()(data) ``` のようなコードは使えなくなっている。以下のように置き換える。 ```javascript var csv = $.csv.toArrays(data) ``` #### 開発場所 以前はGoogleのサイトで開発されていたようだが、現在はGitHubに移動している。 https://github.com/evanplaice/jquery-csv/ #### CDNサイトの場所 最新版のURLは以下である。 https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js #### $.get()でdataTypeを指定する こちらは、jquery.csv.jsではなくjQueryの問題だが、$.get()でdataTypeを指定する必要がある。他サイトでdataTypeをつけていないコードがあったが、これを省略するとparseerrorが出る場合がある(ブラウザやjQueryのバージョンによるので、必ずエラーになるわけではない)。 ```javascript $.get(csvfile, readCsv); --> $.get(csvfile, readCsv, 'text'); ``` ### コードの例 以上に対応したhtmlのコード例をリスト1に示す。なお、test.csvはリスト2のようになっている。図1はブラウザ画面のスクリーンショットである。 ```html:リスト1
紫陽花の名所
名前場所種類株数
``` ```text:リスト2 "恋し野の里あじさい園","和歌山県橋本市",30,6000 "矢田寺","奈良県大和郡山市",60,8000 "吉野山","奈良県吉野郡吉野町",,4000 (以下略) ```
図1 スクリーンショット
### 変更履歴 * 2019-12-27: jquery.csv.js の現行バージョンを修正(1.0.5 -> 1.0.8) * 2019-10-19: jquery.jsのCDNについて、[jQueryサイト](https://code.jquery.com/)の指定に従って、<script>ノードの記述を変更 * 2019-08-26: jquery.csv.js の現行バージョンを修正(0.8.9 -> 1.0.5)