※ 当初、Vocab Trackerという名前にしていましたが、同じ名前のアプリが
存在するようなので、名前を変更しました。（2024年12月27日）

https://mizumot.com/vocabtracker.html

背景

自分でこういう簡単なのを作りたいなってずっと思っていて、ふと、Claudeに聞いてみたら一瞬で動くコードを教えてくれました。

Claudeに10分ぐらいでこさえてもらって爆誕w 95%なのか98%なのか語彙のカバー率が何%なら読解できているかを確認するのに使ってください。英文を貼り付けて、Load and Read Textをクリックし、知らない単語を読みながらクリックしたら何％なのか表示されます。https://t.co/r3jtCMfKKA

— MizumotoAtsushi (@MizumotoAtsushi) December 17, 2024

主な機能

1. テキスト分析

• テキスト入力: 任意の英語テキストを入力エリアに貼り付け可能。
• 語彙の分析: ボタンをクリックすることでテキスト中の単語が自動的に解析され、既知語と未知語に分類。
• 未知語のハイライト: 未知語は黄色でハイライトされ、クリックすることで単語を既知または未知として簡単に切り替え可能。

※語彙復習機能があるので、それを使用するために、単語だけ入力して、それを復習することも可能です。

---

2. 語彙カバー率の計算と可視化

• 進捗バー: 全体の単語数に対する既知語の割合をプログレスバーで表示。
• 統計情報:
  • 既知語/全単語数
  • 語彙カバレッジ率 (%) をリアルタイム表示。

---

3. 読んだテキストと未知語リストの管理

• 単語詳細情報: 未知語にカーソルを当てるとレベル（New SVL12000 基準）や意味がポップアップで表示。クリックするとWeblioでの意味確認が可能。
• 保存: 分析済みのテキストを保存して、後で再確認可能。
  
• 保存済み一覧: 保存したテキストは履歴として閲覧でき、既知語、未知語、語彙カバー率などの情報も表示。
  
• 削除: 不要な保存済みテキストは削除可能。

---

4. 生成AIによるテキストのサマリー

• 2言語でのサマリー：GPT-4oを使ってテキストのサマリーが英語と日本語で可能。1文で短くサマリーするプロンプトが使用されている。

---

5. データのエクスポート

• CSVエクスポート: 保存された語彙データをCSV形式でエクスポート可能。
• データ内容: 日付、単語数、カバー率、未知語リスト、テキスト内容を含む。

---

6. 語彙復習機能（Vocabulary Review）

• 復習モード: 保存された未知語をシャッフルして出題。
• 語彙の選択：未知語のうち、復習する必要の無いものは削除できる。
• 重要語彙のみを対象：約29,000語のリスト以外は対象とならない。
• 文脈表示: 各単語の元の文脈や意味を確認しながら復習可能。
• 形式の選択：Yes/No、多肢選択、新しい文を使った多肢選択（New Sentence）を選ぶことができる。
• 結果表示: 正解数、復習が必要な単語リストを表示。

New Sentence モードは、例文をllama-3.3-70b-versatileを使って自動生成できるので、新しい文脈での学習が可能です。

---

7. データベース機能

• Listed（ソート可能）：登録日時
• Word（ソート可能）：Lingueeへのリンク、音声の確認、Power Thesaurus（同義語・対義語）へのリンク
• Level（ソート可能）：新SVL12000のレベル
• Meaning：意味
• Context：ターゲット語を含んだ元の英文（センテンス）
• Phrases：フレーズレベルでの語の使用方法を確認するために Just the Word、SKELL (Sketch Engine for language learning)、CorpusMate へのリンク
• Generated: Llama 3.3 (70B) versatile model を使用したターゲット語を含んだ新しい英文（New Sentence のボタンをクリックすると生成される）
• Review で正答した日時：Yes/No、多肢選択、新しい文を使った多肢選択（New Sentence）を正答した日時
• データベースのダウンロード：Phrasesの列以外の情報すべてがcsvファイルでダウンロード可能

---

技術詳細

• 技術スタック:
  • JavaScript（IndexedDB, DOM操作）
  • PapaParse（CSV解析）
  • CSS（デザインとUIスタイル）
• 語彙データ:
  • New SVL12000（1,000語ずつの12段階レベル）
  • 残りの17,000語（レベルはN/Aとなっているもの）は、ANC単語頻度準拠英和辞典を参照。

---

追加説明

• GPTを使ったサマリーの生成以外は、バニラJavaScript（JavaScriptのみ）なのでサクサク動きます。
• 私はJavaScriptを自分で一から書くのはできません。今回はほぼすべてClaude 3.5 Sonnet にやりたいことを伝えて、コードを自分で検証しながら作りました（GPT-4oでは、ここまでのことはできなかったので、Claudeはコーディングが得意ということがわかります。）
• IndexedDBを使用しているので、ブラウザのキャッシュをクリアしなければ、データは残っています。
• サーバー側ではデータを収集していないので、安心して使ってください。
• ちなみにですが、中国語版は形態素解析をしなければならないのですが、Python（spaCy）を使って、氷野 善寛 先生（目黒大学）に助けてもらいながら、中国語読解語彙チェッカーを作ってみました。