フルスタックWebアプリ
フロント・サーバー・DB を1つのフォルダで。生成AIと一緒に、非エンジニアでも通しで作れる構成
フルスタックは、画面・サーバー・データベースを 1 つのフォルダで扱う作り方です。生成AIが全体を見渡せるので、非エンジニアでも端から端まで形にできます。
- 言語は TypeScript 1 つ — 画面もサーバーも書ける
- 表示は loader、保存は action で 1 か所に書ける
- 基礎編で学んだ往復・守り・データがここで 1 本につながる
なぜ 1 つのフォルダにまとめるのか
Web アプリは、利用者が見る画面（フロント）、裏でデータを扱うサーバー、データをしまうデータベースの 3 層でできています。従来はこの 3 つを別々の担当・別々のプロジェクトで作り、あとからつなぎ込むのが普通でした。
各ブロックや矢印をクリックすると、その仕組みの説明がここに表示されます。
別々に作って後でつなぐ — 全体を見渡しにくい
この図をテキストで読む
構成図「バラバラに作る？ 1フォルダで作る？」。ブロック6個、つながり4本。 枠: 従来：役割ごとに分かれる（ブロック3個）、フルスタック：1フォルダで完結（ブロック3個）。 【ブロック】 - フロント担当: 画面（別プロジェクト） - バックエンド担当: サーバー（別プロジェクト・別言語） - つなぎ込みが大変: 別々を連携・分業 - 画面もサーバーもDBも1箇所: 1つのフォルダにまとまる - 言語は1つ（TypeScript）: 画面とサーバーを行き来 - 生成AIが全体を見渡せる: 非エンジニアでも通しで作れる 【流れ】 - ❌ 役割ごとにバラバラ: フロント担当 → バックエンド担当 → つなぎ込みが大変 - ✅ 1フォルダで完結: 画面もサーバーもDBも1箇所 → 言語は1つ（TypeScript） → 生成AIが全体を見渡せる
React Router での1リクエストの流れ
各ステップ・参加者・分岐をクリックすると、その仕組みの説明がここに表示されます。
この図をテキストで読む
シーケンス図「1リクエストの流れ（React Router の構成）」。参加者4人、ステップ12個。 【参加者】（左から右） - ブラウザ: React の画面 / app/routes - ルートモジュール: loader / action（app/routes） - Drizzle: DBアクセス（app/db） - PostgreSQL: データの保管庫 【流れ】（上から下へ） ── ① 画面を開く（サーバーで組み立てて返す） ── 1. ブラウザ → ルートモジュール: ページを要求（GET） 2. ルートモジュール（自身で処理）: loader が動く（サーバー側） 3. ルートモジュール → Drizzle: 必要なデータを問い合わせ 4. Drizzle → PostgreSQL: SQLで取得 5. PostgreSQL → Drizzle: 行を返す（応答） 6. Drizzle → ルートモジュール: データを返す（応答） 7. ルートモジュール → ブラウザ: HTMLにして画面を返す（SSR）（応答） ── ② 操作してデータを変える（action） ── 8. ブラウザ → ルートモジュール: フォーム送信（保存ボタンなど） 9. ルートモジュール → Drizzle: action が書き込みを依頼 10. Drizzle → PostgreSQL: 保存（INSERT / UPDATE） 11. PostgreSQL → Drizzle: 完了（応答） 12. ルートモジュール → ブラウザ: 最新の画面に更新（応答）
唯一の正解ではなく1つの型
規模や目的によっては、役割を分けた作り方が向く場面もあります。それでも、非エンジニアが生成AIと小さく早く形にするには1フォルダ完結が好相性です。いま見ているこのサイト自身も、React Router v8 のフルスタック構成で作られています。
押さえておきたい用語
- フルスタック
- 画面（フロント）からサーバー、データベースまで、アプリの全層をひとまとめに扱うこと。
- loader / action
- React Router で、表示前のデータ取得（loader）と操作時の書き込み（action）をサーバー側で行う仕組み。画面と同じファイルに書ける。
- Drizzle
- TypeScript でデータベースを型安全に扱う道具（ORM）。このサイトでも採用している。
- 1フォルダ完結
- フロント・サーバー・DB を別プロジェクトに分けず、1つのフォルダにまとめる構成。生成AIが全体を見渡しやすい。
- React Router
- 画面遷移に加え、loader / action でサーバー処理も担えるフルスタックフレームワーク。このサイトの土台。
ここから先へ
この解説とつながりのあるページ