React の管理画面（CRUD）をスキーマから自動生成する

React 管理画面ジェネレーターとは

生成される管理画面に含まれるもの

テーブルごとに、最低限これらがまとめて生成されます。

一覧（List）

ページング・並び替え対応の一覧テーブル。列は定義した項目から自動構成。

登録・編集フォーム

型に応じた入力欄（テキスト・数値・日付・真偽）とバリデーション。

外部キー（FK）表示

supplier_id のような FK は参照先を引くコンボボックスで表示・選択。

検索・フィルタ

型対応の検索（部分一致・範囲・完全一致）。

API 連携

生成されたバックエンド(actix/Node)の CRUD エンドポイントを呼ぶ配線込み。

ルーティング

一覧 → 新規 → 編集の画面遷移。

まずはスキーマを定義（コピーして使えるひな形）

下は「商品（products）」テーブルの例です。コピーして自分のテーブルに書き換え、d-bye で同じ内容をビジュアルに作ると、この定義から下のような React 管理画面が生成されます。

| 論理名 | 物理名 | データ型 | 主キー | NOT NULL | 説明 |
|--------|--------|----------|:------:|:--------:|------|
| ID | id | uuid | ○ | ○ | 主キー |
| 商品名 | name | varchar(120) |  | ○ | 一覧・フォームに表示 |
| SKU | sku | varchar(40) |  | ○ | ユニーク |
| 単価 | price | numeric(10,2) |  | ○ | 通貨表示 |
| 仕入先 | supplier_id | uuid（FK） |  | ○ | suppliers を参照（コンボ表示） |

React 管理画面を生成する手順

1. 管理したいテーブルと列（型・NOT NULL・既定値・FK）を定義する。
2. 外部キー（例：supplier_id → suppliers）を設定してコンボ表示にする。
3. 画面（一覧・登録・編集）を設計書から生成する。
4. プレビューで動作を確認する（検索・登録・編集）。
5. React/TypeScript のコードを生成し、ZIP でエクスポートする。
6. 自社リポジトリに入れて、手で拡張・デプロイする。

d-bye なら：定義から React 管理画面が“動く形”で出る

上の products 定義をビジュアルに作ると、一覧画面はおおよそ次のような React/TypeScript コードとして生成されます（抜粋）。

// ProductsList.tsx — generated by d-bye (excerpt)
export function ProductsList() {
  const { data, loading } = useList<Product>("/api/products");
  if (loading) return <Spinner />;
  return (
    <DataTable
      rows={data}
      columns={[
        { key: "name", label: "Name" },
        { key: "sku", label: "SKU" },
        { key: "price", label: "Price", format: money },
        { key: "supplier_id", label: "Supplier", lookup: "suppliers" },
      ]}
      onCreate={() => navigate("/products/new")}
      onEdit={(row) => navigate(`/products/${row.id}/edit`)}
    />
  );
}

• ✓画面だけでなく、バックエンド(Rust actix / Node.js)の CRUD API と PostgreSQL DDL まで一括生成。
• ✓すべて同じ設計書から導かれるので、UI・API・DB がスタック横断で一致する。
• ✓型検証＋コンパイルチェックを通すので、壊れたコードを出さない。
• ✓生成物は ZIP で全文エクスポート。自社インフラで起動でき、ロックインがない。

よくある質問

データベースのスキーマから React の管理画面を生成できますか？

はい。テーブルと列（型・制約・外部キー）を定義すると、一覧・登録・編集・検索の CRUD 画面を React/TypeScript で生成します。同じ設計書からバックエンドと PostgreSQL DDL も生成されます。

生成後にコードを手で直せますか？

生成物は普通の React/TypeScript コードで、ZIP で全文エクスポートできます。読んで・直して・テストを足して・任意のホストにデプロイできます。設計を変えたい場合は設計書を直して再生成します。

バックエンドやDBも一緒に出ますか？

出ます。d-bye は画面(React)・API(actix または Node)・PostgreSQL DDL を一式生成します。管理画面だけでなく業務アプリを丸ごと生成できます。

AI が出す画面コードは壊れませんか？

d-bye は AI に生コードでなく設計書を書かせ、その後に型検証＋コンパイルチェックのゲートを通します。仕組みの詳細は Learn の「ちゃんと動く AI コード生成」をご覧ください。