Use it or Lose it
自分だけのオリジナル単語管理・クイズ・進捗管理アプリ
プロジェクト概要
目的
英単語クイズを繰り返し解くことによって、英単語の定着を目的としたWebアプリケーションです。英単語一覧の表示・追加・編集・削除、CSVインポートなどにより、自分だけのオリジナルの英単語クイズを作成できます。
開発背景
苦手な英単語を覚えるためのツールが欲しくて開発しました。バックエンド・フロントエンド・Dockerの実践的なスキル習得も兼ねています。
プロジェクト画像
メイン画面 - 単語一覧とクイズ機能
Progress画面 - 英単語の学習の記録
技術詳細
使用技術
Laravel 10
Next.js 15
React 19
TypeScript
Tailwind CSS
MySQL
Docker
開発期間
2025年7月（約1週間）
開発体制
個人開発
デプロイ
ローカル環境（Docker）
主な機能
学習記録管理
- • 単語管理：単語の追加、編集、削除
- • クイズ：ランダム出題、正解/不正解の記録
- • 進捗表示：正解率、最近の間違い単語など
- • CSV一括インポート
- • ソート、検索、ページネーション
UI/UX
- • React Navigationによる画面遷移
- • レスポンシブデザイン
開発過程
1
要件定義・設計
主に英単語の管理とクイズに機能を絞って、UI/UXの設計を行い、必要な機能を洗い出しました。
2
バックエンド・フロントエンド開発
LaravelでAPIを構築し、Next.js/Reactでフロントエンドを開発。Dockerでローカル開発環境を整備し、MySQLでデータを管理しました。
3
テスト・運用
基本的な動作確認を行いました。今後追加機能として間違った単語の復習提案や英⇔英モード、カテゴリー別の出題なども検討してきたいです。
成果・学び
技術的な学び
- • LaravelとNext.jsのAPI連携
- • Dockerによる開発環境構築
- • データ集計・可視化の実装
- • UI/UX設計の工夫
プロダクト面の学び
- • 学習継続のモチベーション向上
- • ユーザー目線での機能設計
- • 実践的なフルスタック開発経験