Reactで作る英単語クイズアプリ

Published
2025-06-09
Author
MT
Tags

「今年こそは英会話やTOEICのスコアアップを頑張るぞ!」


ここ数年、毎年のように「今年こそは英会話やTOEICのスコアアップを頑張るぞ!」と決意を新たにしてきました。

ですが、そのやる気も3日と持たず、気づけばYouTubeやTikTok、Instagramを眺める日々。

気づいたときには、英語学習のことなんてどこかへ行ってしまっています。


英語学習の中でも、私が特に苦手なのが「単語の暗記」です。文法の学習は比較的好きなのですが単語を覚える作業にはどうしてもやる気が続かず、つい後回しにしてしまいがちです。


「TOEICを頑張るぞ!」と意気込んで、銀のフレーズ金のフレーズも購入しましたが、いまやホコリをかぶっている状態です。


どうにか継続しながら単語学習ができないか‥。

そう考えていたとき、ふと浮かんだのが「自分で英単語アプリを作る」というアイデアでした。


Reactを使って自分専用の単語クイズアプリを作れば、Reactの理解も深まり、TOEIC対策にもなる。

まさに一石二鳥の取り組みとして、今回、初めて自作アプリの開発に挑戦してみました。



アプリのコンセプトはシンプルです。

TOEIC頻出単語を中心に、4択形式で答えていくクイズ型の英単語アプリ

銀のフレーズに掲載されている単語をベースに、出題される単語と選択肢をランダムで生成しています。


また、単語データは ChatGPTを活用してJSON形式で自動生成し、それをアプリ内で読み込むことで手軽に英単語の拡張ができる設計にしています。


現在は、約300語の単語データがランダムで自動出題される仕組みになっています。

今後、ある程度覚えてきた段階で金のフレーズなど、より難易度の高い単語に切り替えられるようにすることで、レベルに応じた学習ができるようになります。


こうしたデータの切り替えや追加を自分自身で行える設計にしているため、「覚える→出題範囲を調整→再挑戦」というサイクルを繰り返しながら、飽きずに継続できるのではと期待しています。


また、一回の学習で10問ずつ回答するとリザルト画面に遷移するように設計しており、「一日だけ頑張って終わり」ではなく、あえて少し物足りなさが残るようにすることで、自然とまたやろうと思えるような工夫を取り入れています。

このようにして、学習のハードルを下げつつ、日々継続しやすい仕組みを目指しました。


アプリで工夫したこと

学習効率を高めるために、いくつかの工夫も取り入れました。

まず、単語の音声を読み上げる機能を実装し、視覚だけでなく聴覚からも英語に慣れることができるようにしました。TOEICではリスニングも重要な要素の一つなので、「見る・聞く・選ぶ」を繰り返すことで、より多角的に単語を定着させることができるようにしています。


また、UIもシンプルで直感的に操作できるよう意識しました。特にリザルト画面では、「どの単語を間違えたのか」「自分が選んだ答えは何だったのか」「正しい答えは何だったのか」がひと目でわかるように色分けや強調表示を行い、視覚的に分かりやすい構成にしています。


こうしたUIの工夫により、単語学習へのハードルを少しでも下げ、継続しやすい体験につながればと考えています。


最後に

英語学習における「単語暗記が苦手」「学習が続かない」といった自身の課題に向き合い、 その悩みをどうすれば解決できるかを自分なりに考え、アイデアを出してアプリとして形にしました。 こうしたプロセスを通じて、コーディングスキルだけでなく、発想力や課題解決への姿勢といった面でも、成長できたと感じています。

最後まで読んでいただき、ありがとうございました!