RootLink

WebアプリtoCAI

一つの単語を入力すると、対義語・派生語まで"ついで覚え"ができるAI英単語アプリを作成した。

使用言語

TypeScript、 React、 Supabase

期間

2025/05-2025/06

クライアント

個人開発

役割

Frontend Development、 UI Design、 UX Design

チーム構成

使用技術

TypeScript、React、Supabase

Outline

このアプリではユーザーが単語を追加すると、裏側でGeminiが動いて派生語や対義語を自動で提案する。必要な情報だけをAIで抽出することで無駄なく学べる仕組みになっている。

さらに対義語・関連語まで「ついでに覚える」体験を通じて、通常よりも効率よく単語を習得できることを目指している。

Objectives

このアプリを開発するにあたって、いくつかの理由があった。

広告まみれの辞書アプリが多かった

以前使っていた単語帳アプリは広告が多く操作も煩雑で、例文も実用的とは言えないものでした。学習の集中を妨げる要素が多く、使い続けるのが難しいと感じていた。

試験用に固定された単語ではなく、自分で単語を集めて育てられる単語アプリが欲しかった

市販の単語アプリはTOEICやIELTSなどの試験に特化しており、あらかじめ用意された語彙に従って学ぶ形式が中心である。

しかし、洋画や洋書を読む中で出会うような未知の単語を自分で記録し辞書のように意味や使い方を調べながら育てていけるアプリはなかなか見つからなかった。

以上の2点を兼ね備えたアプリが私の欲しいものだったので、それを満たすものを作ることがモチベーションの起点となった。

Key Features

単語検索 & サジェスト機能

検索フォームに任意の単語を記入すると、対象の単語に付随した対義語 + 関連語まで表示される。

単語追加機能

そして、そのサジェストされたカードも単語リストに追加することが可能である。

技術スタック

カテゴリ	使用技術
言語	React, TypeScript
DB設計	Supabase
フロントエンド	Tailwind CSS
ビルドツール / 開発環境	Vite
テスト	Jest, React Testing Library
AI	Gemini 2.5 Flash
CI/CD	Firebase, GitHub Actions

アーキテクチャ図

Supabaseのテーブル設計

単語の保存構造や型定義など、今後の機能追加を見据えた拡張性など考える要素が多く常に手探りで進めていた。
words テーブルで単語データを管理し、saved_words テーブルでユーザーごとの保存履歴を持たせる構成を最終的に採用した。

UX

SPとPCで体験を切り分けた設計

検索機能ではスマートフォンでは縦長の画面を活かし、入力フォームが途中でFAB（Floating Action Button）に切り替わる動線を設計した。
一方PCでは、横幅を活かして常時フォームを表示する構成にするなどデバイスごとに最適な体験を目指した。

AI Integration

Geminiの出力パース調整

英単語を入力するだけで意味や用法に加えて類義語・対義語も同時に得られる機能を実装することが今回のゴールである。

その実現手段としてGemini 2.5 Flashを選定。

プロンプト内でJSON形式の出力を厳密に指定し、レスポンスには意味・品詞・発音記号・例文・和訳・類義語・対義語を含む構造を要求。受け取ったレスポンスをアプリ内でパース・整形し、カードUIとして表示することで、入力した単語に関連する語彙も自然に学べる設計とした。

const parseGeminiResponse = async (): Promise<GeminiParsedResult | undefined> => {
    const prompt = `
    次の英単語「${input}」について、日本語で以下の形式の**JSON文字列のみ**を返してください。装飾や説明文は不要です。
    mainは検索結果で、mainの関連語をsynonyms、対義語をantonymsに表示してください。
{
    "main": {
        "word": "単語",
        "meaning": "意味（日本語）",
        "pos": "品詞",
        "pronunciation": "発音記号",
        "example": "英語の例文",
        "translation": "例文の日本訳"
    },
    "synonyms": {...},
    "antonyms": {...}
}`;

エラー対策などは下記の記事にまとめた。