BLOG

ブログ

【5期生】クイズアプリ Drive Meister

私がインターンで作成したクイズアプリ「Drive Meister」をご紹介します。このアプリは、普通自動車免許の学科試験を手軽に勉強できるよう設計しました。特にスワイプ操作を取り入れることで、直感的な操作で手軽に学習できる点が魅力です。この記事では、アプリの機能や開発を通じて学んだことをお伝えします。

アプリ概要

アプリ名Drive Meister
ターゲットスキマ時間を活用して、普通自動車免許の学科試験を効率よく勉強したい人
目的スキマ時間を活用して学習し、学科試験に合格すること
強みスワイプ操作で直感的に問題を解ける
使用した技術Angular, TypeScript, HTML, SCSS, Firebase

クイズの流れ

ホーム画面

Drive Meisterホーム画面
Drive Meisterマイページ

ホーム画面には、学科試験問題を解答するボタンと復習問題を選択するボタンがあります。仮免・本免の復習問題数も一目で確認できます。また、右上のアイコンをタップすると、ログインやガイドページに遷移できます。

ガイド画面・ログイン画面

Drive Meisterログイン
Drive Meisterガイド

先ほどのマイページの画面から操作説明をしているガイド画面やログイン画面に遷移します。

解答画面・正誤判定画面

Drive Meister解答(1)
Drive Meister解答(2)

左右どちらかにスワイプして問題に解答します。その後問題の結果が表示されます。上下どちらかにスワイプしてそのまま次の問題に進むか、復習に問題を追加してから次の問題に進むか選択します。復習の問題をしたスワイプすると復習から削除します。

クイズ解答終了

finishボタンを押すと解答が終了して総合結果が表示されます。結果を確認後、ホーム画面に戻ります。

学んだこと

1.ユーザー視点を意識した企画

製品やサービスを生み出す時に用いられる「プロダクトアウト」と「マーケットイン」という2つの考え方があります。アプリ開発においては、ユーザーの需要を満たし、尚且つ使いやすいことが大切だと思います。その上でマーケットインの考え方を用いることでより良いアプリ開発ができることを実感しました。

<用語説明>
プロダクトアウト・・・革新的な技術やアイデアを用いて、製品やサービスを開発して提供すること。「良い製品を作れば売れる」という思想に基づいている。
マーケットイン・・・市場や顧客のニーズや課題を徹底的に分析し、それに応じた製品やサービスを開発して提供すること。「売れる製品を作る」という思想に基づいている。

2. 簡潔なコンセプトと明確なターゲット設定

優れた企画を生み出すためには、「簡潔なコンセプト」+「明確なターゲット」を必ず設定することが必要だと学びました。理由としては、この2つの軸を決めることができればアプリに必要な機能と不要な機能を明確化しやすくなるからです。今回開発したアプリは、「スワイプ操作で学科試験をサクサク勉強」+「教習所の空き時間でちょこっと勉強したい人」と設定しました。

使用技術の紹介

Angularとは?

Angularとは、Googleが2016年頃開発したTypescriptベースのフロントエンドフレームワークです。前身のAngularJSがバージョンアップされ、Angularになりました。Angularでは、アプリを「部品(コンポーネント)」ごとに分けて作る仕組みになっています。たとえば、Webサイトに「メニュー」「ボタン」「フォーム」がある場合、それぞれを1つの部品として分けて作ります。

一つのコンポーネント内にUIを構築する「.html」ファイル 「.css」ファイル、ロジックを記述する「.ts」ファイル、テスト用のコードを記述する「.spec.ts」の4つのファイルで構成されています。これらのファイルにコードを記述し、開発をしていく流れになります。
詳しくはこちらをご覧ください。
Angular公式ドキュメント

<用語説明>
フロントエンド・・・アプリやWebサイトの「見える部分」でデザインや操作性を決める部分です。
フレームワーク・・・アプリ開発の「便利な枠組み」。開発者が一から作る手間を省き、効率的にアプリを作れる仕組みを提供しています。

開発で苦労したこと

インターンでのアプリ開発では、エラーや課題に直面することが多く、そのたびに「自分で調べる力」と「質問する力」の重要性を痛感しました。開発中、エラーや課題に直面するたびに、自分で解決策を探る力が養われたと思います。しかしその一方で、問題を自分だけで抱え込み、解決に時間をかけすぎてしまうこともありました。この経験から、「自力で解決する力」と「周囲の力を借りるタイミング」を見極める重要性を学びました。

メンターに相談する際も、ただ「わからない」と伝えるのではなく、「どんな問題が発生しているのか」「自分で試したこと」「解決したいゴール」を整理して話すことを心がけるようになりました。相手に質問するために自分の考えを整理して言語化するプロセスを繰り返すうちに、自分自身の頭の中も整理され、「次はどう進めればよいか」を段々判断できるようになりました。結果として、調べる力と質問する力が同時に向上したと思います。

最後に一言

企画と開発の両方を一貫して学べる機会はとても貴重でした。この経験は、これからどんなプロジェクトに関わるときにも役立つと感じています。

普段のミーティングだけでなく、就職活動についても相談させていただく機会がありました。残りの学生生活を過ごす上で大変参考になりました。親身にアドバイスをくださったメンターの皆様に、この場を借りて感謝申し上げます。