英単語帳の要件定義と仕様

以下は、英単語帳の要件定義と仕様です。

### **要件定義**

**目的**: 英単語とその意味を管理し、ウェブアプリケーションで表示するためのシステムを構築します。

**主要機能**:
1. Excelファイルから単語データをインポートする。
2. JavaScriptで単語データを管理する。
3. ウェブブラウザで単語帳のデータを表示する。

### **仕様**

1. **テーブル変数 = エクセル**
   - **形式**: Excelファイル（例: `vocabulary.xlsx`）。
   - **構造**:
     - `Word`: 単語
     - `Meaning`: 意味
     - `Category`: 品詞（例: noun, verb, adjective）
     - `Example`: 例文

   - **サンプルテーブル**:
     | Word   | Meaning    | Category  | Example                     |
     |--------|------------|-----------|-----------------------------|
     | Example| A thing or person used as a model | noun      | This is an example.         |
     | Run    | Move swiftly | verb      | I like to run.              |
     | Happy  | Feeling or showing pleasure | adjective | She is happy.               |

2. **クラス変数 = JavaScript**
   - **クラス定義**:
     - `Word`: 単語を管理するクラス。
       - **プロパティ**:
         - `word`: 単語
         - `meaning`: 意味
         - `category`: 品詞
         - `example`: 例文
       - **メソッド**:
         - `addWord()`: 単語をクラス変数に追加する。
         - `getWordsByCategory(category)`: 指定された品詞の単語を取得する。

3. **WEB = クライアント**
   - **インターフェース**:
     - **ファイルアップロード**: ユーザーがExcelファイルをアップロードするためのインターフェースを提供します。
     - **データ表示**: インポートされた単語データをウェブページ上で表示します。

   - **技術**:
     - **HTML**: 基本的なウェブページ構造。
     - **JavaScript**: データの処理および表示。`SheetJS`ライブラリを使用してExcelファイルを読み込み、JavaScriptでデータを管理します。
     - **CSS**: スタイリング（必要に応じて）。

### **全体のフロー**

1. **ユーザー**がExcelファイルをアップロード。
2. **JavaScript**がExcelファイルを読み込み、データを`Word`クラスのインスタンスに変換。
3. **クライアント**側で単語データが表示される。

この仕様に従って、英単語帳のシステムを設計し、実装することができます。




// 単語クラスの定義
class Word {
    static words = [];

    constructor(word, meaning, category, example) {
        this.word = word;
        this.meaning = meaning;
        this.category = category;
        this.example = example;
    }

    static addWord(wordInstance) {
        Word.words.push(wordInstance);
    }

    static getWordsByCategory(category) {
        return Word.words.filter(word => word.category === category);
    }
}

// Excelファイルを処理する関数
document.getElementById('file-input').addEventListener('change', handleFile, false);

function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 最初のシートを処理
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet);

        // 既存の単語データをクリア
        Word.words = [];

        // データをクラスにロード
        json.forEach(row => {
            if (row.Word && row.Meaning && row.Category && row.Example) {
                const wordInstance = new Word(row.Word, row.Meaning, row.Category, row.Example);
                Word.addWord(wordInstance);
            }
        });

        // 結果をHTMLに表示
        displayWords();
    };
    reader.readAsArrayBuffer(file);
}

function displayWords() {
    const output = document.getElementById('output');
    output.innerHTML = '';

    // データをカテゴリごとに表示
    const categories = ['noun', 'verb', 'adjective'];

    categories.forEach(category => {
        let html = `<h2>${category.charAt(0).toUpperCase() + category.slice(1)} Words</h2><table><tr><th>Word</th><th>Meaning</th><th>Example</th></tr>`;
        const words = Word.getWordsByCategory(category);
        words.forEach(word => {
            html += `<tr><td>${word.word}</td><td>${word.meaning}</td><td>${word.example}</td></tr>`;
        });
        html += '</table>';
        output.innerHTML += html;
    });
}