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

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

要件定義

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

主要機能:

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;
});

}