外部CSVファイルからデータを取得して、javascriptで操作したい場合がある。そんなときには、jQueryとjquery.csv.jsを使うのが最も簡単である。

ところが、この方法を紹介しているサイトがいくつかあるのに、紹介されているコードを実行しても動作しなかった。これは、jquery.csv.jsのバージョンアップや開発環境の変化のためである。そこで、現在の時点（2023-04-13）で動作するコードを紹介する。

jquery.csv.jp の環境変化

まず、jquery.csv.jpに起きた変化を上げる。他サイトのコードが動作しなかった原因である。

$.csv()(data) は使えない

jquery.csv.jsの現在のバージョンは1.0.21である。バージョンアップのため、他サイトで紹介されている

var csv = $.csv()(data)

のようなコードは使えなくなっている。以下のように置き換える。

var csv = $.csv.toArrays(data)

開発場所

以前はGoogleのサイトで開発されていたようだが、現在はGitHubに移動している。

CDNサイトの場所

最新版のURLは以下である。

$.get()でdataTypeを指定する

こちらは、jquery.csv.jsではなくjQueryの問題だが、$.get()でdataTypeを指定する必要がある。他サイトでdataTypeをつけていないコードがあったが、これを省略するとparseerrorが出る場合がある（ブラウザやjQueryのバージョンによるので、必ずエラーになるわけではない）。

$.get(csvfile, readCsv);  -->  $.get(csvfile, readCsv, 'text');

コードの例

以上に対応したhtmlのコード例をリスト1に示す。なお、test.csvはリスト2のようになっている。図1はブラウザ画面のスクリーンショットである。

リスト1

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
	  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	  crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
	<script>
		function readCsv(data) {
			var target = '#csv-body';
			var csv = $.csv.toArrays(data);
			var insert = '';
			$(csv).each(function() {
				if (this.length > 0) {
					insert += '<tr>';
					$(this).each(function() {
						insert += '<td>' + this + '</td>';
					});
					insert += '</tr>';
				}
			});
			$(target).append(insert);
		}
		var csvfile = 'test.csv';
		$(function(){
			$.get(csvfile, readCsv, 'text');
		});
	</script>
	<link rel='stylesheet' href='list.css'>
</head>
<body>
	<table>
		<caption>紫陽花の名所</caption>
		<thead>
			<tr><th>名前</th><th>場所</th><th>種類</th><th>株数</th></tr>
		</thead>
		<tbody id='csv-body' />
	</table>
</body>
</html>

リスト2

"恋し野の里あじさい園","和歌山県橋本市",30,6000
"矢田寺","奈良県大和郡山市",60,8000
"吉野山","奈良県吉野郡吉野町",,4000
(以下略)

図1 スクリーンショット

変更履歴

2023-04-20: CDN におけるバージョンを修正（1.0.11 -> 1.0.21）
2021-12-08: jquery.csv.js のバージョンを修正（1.0.11 -> 1.0.21）
jquery.js のバージョン（3.5.1 -> 3.6.01.0.21）およびintegrityを修正
2020-10-14: jquery.csv.js のバージョンを修正（1.0.08 -> 1.0.11）
2019-12-27: jquery.csv.js のバージョンを修正（1.0.5 -> 1.0.8）
2019-10-19: jquery.jsのCDNについて、jQueryサイトの指定に従って、<script>ノードの記述を変更
2019-08-26: jquery.csv.js のバージョンを修正（0.8.9 -> 1.0.5）