JavaScriptでCSVデータ処理アプリを作る

〜アプリ化と仕上げ〜

はじめに

前回はCSVファイルのアップロード処理と、データの整合性チェックを実装しました。今回は、その結果をUIに反映させ、アプリとして完成させます。

UI設計とエラーメッセージ表示

まず、チェック結果をユーザーにわかりやすく表示するために、エラーメッセージを画面上に表示する部分を作成します。HTMLの要素を動的に操作し、エラーがあればその内容を表示するようにします。


function displayErrors(errors) {
    const errorContainer = document.getElementById('error-container');
    errorContainer.innerHTML = ''; // 既存のエラーをクリア

    if (errors.length === 0) {
        errorContainer.innerHTML = '

データに問題はありません。

';
        return;
    }

    const errorList = document.createElement('ul');
    errors.forEach(error => {
        const li = document.createElement('li');
        li.textContent = error;
        errorList.appendChild(li);
    });

    errorContainer.appendChild(errorList);
}

この関数では、エラーがある場合はリスト形式で表示し、問題がなければ「データに問題はありません」と表示します。エラーメッセージを動的に更新するために、HTMLの`error-container`というIDの要素を利用しています。

アプリの完成

ここまでで、CSVファイルのアップロード、整合性チェック、エラーメッセージの表示を実装しました。最終的なコードを以下に示します：


document.getElementById('file-input').addEventListener('change', handleFileUpload);

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;
        const data = parseCSV(contents);
        const errors = checkDataConsistency(data);
        displayErrors(errors);
    };
    reader.readAsText(file);
}