JavaScriptでCSVデータ処理アプリを作る
〜 プログラム実装 〜
はじめに
前回はシステム要件と詳細設計について説明しました。今回は、その設計を基に実際にプログラムを実装していきます。主に、CSVファイルのアップロード、データの読み込み、そして整合性チェックを行います。
CSVファイルのアップロードと読み込み
まず、CSVファイルをアップロードするためのインターフェースを作成します。HTMLでは、ファイル選択ボタンを配置し、JavaScriptでファイルを読み込みます。以下のコードでは、FileReaderを使用してCSVファイルを読み込んでいます：
function handleFileUpload(event) {
const file = event.target.files[0];
if (!file) {
alert('ファイルが選択されていません');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const contents = e.target.result;
parseCSV(contents);
};
reader.readAsText(file);
}
function parseCSV(contents) {
const rows = contents.split('\n');
const data = rows.map(row => row.split(','));
console.log(data);
}
上記のコードでは、`handleFileUpload`関数がファイルの選択を処理し、`FileReader`を使ってCSVファイルの内容をテキストとして読み込んでいます。その後、`parseCSV`関数でCSVデータを行ごとに分割し、配列として格納しています。
整合性チェック
次に、読み込んだデータに対して整合性チェックを行います。今回は簡単なチェックとして、以下の2つを実装します：
- 空のセル（欠損値）がないか確認
- 重複した行がないか確認
これを実現するためのコードは以下の通りです：
function checkDataConsistency(data) {
let errors = [];
// 欠損値チェック
data.forEach((row, rowIndex) => {
row.forEach((cell, colIndex) => {
if (!cell) {
errors.push(`行 ${rowIndex + 1}, 列 ${colIndex + 1} が空です`);
}
});
});
// 重複行チェック
const uniqueData = new Set(data.map(row => JSON.stringify(row)));
if (uniqueData.size !== data.length) {
errors.push('重複した行があります');
}
return errors;
}
この関数は、データに欠損値があるか、重複行があるかをチェックし、エラーメッセージを返します。
次回予告
次回は、チェック結果をUIに表示する方法を実装し、アプリを完成させます。お楽しみに！
