PICTWEET_NEO 開発振り返り
Laravel × Breeze × MySQL × Blade + Alpine.js + Axios + Stamac による SPA風アプリ「PICTWEET_NEO」の開発を振り返ります。
初代 PICTWEET の設計思想を引き継ぎつつ、非同期通信を活用した現代的な UX を目指しました。
バージョン1：開発過程の共有
🏗️ 技術スタック
| 項目 | 技術 |
|---|---|
| フレームワーク | Laravel 12 |
| 認証 | Laravel Breeze |
| データベース | MySQL |
| フロントエンド | Blade + Alpine.js + Axios |
| 非同期通信 | Axios（REST API経由） + Stamac（Cookieベース） |
| UI | Tailwind CSS |
| 状態管理 | Stamac（Cookieでセッション情報を保持） |
🔹 開発中のキャプチャ
バージョン2：HTTP の流れ・コードの動き
ユーザーがブラウザで操作してからレスポンスが返るまでの流れ（Stamac + Cookie を使った非同期通信込み）：
🔄 HTTP リクエストの流れ
- ユーザーがブラウザで操作（例: 投稿ボタンをクリック）
- Axios が HTTP リクエストを送信
- Stamac がセッションや状態を Cookie 経由で管理
-
routes/web.phpまたはroutes/api.phpでルートが解決 - ミドルウェアが処理（認証・CSRF・ログ・Cookie読み取り）
- コントローラーの該当アクションが実行
- モデルが DB と通信
- ビュー / JSON レスポンスが返る
- ブラウザが受け取り、Stamac が状態を更新して画面を更新
🧱 コードの責務例
- コントローラー：リクエスト受け取り、サービスやモデルに処理を委譲
- モデル：データ取得・保存
- Blade + Alpine.js：DOM 操作と Stamac の状態同期
- Stamac：Cookie を使ってセッション・状態管理、非同期通信を効率化
バージョン3：開発での難所と対応
🔹 難しかったポイント
非同期通信の設計
- Axios だけでの状態管理だと、セッション管理や Cookie の同期が複雑
対応：Stamac を導入して、Cookie ベースでの状態管理を一元化
HTTP の流れ理解
- ミドルウェアやコントローラーの処理順序、API Resource の返却タイミングが分かりにくかった
対応：ログ出力を活用してリクエストからレスポンスまでの流れを可視化
認証処理（Breeze）との統合
- API 形式でのログイン後に Stamac で状態を反映させる必要があり、初期設定では動作せず
対応：ミドルウェアで Cookie を正しく読み込む処理を追加
バージョン4：所感と学び
-
PICTWEET_NEO の設計は自分なりに最大限考えた構造でしたが、ベストではない
-
今後は 拡張しやすい設計、可読性の高い設計、修正しやすい設計 を追求していく
-
HTTP の流れやミドルウェアの役割、Stamac + Cookie による状態管理の理解が深まった
-
Laravel 12 でのカーネルやブートストラップ周りの扱いに触れることができた。