以下は、クライアント側でエクセルファイルの読み込みと書き出しを行う要件定義と仕様についての詳細です。
要件定義
目的
クライアント側のWebアプリケーションにおいて、ユーザーがエクセルファイルをアップロードし、その内容をJavaScriptで処理することで、テーブル変数とクラス変数の管理および変更を可能にするシステムを構築する。
機能要件
-
エクセルファイルの読み込み
- ユーザーがエクセルファイル（.xlsxまたは.csv）をアップロードすると、その内容をJavaScriptで読み込む。
- 読み込んだデータはテーブル変数として管理される。
-
エクセルファイルの書き出し
- JavaScriptで処理したデータを再びエクセルファイルとして書き出し、ユーザーがダウンロードできるようにする。
-
クラス変数の管理
- クラス変数はJavaScript内で定義され、読み込んだテーブル変数に基づいて動的に操作される。
-
オプション選択機能
- HTMLでラジオボタンまたはタブメニューを用いて、ユーザーがクラス変数を変更するためのオプションを選択できる。
非機能要件
-
互換性
- モダンなウェブブラウザ（Google Chrome、Firefox、Safari、Edge）で動作すること。
- モバイルデバイスでも適切に表示されること。
-
パフォーマンス
- 大規模なエクセルファイル（数千行）でも、スムーズに読み込みおよび処理が行えること。
- ユーザー操作から結果表示までの遅延を最小限に抑えること。
-
セキュリティ
- ユーザーのアップロードするファイルを適切に検証し、不正なデータやファイル形式による問題を回避する。
仕様
1. テーブル変数の定義（エクセルで定義）
- テーブル変数はエクセルファイル内で定義される。例えば、以下のようなシート構造を持つことを想定する。
| 項目名 | 値 |
|---|---|
| Name | John |
| Age | 30 |
| Role | Developer |
- このデータをJavaScriptで読み込み、オブジェクトまたは配列として取り扱う。
2. クラス変数の定義（JavaScriptで定義）
- クラス変数はJavaScript内で定義され、エクセルファイルから読み込んだテーブル変数に基づいて動的に変更される。
class Person {
constructor(name, age, role) {
this.name = name;
this.age = age;
this.role = role;
}
displayInfo() {
return `Name: ${this.name}, Age: ${this.age}, Role: ${this.role}`;
}
}
3. ラジオボタンまたはタブメニューでのクラス変数変更
- HTMLにおいて、ユーザーがラジオボタンまたはタブメニューを使用して、異なるクラス変数のセットを選択できるようにする。
ラジオボタンの例
<form>
<label><input type="radio" name="personOption" value="option1"> Option 1</label>
<label><input type="radio" name="personOption" value="option2"> Option 2</label>
<label><input type="radio" name="personOption" value="option3"> Option 3</label>
</form>
タブメニューの例
<div class="tab">
<button class="tablinks" onclick="selectOption('option1')">Option 1</button>
<button class="tablinks" onclick="selectOption('option2')">Option 2</button>
<button class="tablinks" onclick="selectOption('option3')">Option 3</button>
</div>
4. エクセルファイルの読み込みと書き出し機能（JavaScriptで実装）
エクセルファイルの読み込み
function handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const data = event.target.result;
const workbook = XLSX.read(data, {type: 'binary'});
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(firstSheet);
// テーブル変数に変換
processData(jsonData);
};
reader.readAsBinaryString(file);
}
エクセルファイルの書き出し
function exportToExcel(data) {
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "export.xlsx");
}
5. クラス変数とテーブル変数の連動
- ユーザーが選択したオプションに応じて、クラス変数を変更し、それに基づいて処理を実行。
function selectOption(option) {
const data = JSON.parse(localStorage.getItem('tableData'));
let person;
switch(option) {
case 'option1':
person = new Person(data[0].Name, data[0].Age, data[0].Role);
break;
case 'option2':
person = new Person(data[1].Name, data[1].Age, data[1].Role);
break;
case 'option3':
person = new Person(data[2].Name, data[2].Age, data[2].Role);
break;
}
document.getElementById('result').innerText = person.displayInfo();
}
この要件定義と仕様をもとに、Webクライアント側でエクセルファイルの読み込みと書き出しを実装し、ユーザーが直感的に操作できるインターフェースを構築できます。
Linuxサーバを用意してMySQLをインストールして、アプリは同一サーバ内にデプロイしてなければ疎通と連携できるようにNWを設定してデータベースを利用できそうですね。