Tango!
イメージで覚える英単語学習アプリ
視覚的なイメージと英単語を関連付けて効率的に学習。
Unsplash APIで豊富な画像から選択し、自分だけの単語帳を作成できます。
開発期間
2024年1月〜2024年3月
開発体制
個人開発
このアプリでできること
記憶に残る英単語学習
視覚的イメージで英単語を覚えるので、従来の暗記よりも長期記憶に定着しやすくなります
効率的な学習時間
単語の入力作業が自動化されているので、覚えることに集中でき学習時間を大幅に短縮できます
継続しやすい学習習慣
学習進捗が見える化されているので、モチベーションを保ちながら継続的に語彙力を向上させられます
開発の背景
課題
私はオンライン家庭教師のアルバイトで学生に英語を教えていました。その中で、学生が単語を覚えるのに苦労している姿を見て、なんとかして英単語学習のハードルを下げることはできないかと考えました。
解決法
英単語を視覚的に覚えられるようなアプローチを模索し始めました。英単語をイメージで覚える学習法は、記憶に定着しやすく、単語が複数の意味を持っていたとしても覚える量が少なくて済むというメリットがあることで知られています。私自身、英単語をイメージで覚えたことで英語の文章を読むスピードが向上した経験がありました。このアプローチを活かして、英単語学習をより効果的にサポートするアプリを開発することにしました。
ターゲットユーザー
英語学習初心者から中級者
基礎的な英単語から中級レベルの語彙まで、段階的に学習したい方
英単語を効率的に覚えたい人
短時間で効果的に語彙力を向上させたい、忙しい学習者
視覚的な学習を好む人
画像やイメージを活用した記憶法で学習効果を高めたい方
使用技術
フロントエンド
- React
- Bootstrap
バックエンド
- Node.js
- Express
データベース
- MongoDB
その他
- Unsplash API
主な機能
デモ・機能紹介
トップページ
ユーザーがアクセスすると最初にこの画面が表示されます。ボタンをクリックして移動することでログインまたはユーザー登録をすることができます。
単語カード作成画面
新しい英単語カードはこちらから作成することができます。カードのタイトルと概要を登録することができます。
単語登録画面
こちらのページから新しい英単語を登録することができます。 発音記号や日本語訳等、入力欄が多数ありますが、必須項目は英単語のみと少なく、簡単に登録することができます。
単語情報のスクレイピング
この機能では、Webから単語情報を自動的に取得することができます。英単語を入力した状態で自動入力ボタンをクリックすると、そのほかの情報をスクレイピングして取得し、自動で埋めてくれます。
単語のイメージ画像の登録
Unsplash APIを使用して、英単語のイメージ画像を30個取得します。その中から自分が一番しっくりくるものを選んで登録することができます。
手動での修正
英単語の情報は手動でも入力、修正することができます。自動取得した情報が正確でない場合や、個人的な学習メモを追加したい場合に便利です。
単語登録後の単語一覧画面
新しく英単語を登録すると、一覧画面に登録した単語が追加されます。学習状況や進捗度が一目で確認できます。
登録した英単語の詳細
登録した英単語の詳細はこのように表示されます。この英単語を覚えたくなったら「学習開始」ボタンをクリックします。また、登録した英単語を削除することもできます。
学習開始
「学習開始」ボタンをクリックすると、英単語のステータスが「未着手」から「学習中」に変更されます。学習の進捗を段階的に管理できます。
学習中の単語の詳細画面
学習ステップが変わると、詳細画面の右上のステータス表示や画面下のボタンが変わります。覚えられたら「学習完了」ボタンをクリックして次のステップに進みます。
学習・成長ポイント
新しく学んだ技術
MongoDB
NoSQLデータベースの設計と操作を習得
外部API連携
Unsplash APIとの統合と非同期処理
React開発
モダンなフロントエンド開発手法
苦労した点
Reactの学習
近年、フロントエンド開発ではReactのようなフレームワークが用いられるということを知り、本アプリケーションでもフロントエンドはReactを用いて実装しようと考えました。しかし、それまでReactには触れたことがなかったため、Reactを学習しながらの実装となりました。特に苦労したのはuseReducerの学習です。英単語の登録画面での入力情報の状態管理はuseReducerを用いて実装しましたが、useReducerをなかなか理解することができず実装に苦戦しました。Udemyの講座を何度も見返しながら仕組みを理解し最終的に実装することができました。
不十分な開発計画
アプリケーションを作る際に、要件定義や設計を十分に行わなかったため、実装中に多くの問題が発生しました。特に、データベースのスキーマの設計が不十分だったため、後から大幅な修正が必要になり、開発に不必要に時間がかかってしまいました。
今後の追加機能
単語テスト機能
ユーザーが登録した単語を使ってテストを行う機能を追加します。これにより、ユーザーはこのアプリを単語帳としてだけでなく、学習ツールとしても活用できるようになります。
音声読み上げ機能
日本における英語教育において、英語の正しい発音を理解している人が少ないという課題があります。そこで、英単語の発音を音声で読み上げる機能を追加します。これにより、ユーザーは単語の正しい発音を学ぶことができ、リスニングスキルの向上にもつながります。
単語の一括追加機能
現状では、英単語を一つずつ追加する設計になっているため、大量の英単語を学習したいユーザーにとっては効率が良くないと考えられます。そこで、CSVファイルなどから単語を一括で追加する機能を実装します。これにより、ユーザーは大量の単語を効率的に登録できるようになり、スムーズに学習に移ることができます。