Django + Next.js のフルスタック構成で、認証フローの設計（BFFパターン / HttpOnly Cookie）や フロント・バックエンド分離のアーキテクチャを実装することを主な目的として開発。
公開URL：https://takashikurino.com
⚠️起動に1〜2分ほどかかります
| ローカル開発 | Docker Next.js Django Postgres Nginx |
|---|---|
| デプロイ | Vercel Render Neon(PostgreSQL) Resend |
| GitHub | ‣ |
| ER図 | ‣ |
| ワイヤーフレーム | ‣ |
| API設計 | API設計 |
| 進捗 | todoリスト |
https://drive.google.com/file/d/1XID0lPSdVMnqqwqC2N5q2apjLaragoew/view?usp=sharing
認証アプリはdj_rest_authを利用し、フロントからはNext.jsのRoute Hundlerを採用。バックエンドのURL隠蔽や、クッキーの取り扱いの簡略化、セキュリティ向上が目的。 その他アプリ(今回は取引やカテゴリー)の通信はNext.jsのServerActionを利用。レスポンスの状態管理はReactのState等を利用。詳細はAPI設計に記載。（開発状況も合わせて記載済み）
昨今のAIの進化は凄まじく活用する他ないですが、0からの設計を経験しておくのは歴史的観点から見ても必要だと捉えた事と、知識のない状態でのAIの活用は指示が的確でない場合、動いたとしても、再利用性、保守に長期的な懸念点があったため、必要最低限に活用しました。
実際にバックエンドとの通信でフロント側のコードをAIに作ってもらったところ、フレームワークのバージョンの差異、コードの過剰記述が目立ちました。
例えば、ReactのコードをAIに組み込んでもらった際にデータがどのように通信し、状態管理が今どうなっているのか追うのが複雑になり、コードを理解することが困難になりました。
そのため、それぞれのフレームワークの設計思想を理解することも重要だと捉え、リファレンスを読み、ファイル構成やコンポーネント構成を理解しながら開発したところ、理解度とスピードが上がりました。
CSSのデザインの部分はAIを使って効率を上げました。
AIの利用は一通り自分で開発したことのあるフレームワークをClaude Code等を使って全体を効率に作成していくのが開発の最短最速の道のりだと感じています。現在でのAIの活用はそれ以降以下のようにとどめました。