秋ってこんなに寒かったっけ？
最近、朝晩寒くね？脳がバグるんだが？
どうも、頭の弱いえ～すけさんですよ。
「定義はAIが書きます」って言ったはいいものの
hatake（業務システムの画面を YAML の定義で作るフレームワーク）を作ってから散々「定義は AI が書くもの、人は問いに答えるだけ」みたいなことを言ってきたわけですが、ふと思ったわけですよ。
で、AI が書いた YAML って誰がどうやって確かめんの？
いや、エンジニアなら YAML 開いて読めばいいじゃんって話なんだけど、業務の画面の定義って1画面で100行とか普通に超えるし、roles がどこに書いてあって誰に何が見えるのかとか、YAML を上から下まで読んで頭の中で画面を組み立てるのは正直しんどい。
ましてやお客さん側の業務の人とか、PM とかに「この YAML 見て合ってるか確認してください」なんて言った日には、たぶん二度と口きいてもらえない。
なので、YAML を読まなくても確かめられる VS Code の拡張機能を作りました。0.9.31 から入ってます。
先に言っておくと、これは人が YAML を手で書くための道具じゃなくて、AI が書いたものを人が見て判断するための道具です。なので今の版は見るだけで、定義を書き換えたりはしないよ。
入れ方
Marketplace には出してないので、Release に貼ってある .vsix を落としてきて入れてね。
code --install-extension hatake-vscode-0.9.31.vsix
※記事を記載した時点ではver 0.9.31ですが、みんなは落としてきたバージョン番号を入れろよな！
コマンドが面倒な人は、VS Code の拡張機能の一覧の「…」から「VSIX からのインストール…」でも入ります。
版はフレームワークと同じ番号にしてあるので、案件で固定してる版と同じやつを入れてください（ずれてると後で怒られる、後述
左のアイコンを押すと業務の言葉で並ぶ
入れると左端に hatake のアイコン（畠と芽のやつ）が出てきます。押すと「定義」と「人が決めること」の2つの欄が出る。
「定義」の欄には作業場の中の定義が並ぶんだけど、ファイル名とかキー名じゃなくて、画面名とか項目のラベルで並びます。顧客マスタの下に検索条件・一覧の列・入力欄・操作がぶら下がってて、件数も付いてる。
で、画面を選ぶと、エディタのところにその画面がタブ付きで開きます。
最初に開くのは「画面」のタブで、これがプレビューとかじゃなくてちゃんと動く画面。描いてるのは Vue 版の Renderer そのもので、検索したりボタン押したり新規登録の入力欄を開いたりまで普通に動きます。
データは定義から作った作り物で、列とか入力欄の制約を見て8行ぐらいでっち上げてくれる（選択肢は順番に回して、日付とか数はずらして、みたいな
「作り物のデータじゃ雰囲気出ねぇよ」って人は、定義の横に preview/<Repository名>.json を置いておけばそっちを使ってくれます。
[
{ "customerCode": "C001", "customerName": "株式会社あおぞら商事", "kind": "corporate" },
{ "customerCode": "C002", "customerName": "南商店", "kind": "personal" }
]
役割を切り替えて「誰に何が見えるか」を見る
個人的に一番使うのはこれ。app の名前を選ぶとメニュー付きで全部開いて、役割を切り替えると、その役割の人に見えるメニュー・列・ボタンだけで描き直してくれます。
人事の役割に切り替えたら給与のメニューが出てきた、みたいなのが見て分かるので、「営業の人に原価の列が見えてるんだけど？」みたいなのを YAML の roles を grep して探す、っていうクソみたいな作業をしなくて済むようになりました。
ただし注意。これは見え方の確認だけです。roles は画面に出すかどうかを決めてるだけで、本当に止めるのはサーバの仕事。ここで見えてないからといって守られてる証拠にはならないので、そこは勘違いしないでね。
タブで表にして見る
画面のタブの横に「項目」「操作」「権限」「確認」のタブがあって、同じ定義をいろんな切り口の表で見られます。
「項目」は入力欄とか列とか検索条件を表にしたやつで、必須とか文字数とか条件で出るとかの決めごとが短い言葉で並んでて、選択肢もラベルで出るし、見える人も出ます。ツリーで入力欄を選ぶと、このタブが開いてその行が光る。
「操作」はボタンごとに、何をするのか・確認ダイアログを出すのか・誰が押せるのか。
ちなみに削除は確認を書いてなくても必ず聞く決まりにしてあって、それも表にちゃんと出ます。
「権限」は役割ごとに、どの列・項目・ボタンが見えるか（押せるか）の一覧。設計書で権限表を作らされたことがある人なら、ああアレねってなるやつです。
各行の「↗」を押すと YAML のその行に飛べるので、おかしいところを見つけたらそこから直しに行けばいい感じ。
「確認」のタブは AI が見てるのと同じ紙
ここが今回のミソ。
hatake は AI が定義を書いたあとに MCP で hatake_check っていう道具を通すんだけど、それが返す紙をそのままカードにして出してます。
欄は4つあって、「事実（書いたのに効いてない）」「人が決めること（定義に書けない）」「好み（書いてないと不便かも）」「読み返し（この定義がどういう画面か）」。
拡張機能の中で MCP と同じ道具を直に呼んでるので、AI が見てる答えと人がここで見てる答えは同じです。
これの何が嬉しいかって、AI に「確認しました、問題ありません」って言われても、それって何を見てそう言ってんの？ってなるじゃないですか（完了してないのに完了したって言うな
同じ紙を人も見られるなら、AI が何を見て何をスルーしたのかが分かるわけです。
で、特に見てほしいのが「人が決めること」。「同じ1件を2人が同時に直したらどっちを残すの？」とか「番号は誰が付けるの？」みたいな、定義には書けないけど決めてないまま画面が動いてたら嘘になること、を道具が聞き返してくるやつです。
これは左の「人が決めること」の欄にも、全部の定義から集めて画面ごとに並べてあります。人はまずここに目を通して答えればいい。答えは案件の前書き（hatake.project.yaml）に書けば次から出なくなります。
YAML 開く派の人向けのやつも一応ある
「いや、俺は YAML 読むから」っていう人（自分とか）向けの機能もあります。
定義の YAML を開いて右上のボタンを押すと、YAML の横にプレビューが出ます。保存するたびに描き直すので、横目で見ながら直せる。
で、書き間違えたときは真っ白な画面にするんじゃなくて、どこを何と書き間違えたかを出します。
table を tabel って書いて、画面に一覧が出なくて30分溶かす、みたいなのはもうやらなくていいです。
あとは保存するたびに hatake_check を回して VS Code の「問題」に出すとか、キーにカーソルを当てたら型とか既定値とか書ける場所が出るとか、hatake-crud って打ったら雛形が出るスニペットとか、まぁ VS Code の拡張機能にありがちなアレは一通り入れてます。
補完と検証は Red Hat の YAML 拡張（redhat.vscode-yaml）が入ってれば勝手にスキーマが当たるよ。入ってなくてもツリーとかタブとかは動きます。
版がずれてたら黄色くなる
右下の状態バーに版が出てて、拡張機能の版と案件で固定してる版（hatake.version とか package.json とか pubspec とか）が違うと、黄色くなって両方の版を出します。
拡張機能はフレームワークを中に抱えてるので、タブとか問題の一覧に出てくるのは拡張機能の版の答えなんですよね。版が違うと、案件の版では言われないことを言われたり、逆に言われるはずのことが出なかったりする。
画面は普通に出るのに答えだけ古い、っていう一番気づきにくいやつなので、黄色くなったら案件の版に合わせた .vsix を入れ直してください。
できないこと
正直に書いておくと、今の版でできないことはこんな感じ。
画面のデータは作り物なので、本物のサーバとかデータとは違います。
type: plugin のボタンとか独自の検証みたいな、アプリ側で登録する処理は動かないです（「未登録」として灰色で出る。定義が間違ってるわけじゃないので安心して
あと定義の書き換えはしないので、「直す」「当てる」みたいなボタンは次の版から。直すのは今のところ AI か人です。
ちなみに
手引き（VS Code 拡張の手引き）に貼ってる画像って、実は手で撮ってないです。
ブラウザで動く VS Code（code-server）に拡張機能を入れて、puppeteer でポチポチ操作して撮ってます。昔 puppeteer でスマホの画面をいじってた記事を書いてたのがこんなところで役に立つとは。。。
版を上げるたびにスクショ撮り直すとか絶対やりたくないので、怠けるための努力は惜しまないスタイルです。
というわけで、AI に定義を書かせてる人は、YAML を読む前にとりあえず左のアイコンを押してみてください。たぶん読むより早いです。