BINGEです。

英語が苦手な同僚のSheenaくんのためにAIで英単語復習ツールを作ったのでご紹介します。

制作の背景

普段はインタラクティブアーティストやカメラマンとして活動しているSheenaくんですが、

彼はとても英語が苦手です。

１年ほど前にそれだけ英語が出来ないと困るだろうということで
中学生向けの参考書、ドリルやオンライン英会話を試しましたが、なかなか成果が出ずあきらめていました。

しかし最近、AIツールの発展で非エンジニアの僕もSheenaくんもスクリプトを自作したり、
開発業務のコーディングをするようになり、弊害が出てきました。

口頭でコマンドを伝えたときのスペルミスや、エラーメッセージを翻訳する時間がかかったり、英語ができないと共同で作業するときに不便なことが多いのです。

そこで、今回AIツールClaude Codeを使って英単語復習ツールを作成しました。

Claude Codeは、複数ファイルのコード理解・修正・提案までできる、開発者向けの超賢いAIコーディングアシスタントです。

仕様

ゴールは単語のスペルとある程度の意味が覚えられることです。

ツールの仕様

• 覚えてほしい単語を誰でも追加・編集できる
• エビングハウスの忘却曲線に沿って、忘れかけたころに出題される
• 苦手な単語がよく出る
• ローマ字・活用形・同義語・ひらカナ混在でもOK
• 出勤・退勤時などに自動でミニテスト（20問）
• 正答率や習熟度を一覧・グラフで確認できる
• Google Sheetsとブラウザに自動保存
  
  ウェブページにアクセスするとテストを受けるページが開きます。

問題数は20問で、覚えが悪い単語を優先的に出題します。

　単語の一覧や習熟度はダッシュボードで確認でき、追加や編集もここからできます。

🛠 技術的な構成（ざっくり）

• フロントエンド（画面側）
  • React（v18）：UIを構築。単語一覧やテスト画面などを動的に表示
  • React Router v6：ページ遷移（トップ・単語・履歴など）を制御
  • カスタムCSS：スマホでも使いやすいようにレスポンシブ対応
• バックエンド（サーバー処理）
  • Google Apps Script（GAS）：APIを自作。スプレッドシートとのやり取りを担当
  • Google Sheets：単語・習熟度・履歴などのデータを保存する“簡易データベース”として活用
• データ保存の仕組み
  • 単語やテスト履歴はGoogle Sheetsに自動保存
  • ネットがなくても使えるようにブラウザ（localStorage）にも二重保存
• デプロイ（公開）
  • Vercel：GitHubと連携して、コードを更新すると自動でWebサイトを再ビルド・公開

結果

導入して数日ですが、着実に効果が出ているようです。(スコアが悪いとAIが辛辣なコメントを残してきます)

7/4時点↓

7/7時点↓

僕はClaude Codeに「こういうサイトを作って」と指示しただけなので難しいことは何もわかっていませんが、
アイデアを自由に形にできる時代になりつつあると実感しました。

誰でもAIを使いこなせる時代だからこそ、アイデアを形にするスペシャリストとして自分たちのValueを発揮できるように精進したいと思います。