私がインターン期間に作成したクイズアプリ「PettoTomo」を紹介します。
PettoTomoは、猫に興味はあるが飼う自信がない人向けのアプリです。クイズ形式とかわいいキャラクター、自動復習で楽しく知識を身につけ、責任感や準備度を確認できます。安全で楽しい学習を通じて、飼い主とペットの幸せな共生を目指します。
アプリ概要
| アプリ名 | Petto Tomo |
| ターゲット | 猫に興味があるけど、まだ迷っている人 |
| 目的 | ネコを飼いたいけど、正しい知識や心の準備ができていない不安を解消 |
| 強み | クイズ形式で動物の正しい知識を楽しく学べる |
| 使用した技術 | Angular, TypeScript, HTML, CSS,Strapi |
PettoTomoの流れ
サインイン・サインアップ
本アプリの利用にはアカウント登録が必要です。アカウントをお持ちでない場合は、ユーザー名(3文字以上)・メールアドレス・パスワード（6文字以上）を入力して登録してください。既にお持ちの方は、メールアドレス（またはユーザー名）とパスワードでログインしてください。
ログインしたら、ユーザーガイドに移動します。
最も退屈なステップが完了したら、最も楽しい部分、つまりかわいい猫と名前の選択に進むことができます。
ネコを飼い始める
好きなネコを選んで、名前をつけよう。はじめるボタンを押せば、かわいい猫たちと一緒にクイズに挑戦できます！
解答画面・正誤判定画面
猫を作ったら「挑戦」を押してクイズへ。正解なら緑○、不正解なら赤✕を表示し、最後に正解と解説を表示します。
クイズ終了
1日のノルマを達成するか、すべての問題を完了したときに、画面に猫のお別れの言葉やノルマ達成のメッセージが表示されます。また、アプリはユーザーが回答したすべての質問を記録します。
ネココレクション
上記に加えて、ユーザーが所有していたすべての猫のコレクションもあります。クイズ終了時に正解率を判定し、低ければ猫は元の住処に戻り、高ければ卒業猫として解放されます。
ユーザー統計
最後に、卒業まで途中で別れた猫の件数を含む、学習結果の概要を表示します。詳細は「問題回答詳細」と「猫リスト」から確認できます。
開発で苦労したこと
開発中、さまざまな困難に直面しました。なかでも特に手間がかかったのはStrapiでのユーザー管理です。しかし、その経験を通じて、情報検索能力という重要なスキルを身につけることができました。とはいえ、どれだけ調べても解決できない疑問にぶつかることがあり、そのようなときはメンターが的確な質問で必要な答えへと導いてくれました。
学んだこと
1. 課題設定と問題の分割
アプリ開発ではまず、「誰のどんな課題を解決するのか」を明確にする重要性を学びました。今回は
「ネコを飼いたいが知識不足で不安な人」 をターゲットに設定し、その悩みをどう解消するかを軸に企画しました。
また、開発中には複雑な問題が発生しますが、大きな課題を小さなサブタスクへ分解することで、解決までの道筋が見えやすくなりました。この方法は難しい問題でも一歩ずつ確実に前進できる有効なアプローチだと実感しました。
2. 技術スタック選定と環境構築
今回の開発では Angular・Strapi・Docker を中心とした技術スタックを採用しました。
フロントエンド、バックエンド、開発環境の役割を明確に分けることで、開発工程を整理し、効率的な開発体制を構築できました。
フロントエンドには Angular を使用し、コンポーネント単位でUIを構築しました。
バックエンドには Strapi を採用し、APIと管理画面を実装しました。
また、Docker を利用して開発環境を統一しました。
使用技術の紹介
- Angular
UIをコンポーネント単位で整理し、保守しやすいフロントエンドを実装 - Strapi
APIと管理画面を短時間で構築できるヘッドレスCMS - HTML
Webページの構造（見出し・文章・画像など）を定義する言語 - CSS
HTMLで作成した構造に対して、色・配置・サイズなどのデザインを適用する言語 - Docker
開発環境を統一し、環境差異によるトラブルを防ぐために使用
開発者にとってのメリット
これらの技術を採用したことで、UIの保守性向上やバックエンド開発の効率化を実現できました。
また、開発環境を統一したことで環境構築にかかる作業を最小限に抑え、実装や改善により多くの時間を割くことができました。
技術選定が開発効率や品質に大きく影響することを、今回の開発を通して学びました。
まとめ
今回のインターンでは、企画から開発まで一連の流れを実践的に学ぶことができ、とても貴重な経験となりました。特に、「ネコを飼いたい人の不安を解消する」という明確な課題設定を起点に、必要な機能を考え、技術スタックを選定し、実際に動く形へ落とし込むプロセスは大きな学びでした。
また、Angular・Strapi・Docker を使いながら、効率的に開発を進めるための環境構築やタスク分割の重要性も強く実感しました。最初は難しく感じた部分も、試行錯誤を重ねる中で少しずつ理解が深まり、自分の「できること」が確実に増えたと感じています。
この経験を通して、技術だけでなく企画力や問題解決力も成長できました。支えてくださったメンターの皆さまに感謝するとともに、今回学んだことを今後の開発に活かしていきたいと思います。