プログラミング歴4ヶ月の初学者がNext.jsでAI食生活診断アプリを作ってみた【TypeScript】

アプリを紹介する前に宣伝させてください！
近々、就職活動を開始する予定です。 もし、この記事を読んで少しでも興味を持っていただけた企業の方がいらっしゃいましたら、ぜひ@wannabean_engまでお気軽にご連絡いただけますと幸いです。 どうぞよろしくお願いいたします！

1. アプリ(AI食生活診断テスト)の概要

できること

ユーザーに4択の質問をいくつか回答(約3分)してもらい、その回答をAIが分析。摂取すべき栄養素とそれに適した食品を提案します。 食生活スコアも確認できます！

主な機能

• 直感的な入力設計：それぞれの食品の摂取頻度を4択の中から選ぶだけ！
• AIによる栄養診断：難しい栄養学の知識は不要！AIが回答をもとに不足している栄養素を特定し、必要な食品を提案。今日からすぐ活かせる！
• ログイン機能：ログイン(任意)すれば過去の診断結果を一覧で見れる！登録なしでも勿論OK

2. 開発背景

開発の動機と目的

健康志向が高まる中、「自分の食生活は本当に正しいのか？」 そんな悩みはありませんか?僕自身も健康に気をつかい、とりあえず野菜中心の食生活を意識していましたが、それがはたして正解かどうかは栄養学の知識もなかったので分かりませんでした。この課題を解決するため、AIを使ってユーザーの食生活を分析してフィードバックするアプリを開発しました。皆様の食生活の見直しにつながれば幸いです☺️

学習の集大成として

2024年9月からプログラミング学習を始めて4ヶ月。 これまで学習してきたことを詰め込んだ、集大成とも言えるアプリです！ぜひ皆さんに触ってもらいたいです！

3. 技術スタック

OS

• WSL2（Ubuntu）

フロントエンド

• Next.js (v15, App Router)、TypeScript
• CSS：Tailwind CSS
• UIライブラリ：Material UI
• スキーマバリデーション：zod
• デプロイ：Vercel
• プロキシ：Cloudflare

バックエンド

• Node.js（Express）、TypeScript
• スキーマバリデーション：zod
• Docker
• デプロイ：AWS App Runner、ECR

データベース

• MongoDB

認証

• Firebase Auth

バージョン管理

• Git、 GitHub

テスト

• Jest

CI/CD

• CI：GitHub Actions
• CD：Vercel (デフォルト)

外部API

• OpenAI（Geminiへの移行を検討中）

4. 工夫したポイント

フロントエンド：UXを最優先

簡単で直感的な入力方法を設計。質問数も一定量あるのでユーザーの途中離脱を防ぐために、サクサクと回答できるように努めました。大変参考にさせていただいたのはMBTI診断のサイトです。

技術的チャレンジ

• Next.jsのSSG/SSRを使って初期表示速度を爆速に。 最初はReactのみで開発しましたが、開発を終えたあと、「Next.jsで開発したらどうなんだろう?」とふと疑問に思ったので、フロントエンドをNext.jsで書き直してみると、初期表示が爆速になりました。詳しいパフォーマンス差については過去に記事化したのでこちらを参照してください

• コードをロジックごとに分離し、再利用性・可読性を高めました。また、質問やデータ構造（スキーマ）を変更するだけで、次回のAI診断アプリにもコードの大部分を再利用できるように書きました。

• DI(依存性注入)を意識した設計を行い、テストしやすいコードに。

5. 開発で得た経験（苦労と学び）

苦労したこと

• テスト：これまでテストをしたことがなかったので、テストのしやすさという観点でコードを書いておらず、痛い目をみました。その後、モジュールの疎結合を意識して設計し直し、徐々にテストができるようになりましたが、現在進行形でテストについては苦労しながら勉強しています。
  

• モノレポ構成でのデプロイ：開発初期はモノレポ構成だったのでデプロイに非常に苦戦しました。VercelやRender、Herokuなどでトライするもうまく行かず途方に暮れていましたが 、App Runnerを使えば開発環境で使ったコンテナをそのままECRにプッシュすれば、デプロイできることを知ってからめちゃくちゃ楽になりました。

• セキュリティを考慮したトークン管理： 開発当初は、動的データ取得を行うページを全てSSRで実装していました。しかし、Cookieを使ったトークン認証は、CSRF攻撃などのセキュリティリスクを伴うため、慎重な設計が必要でした。最終的に、セキュリティと実装難易度のバランスを考慮し、CSRへと設計変更することで、この課題を解決しました。

楽しかったこと

• 一番は使ったことがないモダンな技術にたくさん触れられたことです。このアプリを作るまでは、Next.jsはおろか、CI/CD、AWS、テストもやったことはありませんでした。必要に応じて学びながら進めるスタイルで臨みましたが、予想以上に多くの知識を得ることができました。アプリ開発をしながら学習を進めると、実装ベースでインプットすることになるので、インプットする度に自分の戦闘力が上がっていく気がして楽しく学習を続けられました。たくさんのエラーや不明点と格闘しながら進めることにはなりますが。。。笑

• コードレビューを貰う際も、とてもワクワクしました。自分で調べたり、試行錯誤するだけでは決して辿り着かないような視点から毎回指摘をもらえて、それを基に改善していく作業は自分のレベルを飛躍的にアップさせてくれました。

6. 今後の展望

改善ポイント

• DIコンテナの導入 ：DIを意識して、環境変数などを引数で受け取る設計にしたことでバックエンドのエントリーポイントがファットになってしまっている。DIコンテナの導入でそれらを解消したい

• フロントエンドのテスト：Jest以外のツール(React Testing Libraryなど)も導入して、フロントエンドのテストを行いたい

• セッションクッキーの導入：実装難易度の高さから今回は導入できなかったが、ゆくゆくはセッションクッキーを用いてSSRを行い、安全かつより高速なレンダリングを実現したい

新しいチャレンジ

• AI診断系のアプリなら、食生活以外でも今回作ったものをそのまま再利用できそうなので、上記の改善ポイントを補いながら再度トライしたい。

• セキュリティ全般の学習。どういった所が脆弱性につながるのか、今後のアプリ開発のために知っておく必要がある

7. まとめ

プログラミング学習開始から4ヶ月、これまでの学びを総動員し、このAI食生活診断アプリ を開発しました。多くの方に実際に使っていただき、ご意見やご感想をフィードバックとして頂ければ幸いです。

そしてこのアプリ開発を一つの区切りとして、近々、就職活動を開始する予定です。 もし興味を持ってくださる方がいらっしゃいましたら、ぜひ@wannabean_engまでご連絡いただけますと大変嬉しく思います！！！ どうぞよろしくお願いいたします！

8.関連リンク

• アプリへのリンク : HealthChecker.app

• GitHubリポジトリ : Health Checker App - GitHub

• Next.js vs React パフォーマンス比較検証 : Next.js vs React パフォーマンス比較

• 16 personalities (MBTI診断) : 16 Personalities - 性格診断テスト