このサイトの読み方
gunjo.jp は、役割の違う4つの面でできています。分け方は2つあります。1つ目は、その面で描かれているのが「人間がすること」（見る・読む）か「AI がすること」（画面を組む・試験を受ける）か。2つ目は、その面が扱っているのが「見本（完成した画面）」か「試験（作っている最中）」か。この2つで、サイト全体は4つの面に分かれます。このページは、その案内図です。
4つの面
4つのどの面も、ページを読むのは人間です。分けているのは、その面で描かれている作業のほうです。
完成した画面を見る
自分の業種の業務画面が、実際にどんな見た目で組めるのかを確かめる面です。コンポーネント（画面を組み立てる部品）の一覧と、業種ごとの画面の見本があります。
日本語圏の読者の多くは、ここから入ります
コンポーネントと見本の一覧へ試験の記録を読む
作っている最中の記録そのものを読む面です。何がすぐに組めて、どこにコンポーネントが足りず、見つかった不具合がいまどの状態にあるか。作り手の主張ではなく、記録で確かめられます。
試験の記録へ実例を足場にする
AI が、組み上がった画面を読んで、そこから新しい画面を組み始める面です。どれも公開されているコンポーネントを土台に組んだ実例で、コンポーネントが足りずに AI が自前で作って埋めた箇所も、記録に残っています。実例と、AI がそのまま読める仕様書をまとめてあるので、「この業種の画面はこう組む」の出発点になります。
AI に渡す仕様書へAI が試験を受ける
「gunjo.jp のドキュメントと npm パッケージ（部品の配布物）だけで、AI は本当に画面を組めるか」を測る試験です。試験を受けるのは AI で、その結果を読むのは人間です。
英語圏の読者の多くは、ここから入ります
この試験の詳しい説明へ日本語圏と英語圏で、入口が逆になる
日本語圏の読者の多くは、左上の「完成した画面を見る」から入り、見本の2面を見てから、試験の2面へ進みます。英語圏の読者の多くは、その対角にある右下の「AI が試験を受ける」から入り、試験の2面を確かめてから、見本の2面へ来ます。英語圏では、AI にどこまでできるかを測るこの種の試験を eval と呼んでいて、そちらの読者になじみがあるためです。入口は対角で、たどる向きも逆です。それでも、どちらの道も「見本」と「試験」の両方を通ります。
コールドテストとは
群青（このサイト gunjo.jp で公開している UI コンポーネント集）を一度も見たことのない AI に、業務画面を組ませる試験です。AI に渡すのは、公開されている npm パッケージと gunjo.jp のドキュメントだけです。組み終えた AI は「どのコンポーネントをそのまま使えたか」「何が足りなくて自前で組んだか」を報告します。
これまでに 180 回繰り返し、180 枚の画面を組みました。そのうち 150 枚は実在の業種の画面で、残りの 30 枚は、設定やログインのように業種を選ばない画面です。業種は全部で 20 あります。金融・医療・建設などの 15 業種と、運輸の 5 業種（鉄道・航空・バス・タクシー・トラック）を足した数です。
先につまずいた記録が、次の画面づくりを速くする
回を重ねるほど、次の画面づくりが速くなっています。狙って設計したというより、記録を数えたらそうなっていました。仕組みはこうです。
- AI が画面を組む途中でつまずきます。行き当たるのは、足りないもの（使いたいコンポーネントが群青に無い）か、不具合（あるコンポーネントが正しく動かない）かのどちらかです。
- つまずいた箇所は、その場で記録されます。不具合は誰でも見られる公開の課題票（GitHub の issue）になり、修正の対象になります。
- 同じ「このコンポーネントが足りない」という記録が3回たまると、そのコンポーネントを正式に作って群青に加えます。
- そこから先の AI は、同じ場所でつまずきません。不具合も、修正が配られた後は同じです。
- コンポーネントが増えるほど、足りないものでつまずく先は、まだ試していない種類の画面だけになります。不具合のほうは、一度試した画面でも新しく見つかります。
たとえば建設業の出来高査定（工事の進み具合に応じて支払いを査定する業務）の回がそうでした。保険金や給与明細のために作ったコンポーネントが、まったく別の業種である建設の画面でもそのまま使えて、新しく作るものはほとんどありませんでした。（連載の通し番号で #177。番号は未公開の回にも振られるため、公開済みの回数とは一致しません）
つまずきの記録には、足りないものの話だけでなく、実際に触らないと気づけない類の不具合も入ります。たとえば数値入力のコンポーネントには「年齢欄に 45 と打ったら 75 になる」という不具合がありました。年齢欄に入れられるのは 18 歳から 75 歳。1文字打つたびに、入力値をその範囲内へ丸める作りでした。
- 「4」と打ちます。18 より小さいので、その場で下限の 18 に直されます。
- 続けて「5」と打ちます。18 の後ろに付いて 185 になります。
- 185 は 75 より大きいので、今度は上限の 75 に直されます。
画面を目で見るだけでは見つからず、実際に打ち込んで初めて出ます。この不具合も、コールドテストが実際に画面を操作して見つけたものです。いまも課題票（GitHub の issue #790）として公開されていて、誰でも見られます。
見つかったものに付く、3つの状態
試験で出てくるものは2種類あります。足りないもの（使いたいコンポーネントが群青に無い）は、同じ記録が3回たまったらそのコンポーネントを作ります。不具合（あるコンポーネントが正しく動かない）は、課題票にして直します。
どちらも、回のページ（試験1回ぶんの記録をまとめたページ）に並びます。見出しは、足りないものが「この回で要ると分かったもの」、不具合が「この回でつまずいたところ」です。ここまでの説明では足りないものに行き当たることも「つまずく」と書いてきましたが、回のページの「つまずいたところ」に並ぶのは不具合だけです。
並んだ一つひとつに、下の3つの状態のどれか1つが付きます。足りないものは、コンポーネントができてから載るので、いまはすべて「対応済み」です。
- 対応済み足りないものはコンポーネントが加わり、不具合は修正が済んで、どちらも配布中の最新版に反映されています。
- 直し方記録済み原因と直し方まで特定し、issue に記録しています。修正はこれからです。
- 追跡中再現の条件や原因を、まだ調べています。
「直し方記録済み」と「追跡中」の不具合も、このサイトは隠しません。どれも issue として GitHub で公開していて、回のページで不具合の項目から開けます。何が直っていて何がまだかを、作り手の言葉ではなく記録で確かめられるようにするためです。
この試験で言えること、言えないこと
言えること
- 業務画面 180 枚（うち 150 枚は実在の業種の画面）を組むのに、コンポーネントがどこまで足りたかの実測。
- 予備知識ゼロの AI が、ドキュメントと npm パッケージだけで業務画面を組めること。
- コンポーネントを組み合わせて実際に操作したときに出る類の不具合を、利用者の画面に載る前に見つけて記録できること。
言えないこと
- 実データの量。試験の画面は現実的なサンプルデータで組んでいて、数万件の実データを流したときの挙動は測っていません。
- 実運用。長期間の利用や、実際の利用者の操作でしか出ない問題は、この試験の外にあります。
- 組織ごとの業務手順。その会社の運用の中でしか再現しない不具合は、ここでは出ません。