今回は、JavaScriptを使ってCSVファイルを読み込み、データを表示する方法について解説します。
わかりやすいように、ステップバイステップで説明しますので、ぜひ最後までご覧ください。
CSVとは
CSV（Comma-Separated Values）ファイルは、データをコンマで区切って保存するテキストファイル形式の一つです。例えば、Excelで表として扱うデータを簡単に保存・読み込みするために使われることが多いです。以下は簡単なCSVファイルの例です。
商品名,価格,在庫数
りんご,100,50
バナナ,150,30
オレンジ,120,20
のように、データをコンマで区切ることで、表形式のデータを簡単に管理できます。
JavaScriptでやるメリット、デメリット
メリット
- ブラウザで直接処理可能:
追加のソフトウェアをインストールせずに、ブラウザだけでCSVファイルの読み込みと表示ができます。 - インタラクティブな表示:
JavaScriptを使えば、読み込んだデータを動的に表示・操作できます。例えば、データのフィルタリングや並べ替えも簡単に行えます。 - クロスプラットフォーム:
ブラウザが動作する環境であれば、どのOSでも同じように動作します。
デメリット
- セキュリティリスク:
JavaScriptでのファイル操作は、ユーザーのローカルファイルにアクセスするため、適切なセキュリティ対策が必要です。 - パフォーマンス:
大量のデータを処理する場合、ブラウザ上ではパフォーマンスが低下することがあります。 - 機能制限:
データベースや専用のソフトウェアに比べて、提供される機能が限定されます。
JavaScriptでCSVファイルを読み込み表示するHTML、CSS、JavaScriptコード
HTMLコード
ここでは、CSVデータを表示するためのテーブル（table）を配置しています。theadはテーブルのヘッダー、tbodyはテーブルのボディを表します。
<table id="csvTable">
<thead>
<tr id="csvHeader"></tr>
</thead>
<tbody id="csvBody"></tbody>
</table>
CSSコード
テーブル（table）全体のスタイルを設定しています。幅を100%にし、セルの境界を統一しています。
その他、テーブルのヘッダー（th）とデータセル（td）のスタイルを設定しています。
<style>
body {
padding: 0;
margin: 0;
font-size: 18px;
text-align: center;
line-height: 1.8em;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0;
line-height: 1.8em;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
JavaScriptコード
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('data.csv')
.then(response => response.text())
.then(data => parseCSV(data));
});
function parseCSV(data) {
const lines = data.split('\n');
const tableHeader = document.getElementById('csvHeader');
const tableBody = document.getElementById('csvBody');
// ヘッダー行を設定
const headers = lines[0].split(',');
headers.forEach(header => {
const th = document.createElement('th');
th.textContent = header;
tableHeader.appendChild(th);
});
// データ行を設定
for (let i = 1; i < lines.length; i++) {
const row = document.createElement('tr');
const cells = lines[i].split(',');
cells.forEach(cell => {
const td = document.createElement('td');
td.textContent = cell;
row.appendChild(td);
});
tableBody.appendChild(row);
}
}
</script>
上記内容は以下の通りです。
- document.addEventListener(‘DOMContentLoaded’, …):
ページが読み込まれたときにCSVファイルを読み込むためのイベントリスナーです。 - fetch(‘data.csv’):
サーバーからdata.csvファイルを取得します。 - response.text():
レスポンスをテキストとして読み取ります。 - parseCSV:
読み込んだCSVデータを解析し、テーブルに表示する関数です。 - lines.split(‘\n’):
CSVデータを行ごとに分割します。 - headers.forEach:
ヘッダー行をテーブルに追加します。 - for (let i = 1; i < lines.length; i++):
データ行をテーブルに追加します。
CSVデータ（data.csv）
- 1行目はcsvデータヘッダー行で、それぞれの列の名前を示しています。
- 2行目以降がcsvデータ行です。各商品の名前、価格、在庫数を示しています。
商品名,価格,在庫数
りんご,100,50
バナナ,150,30
オレンジ,120,20
JavaScriptを使ってCSVファイルを読み込み表示するデモページ
ここまで説明したコードを使って作成したデモページは以下のリンクから確認できます。
JavaScriptを使ってCSVファイルを読み込み表示するデモページ
CSVデータの注意点
CSVファイルを取り扱う際にはいくつか注意すべき点があります。
- 個人情報の取り扱い:
CSVファイルには個人情報が含まれることがあります。適切なセキュリティ対策を講じ、データの漏洩を防ぐようにしましょう。特に、パブリックな環境での個人情報の取り扱いには十分注意してください。 - データのフォーマット:
CSVファイルはテキスト形式のため、データのフォーマットに注意が必要です。例えば、カンマや改行コードがデータに含まれる場合、適切にエスケープする必要があります。 - エンコーディング:
CSVファイルのエンコーディングにも注意が必要です。UTF-8エンコーディングを使用することを推奨しますが、他のエンコーディングが使用されている場合は適切に処理する必要があります。
まとめ
今回は、JavaScriptを使ってCSVファイルを読み込み、データを表示する方法を解説しました。理解しやすいように、HTML、CSS、JavaScriptのコード例を示しました。CSVファイルはデータの管理や共有に非常に便利な形式ですが、個人情報の取り扱いやデータのフォーマットには注意が必要です。
この方法を使って、ブラウザ上で簡単にCSVデータを表示・操作することができるようになります。ぜひ、自分のプロジェクトでも活用してみてください。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
