本記事では、私がインターン期間中に開発した JavaScriptのメソッド学習に特化したクイズアプリ「JS Fun Methods Quiz」 を紹介するとともに、開発を通して学んだことについてお伝えします。
1. アプリ概要
| アプリ名 | JS Fun Methods Quiz |
| ターゲット | プログラミング初学者 |
| 目的 | 通勤時間や待ち時間を活用して、手軽にJavaScriptのメソッドの学習ができる |
| 特徴 | メソッド学習に特化したクイズ形式や直感的な操作性 |
2. 制作のきっかけ
私自身JavaScriptのメソッドに関する知識が浅く、より深い知識を身につけたいと思ったことが制作のきっかけです。
また、電車で通学していることもあり、その時間の中で手軽に学習できるアプリが欲しいと思い、片手でも学習しやすい操作性を意識して設計しました。
3. コア機能
- 難易度や時間に応じた問題出題機能
- 学習履歴・進捗機能
4. 技術スタック
| デザイン | Figma |
| フロントエンド | Angular |
| バックエンド・データベース | Strapi |
| コード管理 | Git, GitHub, SourceTree |
5. 操作画面
デモ動画
5-1. モード画面
モード画面から難易度と時間を選択でき、問題数は設定時間によって変化します。
5-2. 問題出題画面
初級では4択問題が出題され、1問ごとに問題のフィードバックを確認できる仕様となっています。
一方で、中級は4択と入力形式がランダムに出題され、上級になると入力形式のみの問題となります。
また、初級と中級には問題のヒントを用意しており、アイコンを押すことでウインドウが表示されます。
「採点する」ボタンを押す、または右上のタイマーが0になった場合に採点と集計を行い、結果画面に遷移します。
5-3. 結果画面
結果画面では、「正答数」「平均解答時間」「連続正解記録」の3つが表示され、保存も可能です。
さらに下にスクロールしていくと、各問題の正誤判定と解説を確認できます。
5-4. 履歴・進捗画面
履歴・進捗画面では、解答履歴を集計したデータや学習履歴を確認することができ、学習状況の把握やモチベーションの維持を目的としています。
6. 開発で苦労した点
一番苦労したのは API連携 です。バックエンド実装の経験が浅かったこともあり、フロントエンドとの連携処理でつまずき、エラーがなかなか解決しない場面が何度もありました。
それでも、メンターのエンジニアに面談していただきながら原因を切り分けて進めたことで、挫折せずにモチベーションを保ったまま開発を続けられました。
7. 開発を通して学んだこと
私がこの開発を通して学んだことは3つあります。
1つ目は、ユーザー視点を意識したアプリ作りです。
これまでは「自分が作りたいもの」を中心に開発していました。しかし、それだけではターゲットが曖昧になり、アプリの方向性も定まりません。ユーザー視点で設計することで、必要な機能や実装の方向性が明確になり、課題解決につながるアプリ作りができると感じました。
2つ目は、GitHubを使ったプロジェクト管理です。
GitHubでは、コードの変更履歴を一元管理できます。さらに、Issueや進捗を視覚的に管理できる機能もあり、チーム開発での運用を想定した管理が可能です。開発を通してGitHubの操作や運用の基礎を学べたことは、大きな収穫でした。
3つ目は、開発における優先順位の付け方です。
私は、つい作りたい機能から実装してしまう傾向がありました。しかし実際の現場では、限られた期間の中で必要な機能から実装することが求められ、優先順位付けが重要になります。
インターンでは週1回、メンターとの面談があり、開発状況や残り期間を見ながら「次に何を作るべきか」具体的なアドバイスをいただけました。その経験を通して、他の開発でも優先順位を意識して進めることを心がけるようになりました。
8. 感想
今回のインターンシップを通して、自分で企画やデザインしたものが、形になっていく過程を見ることができるのはとても楽しかったです。デザインだけでなく、データ処理やAPIの仕組みなど、アプリ全体を意識しながら開発できたことも貴重な経験でした。
大変な部分もありましたが、分からない点を気軽にメンターへ相談できたり、目標設定や優先順位付けを調整してもらえたりしたことで、モチベーションを維持しながら取り組めました。
今回の経験を今後の開発に活かし、よりよいアプリを提供できるエンジニアを目指していきたいと思います。