Reactだけでここまでできる！AI診断アプリの構築とAPI設計の工夫
Takamizawaはじめに
「診断アプリって、ちょっとしたお遊びツールでしょ？」
そんなふうに思っていた自分が、React＋ChatGPTの力を借りて本格的なAI診断アプリを作ってみたら、想像以上に“技術的に面白い体験”になりました。
今回ご紹介するのは、私が開発した「未来の動物占い（AI診断）」というWebアプリです。
URLはこちら👉 http://huwarin.com/game/animal/
このアプリは、Laravelをバックエンドに据えながらも、実質的な処理のほとんどをReactで完結させた構成で作っています。ページ遷移なしのSPA（Single Page Application）でありながら、ChatGPT APIと通信して動的に診断結果を生成するという、なかなかにチャレンジングな構成です。
この記事では、なぜReact主導で開発を進めたのか、どんなふうにLaravelを“裏方”として使ったのか、そしてAPI疎通の設計や工夫について、リアルな開発体験を交えて紹介していきます。
「Reactを使って何か本格的なものを作ってみたい」
「LaravelとReactの組み合わせって実際どうなの？」
そんな疑問を持っているエンジニアの方に、少しでも参考になれば嬉しいです。
作ろうと思った理由と技術的な狙い
AIを使った診断系コンテンツは最近増えていますが、「Reactだけでどこまでリッチに、しかも1ページで完結できるか？」というのが今回の開発の出発点でした。
もともとLaravelをメインで使っていたこともあり、従来ならサーバーサイドで入力受付→診断→結果表示までを一貫して処理するスタイルを取りがちです。しかし今回は、UIもロジックも、極力React側で完結させてみたいというチャレンジがテーマでした。
その背景には、個人開発でよくある「サーバー再構築したくない」「UIの修正を即反映させたい」といったモチベーションもあります。Reactなら、状態管理・ルーティング・非同期通信をすべてフロント側で設計できるので、開発も運用もかなり身軽になります。
また、「未来の動物占い」というテーマは、技術的な実験をしながらも楽しめる題材としてぴったりでした。占いや診断というコンテンツは、ユーザーの入力→即レスポンスという体験が重要なので、SPA×AIという構成との相性も良く、Reactで組む価値が大いにありました。
使用技術の構成について
今回のアプリでは、以下の技術を使用しています。
- フロントエンド：React（+ TypeScript）
- バックエンド：Laravel（APIルーティングのみ）
- 外部API：OpenAI（ChatGPT）
この中でメインとなるのは、やはりReactです。診断の入力フォーム、API通信、診断結果の表示まですべてがReact上で完結しています。しかも、画面遷移をせずにシームレスな体験を実現しており、まさにSPA（Single Page Application）の強みを最大限活かしています。
Laravelは、基本的にはAPIのエンドポイントを定義しているだけです。ページ自体はすべてReactで構築し、Laravelは「診断リクエストを受け取ってOpenAI APIに中継し、返却する」という役割に限定しています。このような構成にすることで、フロントエンドとバックエンドを明確に分離しつつ、役割を最小限に保つことができました。
また、TypeScriptを使うことで、ChatGPT APIとのやり取りでも型の恩恵を受けられます。入力内容やレスポンスの構造を明示的に定義することで、開発の見通しがよくなり、バグも減りました。
SPA×API×AIという組み合わせは、最初は複雑そうに思えるかもしれませんが、構成をシンプルに保てば、意外とスムーズに開発できます。
Laravelは裏方としてどう使っているか
今回の構成では、Laravelはあくまで「APIサーバー」として動作しています。ページの表示や画面のロジック、ルーティングは一切Laravel側では行わず、フロントエンドであるReactがすべて担っています。
Laravelが果たしている役割は主に以下の3つです。
- ReactのSPAのルートを返す（最初の1ページのみ）
- OpenAIとの通信を行うエンドポイントを提供（/api/～）
- 最低限のバリデーションやセキュリティチェック
つまり、Reactが画面を管理し、ユーザーの操作を受け取り、その内容をLaravelのAPIに送信する。Laravelはそのリクエストを受けて、ChatGPT APIと通信し、結果をReactに返す──という流れです。
この構成のメリットは、Laravelをロジックの中継点に限定することで、アプリ全体の責務が明確になることです。画面まわりの変更や修正はReact側のみで完結し、APIの仕様が変わらない限りLaravelには手を加える必要がありません。
また、デプロイの観点でも、LaravelとReactのビルドを分けられるため、環境構築や運用もスムーズになります。いわゆる“フロント主導”のアーキテクチャを試してみたい人にとっては、かなり実践的な構成だと思います。
Reactで完結する診断フローの作り方
今回の診断アプリは、画面遷移なし・ページリロードなしで完結する、完全なSPA（Single Page Application）として作っています。ユーザー体験をできるだけスムーズに保つために、すべての処理をReact内で制御する設計にしました。
診断の流れは以下のようなステップです。
- ユーザーがフォームに入力（名前や性格など）
- 「診断する」ボタンを押す
- ChatGPT APIへ非同期リクエストを送信
- 結果が返ってくるまでローディング表示
- 結果を画面に即時反映（DOMを再レンダリング）
これらすべての処理は、ReactのuseStateやuseEffectを使って管理しています。状態変化に応じてコンポーネントが自動的に再描画されるため、ユーザーは一切の「待ち時間」や「遷移のストレス」を感じずに診断結果までたどり着けます。
さらに、エラーハンドリングや読み込み中のフィードバックもReact側で細かく制御しており、サーバーとの通信状況に応じたUX改善にも対応しています。
このように、React単体で診断の流れを完結させることで、UI・ロジック・状態の管理が一元化され、非常に効率的な設計となりました。
ChatGPT APIとの連携方法（API疎通のポイント）
このアプリの中核となるのが、ChatGPT（OpenAI API）との連携部分です。ユーザーの入力に応じて、適切な診断結果を返すためには、API通信の設計が非常に重要になります。
まず、フロントエンドのReact側から、LaravelのAPIエンドポイントへPOSTリクエストを送信します。その際に、ユーザーが入力した情報（名前・性格タイプなど）をプロンプトとして組み立て、Laravel側でOpenAIのAPIにリレーします。
非同期通信は、fetchやaxiosなどで実装可能ですが、今回はエラーハンドリングやステータス管理がしやすいaxiosを採用しました。また、TypeScriptを使っているため、APIリクエスト・レスポンスの型定義も事前に行い、安全性と可読性を確保しています。
通信フローのざっくりとした流れは以下の通りです。
- ユーザー入力を元にプロンプトを生成（React）
- LaravelのエンドポイントにPOSTリクエストを送信（axios）
- LaravelがOpenAI APIと通信し、レスポンスを受け取る
- 結果をそのままReact側へ返却
- Reactで結果を受け取り、DOMに表示
API通信中は「診断中…」といったローディング表示を挿入し、ユーザーに安心感を持たせています。また、APIエラーが発生した際には、明確なエラーメッセージを返すようにし、デバッグ性も意識した設計にしました。
このように、フロントとバックをつなぐ「橋渡し」としてのAPI設計は、React×Laravel構成において非常に重要なポイントになります。
Reactで作ってみて感じたこと
今回の開発を通じて、あらためて「Reactってやっぱりすごいな」と実感しました。
診断アプリのように、ユーザー入力 → 処理 → 結果表示という流れがシンプルで明確なケースでは、Reactのコンポーネントベースな設計がとにかく噛み合うんです。
特に良かった点は以下の通りです。
- 状態管理（useState, useEffect）でUIとロジックが自然に連携
- ローディングやエラー表示などの制御がしやすい
- SPAとしてUXが圧倒的にスムーズ
- 再利用性の高いコードを書きやすい
- 開発中に即座にUIを反映・確認できる柔軟さ
Laravelを裏方に回したことで、React側の自由度が格段に上がりました。フォームの挙動やアニメーションの導入、状態ごとの出し分けなど、細かいUXの工夫がやりやすく、ユーザー体験の質を高めることができました。
また、開発していて純粋に「楽しかった」というのも大きなポイントです。自分の操作が即座にUIに反映されていく感覚や、ChatGPTとの対話がシームレスに動く気持ちよさは、Reactならではのものだと思います。
診断アプリはもちろん、インタラクティブなツール全般において、Reactは本当に強力な選択肢になると改めて感じました。
アプリ紹介・実際に触ってみよう
ここまで読んでいただきありがとうございました！
今回ご紹介してきた診断アプリ「未来の動物占い（AI診断）」は、以下のリンクから実際に触っていただけます。
使い方はとてもシンプルです。
- 名前や性格タイプなどの項目を入力
- 「診断する」ボタンをクリック
- 数秒後、AIによる診断結果が表示されます
レスポンスはすべてChatGPTが生成しており、ユーザーごとに異なる“あなただけの動物キャラ”を提案してくれます。フロントエンドは完全なReact製、ページ遷移なしのスムーズな体験をぜひ体感してみてください。
ちょっとした遊び心を詰め込んだアプリですが、ReactとChatGPTの連携例としても実用的なケースになっていると思います。技術的な観点から見ても、何かしらヒントになればうれしいです！
おわりに
今回の開発を通して、改めて「Reactでここまでできるんだ」という手応えを感じました。
Laravelを裏方に回し、フロントエンドを主役に据えた構成は、実装の柔軟性だけでなく、運用面でも非常に扱いやすいものでした。
AI診断という題材は一見エンタメ寄りですが、裏側では非同期通信・状態管理・API設計など、実に多くの技術要素が詰まっています。だからこそ、**「遊びながら学べる」**ような開発体験になり、ReactやChatGPT APIの理解も深まりました。
これからも、こういったインタラクティブなコンテンツをReactでどんどん作っていきたいと思っていますし、同じように「自分でも作ってみたい」と感じてくださる方がいればとても嬉しいです。
今後は、診断結果をSNSシェアできる機能や、デザイン面のブラッシュアップ、ユーザー属性に応じた回答の最適化など、さらに進化させていく予定です。
ぜひ、興味を持っていただけた方はアプリを触ってみてください！
そして、ReactやAIを使ったものづくりを楽しんでいきましょう！
