チャットアプリケーションの開発

みなさん、おはようございます。ただいまAM1:53。寝たのは8時で起きたのが23時。仕事開始は24時。0時ともいう。

人が寝静まった時間というものは、それだけでワクワクします。

人と違うことに価値がある。AIと共に生きる石井です。

さて、ここでは、チャットアプリケーション開発の中身をみていきましょう。

構成としては、

•Reactフロントエンド（UI Compornent、axios通信、localStorage）

•Laravel API（Controller, Model, CORS対応、CSRF無効）

•MySQL DB（diagnosis_sessions, diagnosis_logs）

Reactは、JavaScript拡張ではありますが、フロントエンドに特化して、コンポーネント開発ができるというところに価値があります。

フロントというのは、一般の利用者側のスマフォとかPCとかの画面側で見ているところになります。

その部分を分離することと、サーバサイドから切り離してクライアント側で実行することには非常に大きな意味と意義があります。

JavaScriptはもともとクライアント側のリソースを使って動作します。もちろんこのReactでつくったアプリもクライアント側で動作するようにしてあります。(サーバサイドでレンダリングしたいという目的の場合は別途)

ReactからサーバへのやりとりはすべてAPIをつくってやりとりしますので、DBへ直接アクセスなどはしません。

テーブルを設計してマイグレーションしてしまえば、そのテーブルへのインターフェイスをAPI、具体的にはコントローラのメソッドとしてつくることは非常にシンプルです。

そして、そのAPIを呼び出すのは axiosで通信してJSONで結果を返すようにしておくと扱いしやすいです。

🔗 Laravel API連携マップ

フェーズ	API関数	エンドポイント	内容
Phase0	postStart()	/api/diagnosis/start	セッション開始
Phase0〜2	postLog()	/api/diagnosis/log	発言・回答ログ保存
Phase0/Result	postComplete()	/api/diagnosis/complete	診断完了・ユーザー情報保存
Entry	postEntry()	/api/diagnosis/entry	特典申込登録
Result/Complete	getComplete()	/api/diagnosis/{token}	診断結果取得

🧭 React診断チャット：完全UXフロー（Start → Complete）

診断をおこなうさい、開始ページでセッションを初期化します。セッション自体はLaravel側で生成したセッショントークンを保管して使いまわします。初期情報収集では名前やメールアドレスなどの質問に答えた情報を保管し、フェーズ１，フェーズ２ではそれぞれ用意した質問に対応した回答結果を保存します。診断結果を表示して、申し込みフォームへと誘導します。フォーム入力してもらい送信したら、最後にもう一度診断結果を表示しておわりです。

フロントエンドの開発はレイアウトの決定、スタイルCSSの決定など見栄えの部分で決めておかないと、あとからの影響が大きいです。

特に、スマフォ側のブラウザキャッシュが強力なので、その影響により変更が反映されないなどの混乱になる原因になります。

ほんとフレームワーク、ブラウザ、ありとあらゆる点でキャッシュは開発上での最優先チェックポイントです。

🧭 StartPage：診断導入フェーズの構成

🔹 主な責務

• YouTube動画の埋め込み再生（IFrame API）
• 再生終了後に /diagnosis へ自動遷移
• セッション初期化（postStart()）を強制実行し、localStorage に保存

🔹 技術ポイント

機能	実装内容
セッション初期化	postStart() を呼び出し、diagnosis_session_token を localStorage に保存
動画再生	YT.Player を playerRef に格納し、終了イベントで navigate("/diagnosis")
再生完了表示	isEnded によりメッセージ切り替え

本当は、自動再生させたかったのですが、無音動画でないと自動再生はAPIでできないYoutubeの仕様制約があります。まあ、ここはユーザの意思で再生するで問題ないです。

手帳學　簡易診断アプリケーション