AIの力で爆速開発！Laravel + React + TypeScriptで育成チャットペットを作ってみた話
Takamizawaはじめに
最近は、AIを活用しながら新しい技術を学ぶという選択肢がグッと身近になってきました。僕自身、仕事でLaravelとReact、TypeScriptを使った案件が控えていたこともあり、「この機会に一度自分で手を動かして学びたい」と思い、今回のプロジェクトに取り組むことにしました。
でも、ただのチュートリアルをなぞるだけでは物足りない…。
どうせなら遊び心のあるアプリを作りたい。そして、技術の勉強だけでなく、AIの力も活用して“効率よく・楽しく”開発してみたい。そんな思いから生まれたのが、**チャットでやり取りしながら育てられるAIペットアプリ「Huwarin（ふわりん）」**です。
このアプリでは、ユーザーごとにペットとの会話履歴を記憶し、そのやり取りに応じてペットの性格やステータスが変化していきます。性格が変わると、返答の雰囲気やアイコンまでもが変化。ちょっとした対話を重ねるうちに、まるで本当に育っていくような体験が味わえます。
実際に動作するアプリはこちら👇
🔗 http://huwarin.com/
この記事では、このアプリを通して学んだ技術スタック（Laravel + React + TypeScript）の話はもちろん、ChatGPTなどのAIをどのように開発に活かしたか、その具体的な活用法や感想を交えながらご紹介していきます。
「AIを活用して開発・学習してみたい」と思っている方に、少しでもヒントや勇気を届けられたら嬉しいです！
そもそもなぜこの構成（Laravel + React + TypeScript）に？
今回のプロジェクトでは、バックエンドにLaravel、フロントエンドにReact + TypeScriptという構成を選びました。理由はシンプルで、実際の仕事でこの組み合わせの開発が控えていたためです。事前に手を動かしながら学んでおくことで、業務での立ち上がりをスムーズにしたいと考えました。
この構成を選んだもう一つの理由は、それぞれの技術が得意とする役割が明確で、責務の分離がしやすいことです。
LaravelはAPI設計やデータベース管理が得意で、認証やルーティングなどの機能も豊富。Reactはユーザーインターフェースの構築に柔軟で、状態管理も洗練されており、TypeScriptを加えることで保守性や型の安心感も得られます。
実際にこの構成で開発を始めてみると、バックエンドとフロントエンドの責任を明確に切り分けながら、それぞれを独立して改修・改善できる点がとても快適でした。「とりあえず全部Laravelで…」のような構成では味わえない、モダンな開発体験を体感できたのは大きな収穫です。
さらに、今回の学習・開発ではAI（主にChatGPT）を活用したことが、学習の質とスピードを一気に引き上げてくれました。
何かわからないことが出てきたとき、公式ドキュメントを読むのと並行して「この機能ってこういう実装でいい？」とAIに尋ねることで、理解が深まりやすくなり、無駄な試行錯誤がぐっと減ったと感じています。
次のセクションでは、実際にどのように技術を組み合わせてアプリを構築したのか、全体の設計や構成、開発時の工夫などを詳しくご紹介します！
開発の全体構成とポイント
今回のアプリ開発では、「フロントエンドとバックエンドを明確に分離した構成」にこだわりました。これにより、それぞれの役割がはっきりし、後々の機能追加や修正もスムーズに行えるようになっています。
フロントエンド：React + TypeScript
Reactを選んだのは、UIの状態管理がしやすく、ユーザーとのインタラクションを柔軟に表現できるからです。TypeScriptを導入したことで、開発中に型のエラーを早期に発見でき、複雑になりがちなデータ構造も安心して扱えました。
UI側では、ペットとのチャット画面、ステータスの表示、プロフィール編集など、ユーザー体験を重視した作りにしています。状態管理にはuseStateやuseEffectを中心に構成し、最小限のロジックで構築しました。
バックエンド：Laravel
LaravelはAPIのルーティングや認証、データベース設計に活躍しました。特に会話の履歴管理や、ステータス変化のロジックをサーバー側で制御することで、ユーザーごとの会話履歴に応じてペットの性格やアイコンが変わるという仕組みを実現しています。
データベースには、ユーザー情報、会話履歴、ペットの現在の性格やステータスを管理するテーブルを用意しました。Laravelのマイグレーション機能を活用することで、開発中もスムーズにテーブル設計を更新できました。
フロント・バックの連携
APIはLaravel側でJSON形式で提供し、Reactからはfetchやaxiosを通して非同期通信を行いました。開発中、レスポンス構造にずれが生じた際も、TypeScriptの型チェックが早期に問題を発見してくれるため、安心感がありました。
このように、技術を役割ごとに整理し、分担することで、効率よく・見通しよく開発を進められたと感じています。
次のセクションでは、アプリの目玉でもある「育成ペット」の仕組みについて、より詳しく紹介していきます！
チャット育成ペットの仕組み
このプロジェクトの核となるのが、「チャットで育つAIペット」というコンセプトです。単に会話するだけでなく、やり取りの内容によってペットの性格やステータスが変化していくという体験を設計しました。
会話の記憶と反映
ユーザーが入力したメッセージと、それに対するAIペットの返答はすべてサーバー側に記録されます。これにより、ユーザーごとの会話履歴が維持され、前回までのやり取りを踏まえた返答が可能になります。
例えば、何度も優しく語りかけると、ペットは次第に穏やかな性格になり、逆に短い命令形ばかりで会話すると、クールでドライな性格へと変わっていきます。
ステータスと性格の変化
会話の中で使われたキーワードや語調を元に、独自のロジックで「性格パラメーター」を変化させています。一定の条件を満たすと性格が切り替わり、性格に応じて返答の言い回しやテンションも変わるようにしました。
さらに、性格に合わせてペットのアイコン画像も自動的に変化するようにしています。たとえば、元気な性格のときは明るい表情のアイコン、冷静な性格のときは落ち着いた表情に切り替わります。視覚的にも「育ってる感」が出るようにこだわりました。
プロフィールのカスタマイズ
ユーザーは、自分の名前やアイコンをプロフィールとして設定できるようになっており、ペットとのやり取りにもその情報が活用されます。親密度が高まると、名前で呼びかけられたり、ユーザーの特徴に合わせた反応が返ってくるようにもしています。
このように、ただのチャットボットではなく、「関わることで変化する存在」としてのAIペットを目指しました。
次は、このプロジェクトでAI（ChatGPTなど）をどのように活用したかをご紹介します！
AI活用の実際のところ
今回の開発では、ChatGPTを中心としたAIの力を思いきり活用しました。結論から言うと、「学習しながら作る」というスタイルにおいて、AIはまさに最強のペアプログラマーでした。
実装中の壁 → すぐに質問
まず、LaravelやReact、TypeScriptに関する疑問が出たときは、すぐにChatGPTに聞いて解決するという流れを取りました。例えば「Laravelでユーザーごとに会話履歴を管理するにはどうするのが一般的？」とか、「TypeScriptでstateの型を安全に管理する方法は？」といったことを、その場で相談できるのが大きな安心感でした。
設計や方針のブレストにも活用
「性格の変化をどういうパラメーターで管理すれば良さそうか？」といった抽象的なテーマについても、AIに聞くことで複数のアイデアを得ることができました。考えを整理しながら進めるうえで、思考の壁打ち相手としてもかなり優秀です。
実際に使った例：
- 会話履歴のスキーマ設計
- APIとフロントのエラーハンドリング方法
- アイコン画像の切り替えロジックの実装アイデア
- 「性格が変わったとき、どんな文章に変化させるか？」という自然言語調整のヒント など
無駄な時間が激減
特に感動したのは、「調べるのに時間がかかりそうなこと」にサクッと答えが返ってくる点です。ドキュメントを読み解く前に「こういうことやりたいんだけど、書き方の例ある？」と聞くだけで、具体的なコードが提示されるので、実装スピードが圧倒的に上がりました。
正直なところ、今回AIを使わなければ、ここまで完成度の高いものをこのスピードで作るのは無理だったと思います。「AIを使う＝ズル」ではなく、効率的な学び方・作り方のひとつの選択肢として、もっと多くの人に活用してほしいと強く感じました。
次は、そんな開発を通じて得られた気づきや学びについて、振り返ってみたいと思います！
作ってみて得られたこと
このプロジェクトを通して得られたものは、単なる技術的な知識だけではありません。AIを味方につけることで、自分の学び方そのものが変わったと実感しています。
まず、Laravel + React + TypeScriptという構成は、最初は少し身構えていた部分もありましたが、実際に手を動かしていくうちに、それぞれの技術の強みと連携の仕方が肌感覚で理解できるようになりました。
特に、フロントとバックを分離して開発することで、機能ごとに集中して取り組めるメリットを実感しました。
そして何より、ChatGPTをはじめとするAIツールの活用が、学習の質と効率を大きく底上げしてくれたことが大きかったです。わからないことを即座に聞ける安心感、アイデアを一緒に考えてくれる柔軟性、そしてコードを書く上での即戦力。まさに“常時スタンバイしてくれているエンジニア先輩”のような存在でした。
さらに、育成ペットというユニークなテーマで遊び心を持って開発できたことで、モチベーションも維持しやすく、学びが楽しいものになりました。「技術を学ぶ＝大変な作業」ではなく、「自分で作りたいものを形にするための手段」なんだという、原点を思い出させてもらった気がします。
次はいよいよ最後のセクションです！
この記事のまとめと、これから試してみたい人へのメッセージをお届けします！
おわりに
今回、AIを活用しながらLaravel + React + TypeScriptを組み合わせてアプリを作ってみたことで、「自分でもここまでできるんだ」という実感を持つことができました。技術の壁にぶつかっても、AIに相談しながら乗り越えていくというスタイルが確立できたことで、学ぶこと・作ることへのハードルがグッと下がったと感じています。
「AIを使うのってハードル高そう」「まだ自分には早いかも」と思っている人にこそ、ぜひ試してみてほしいです。
実際に使ってみると、エラーの理由や設計の相談、UIのアイデア出しまで、本当に頼れる相棒になってくれます。何より、自分ひとりでは思いつかなかった発想や方法にたどり着けるのが楽しい！
今後は、この「Huwarin（ふわりん）」にもっと機能を追加して、育成要素を深めたり、他ユーザーとの交流機能なども試してみたいと考えています。アイディア次第で、もっと広がるポテンシャルを感じていて、継続的に育てていけたらなと思っています。
気になる方は、ぜひ一度遊んでみてください👇
🔗 http://huwarin.com/
また、感想やフィードバックがあれば大歓迎です！同じようにAIを活用してものづくりにチャレンジしている方と繋がれたら嬉しいです！
