業務画面を「定義」で作る | hatake — 宣言型の業務アプリフレームワーク

定義が唯一の正

画面は PageDefinition に集約される。YAML / JSON / API のどれで持ってきても、内部では同じ定義に収束する。

バックエンドを選ばない

Spring Boot / ASP.NET / Node / Laravel / Firebase / Supabase。Framework が知っているのは Repository のインタフェースだけ。

描画は差し替えられる

Material3 で描く。Renderer は定義を描画するだけで業務ロジックを持たないので、Fluent や Cupertino に替えられる。

AI が書きやすい

仕様は機械可読（JSON Schema・キー索引・間違いカタログ）。MCP サーバ経由で、実装を読ませずに定義を書かせられる。

定義1枚で、この画面ができる

一覧・並べ替え・行の編集削除・入力フォーム・必須チェックまで、これで全部。Dart は1行も書かない。

yaml

# yaml-language-server: $schema=https://github.com/ASIL-E-Hatake/hatake/raw/main/spec/hatake-page.schema.json
# hatake — MasterPage example: 部門マスタ (Department master)
dsl_version: "1.0"

page:
  type: master
  id: dept_master
  title: 部門マスタ
  repository: deptRepository
  key: code

  table:
    rowActions: [edit, delete]
    columns:
      - { field: code, label: 部門コード, sortable: true }
      - { field: name, label: 部門名 }

  form:
    sections:
      - title: 基本情報
        fields:
          - { field: code, label: 部門コード, type: text, required: true }
          - { field: name, label: 部門名,     type: text, required: true }

  actions:
    - { id: create, type: create, label: 新規登録 }

書いたら推測で終わらせずに検証する。知らないキーは黙って捨てられるので、「書いた気になって効いていない」を防ぐのはこれ。

bash

npx hatake validate dept_master.yaml

インストールせずに触る

上の YAML を貼って、その場で画面にできる場がある。プレイグラウンド。

直すとその場で描き変わる。データは定義から作った仮のもの（Repository を書かなくていい）

綴りを間違えたらその場で理由が出る（sortble → sortable の間違い？）

作った定義は URL で渡せる（?yaml= に載る）ので、そのままレビューに貼れる

ブラウザだけで動く（Flutter Web）。インストールも登録も要らない。

次にどこを見るか

やりたいこと	行き先
「こうしたい」から書き方を引く	機能別の書き方
全体像を絵で見る	図解
動いている画面を触る	デモ
自分で書いた定義を試す	プレイグラウンド
自分の AI に hatake を書かせる	AI に書かせる
導入手順・仕組み・写経用サンプル	GitHub のドキュメント

やりたいこと

行き先

「こうしたい」から書き方を引く

全体像を絵で見る

動いている画面を触る

自分で書いた定義を試す

自分の AI に hatake を書かせる

AI に書かせる