【制作物】画像で覚える英単語クイズアプリ

アプリへのリンク　リポジトリへのリンク

目次

1. アプリ概要

• アプリイメージ画像
• コンセプト
• なぜ作ったのか？
• 実装機能（できること）

2. 技術的なまとめ

• 使用技術
• (★)技術的なこだわり
• 難しかったこと
• 技術的に学んだこと

3. その他まとめ

• (★)マインド的なこだわり
• ユーザーフィードバックにより改善したこと

4. 今後に向けて

• アプリの改善点（ユーザーからのフィードバックを元に）
• 今後学びたい技術

①アプリ概要

アプリイメージ画像

コンセプト

• 従来の単語帳の様な「英語⇄日本語」で記憶するのではなく、「英語⇄イメージ」で記憶することで英語脳を作ろう

参考画像（出典：https://fun-english.net/what-is-eigonou/ ）

なぜ作ったのか？

1. 現在中国語を学習しており、その学習の質を向上させるため
   （中国に向けたサービス開発に興味がある。）
2. ユーザーが付くアプリに必須な、リッチなUIを実装できるようになるため
   （ReactのUIコンポーネントライブラリを試す中で、TypeScriptやFirebaseについても理解を深めようと考えた。）

実装機能（できること）

1. ログイン機能

• ゲストorメアドでログインできる

2. クイズ機能

• クイズができる
• 結果は自動で保存される

3. 復習機能

• 覚えた単語の数を確認できる
• 覚えた単語にチェックができる
• 単語ごとにイメージ画像が確認できる

②技術的なまとめ

使用技術

項目	詳細
フロントエンド	TypeScript, React
デプロイ先	Firebase Hosting
DB	Cloud Firestore
認証	Firebase Authentication
API作成	Cloud Functions
CD	GitHub Actions
Formatter	Prettier
UIライブラリ	Chakra UI

技術的なこだわり

1. 単語の数や種類を拡張できる構造にしたこと
2. クイズを最初にロードすることでUXの向上を図ったこと
3. 「再利用するコンポーネント」と「1度のみ利用するコンポーネント」をフォルダで分ける設計にしたこと

難しかったこと

1. 知識が少ない中でも、ドキュメントを読み解く必要があったこと（Qiitaなどに逃げない）
2. stateの管理場所を間違え、コードをほどき直す必要がでたこと

技術的に学んだこと

1. TypeScript

• 名前補完が効くこと
• 型を使い回すことができること
• 型定義で堅牢なアプリが作れること

2. React

• コンポーネント単位でUIを構築できること
• stateで状態管理ができること

3. Firebase

• アプリが公開しやすいこと
• サーバー管理が不要であること
• 多様な機能があるので拡張性があること

③その他まとめ

マインド的なこだわり

1. ミニマムな機能でも、デプロイして使ってもらうこと
2. チーム開発のように、プルリク/レビュー/マージまでを擬似的に実践したこと
3. アドバイスをしてもらっていた先輩の時間を奪わないように、質問仕方を意識したこと
4. 学んだことをZennで発信し、知識定着を狙ったこと＊Zennアカウントへ

ユーザーフィードバックにより改善したこと

1. クイズの表示速度を向上させた
2. テスト結果を単語帳に保存できるようにした

④今後に向けて

アプリの改善点（ユーザーからのフィードバックを元に）

1. Firestoreとの通信速度の改善（必要な部分だけ取得・更新する）
2. クイズをプリロードをする検討
3. ゲスト会員から正規会員へ変更する導線を作る
4. 音で正誤を判定できるようにする
5. 間違えた問題のみのクイズ機能を作る

今後学びたい技術

1. フロントエンド

• GitHub Actions（CI&CD）
• Redux
• Next.js
• Sass

2. 自然言語処理 API（GCP）

• Cloud Natural Language
• Cloud Speech-to-Text