AI に保険料の試算画面を作らせてみた：年齢欄に「45」と打つと、75になった（やってみた #202）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に、実際の画面で組ませていく連載。保険の8枚目です。お題は⁠医療保険の保険料の試算⁠。年齢や入院日額を動かすと月額が変わり、特約を足すと内訳の行が増える画面です。

結果：4/5。型は緑、目で見ても動く。数字を打つと壊れた

予備知識ゼロの AI に、公開されている npm パッケージと gunjo.jp の docs だけを渡して組ませました。tsc は緑、実行してもエラーはありません。それでも、いちばん大きい発見は不具合でした。

見つかった不具合：直接入力が壊れている

数値の入力欄で、⁠下限が2桁以上だと直接入力ができません⁠。年齢欄（下限18）で「45」と打つとこうなります。

1. ⁠「4」⁠を打つと、下限で丸められて ⁠18⁠ になり、表示が「18」に変わる
2. 続けて⁠「5」⁠を打つと、表示は「18」に「5」が付いて ⁠「185」⁠
3. 上限75で丸められ、⁠75⁠ になる

⁠「45」と打ったのに75です。⁠ 入院日額（下限5,000）はもっと深刻で、1文字目で5,000に飛びます。

原因は、⁠1文字打つたびに範囲で丸めて確定させている⁠ことでした。今回の AI は別の入力欄に差し替え、「入力中は丸めず、確定するときだけ丸める」処理を自分で書いています。⁠「要件の『直接の指定でもできる』を満たすには避けて通れない箇所」⁠と記録されていました（#790）。

直し方も簡単です。確定時に丸める処理は既にあるので、⁠入力中の丸めをそちらに移すだけ⁠です。

効いたものと、足りなかったもの

不具合のほかに、助けられたところと、引っかかったところが出ています。

今回の主役：「これは何に使わないか」が書いてある部品は速い

助けられた記録もあります。金額の内訳の説明に保険の例が入っていたこと、選択系の部品が互いを名指しで区別していたこと。⁠「これは何に使わないか」が書いてある部品は速い⁠、というのが今回も確認されました。

この画面で使われた部品は29種類です。手で組んだ中心は、下に書くつまみと数値入力の約190行でした。

つまみと数値入力を束ねる部品が、また無かった

この回のもう1つの狙いは、#191（住宅ローン試算）で見つかった不足の再現でした。「つまみでも直接入力でもできる」という形の部品がない、というものです。

⁠再現しました。⁠ 今回は約190行の手組みで、#191 の約100行より重い。画面読み上げソフト（スクリーンリーダー）への配線を最初から作り込んだためです。

2回に共通する要求は3つでした。⁠1つの値を、つまみと入力欄の2か所から編集できる。つまみ側と入力側で刻みを出し分ける。ラベルを1回だけ名乗る。⁠

今回の AI はスクリーンリーダー向けの材料も足しています。つまみが見えるラベルを持ち、入力欄は「入院日額（直接入力）」という別名にする。補足文は1つの id を両方から参照する。全体を1つのまとまりとして名前を付ける。

そして⁠実装中に気づいた落とし穴⁠も記録されていました。現在値を出す <output> という要素は⁠既定でスクリーンリーダーへの通知が有効⁠なので、放置するとつまみを動かすたびに二重に読み上げられます。今回の AI はこれを明示的に切っていました（#767）。

スクリーンリーダーへの伝え方が、3体目で揃った

値が連続して変わる画面で、スクリーンリーダーに何をいつ読ませるか。今回の AI は二段構えにしています。

⁠つまみ本体⁠は即座に「35歳」「5,000円／日」と読ませる。細かいフィードバックはここが担当。⁠合計の金額⁠は見えている数字には通知を付けず、別に見えない領域を1つ置いて、⁠手が止まって0.8秒後に1回だけ⁠「毎月の保険料 4,820円、払込の総額…、目安です」と流す。

#191 も0.8秒でした。#195（モバイルオーダー）は遅延を入れず「通知が重なる」と妥協点に挙げています。⁠3体の結論が揃ったので、この遅延は部品側が持つべきもの⁠だとはっきりしました（#753）。

名前で迷ったところ

比較表を探して、また同じ2つに誘導されています。用途別の対応表が「比較」の欄に挙げている部品は⁠左右2者のマッチング⁠用（#190 と同じ誤誘導）。時間割の部品は⁠説明文に「比較・コホートの行列」と書いてある⁠ので全部の型を読んだものの、実体は操作できるグリッドで読むだけの比較には重すぎました。

⚠️ この時間割の部品への誤誘導は、⁠#204（満期と更新）でも独立に起きています⁠。説明文の用途列挙が2体を同じ場所で止めた形です。

限度を監視する部品にも寄り道がありました。「受け取れる可能性のある最大額」に名前がぴったり見えたのですが、実体は法令違反の監視で、⁠限度に近づくと警告色⁠になります。「限度いっぱいまで受け取れる額」はむしろ良い数字なので、⁠意味が真逆⁠でした。

そのほかの小さな引っかかり

3つ見つかっています。⁠通知の種類に「警告」がありません⁠（他の部品はどれも持っているのに）。⁠入力欄の指定の宛先が、種類によって外枠だったり中身だったり⁠します。そして⁠つまみに不等間隔の目盛りが作れない⁠ので、手術給付の倍率（10・20・40倍）だけは別の部品で代替し、⁠「要件を1つ満たせなかった」と正直に申告⁠されていました。

今回 直したものは無い：課題に記録だけにした

この回でも新しく作ったコンポーネントはありません。数値入力の丸め（#790）、つまみと数値入力を束ねる部品（#767）、読み上げの遅延（#753）は、いずれも課題に記録するだけにしました。

学び：型が緑でも、数字を打つまで出てこない不具合がある

年齢欄に45と打つと75になる。tsc は緑で、目で見ても動いているように見えます。⁠実際に値を入れてみるまで出てこない⁠種類の不具合でした。読むだけの確認では、ここには届きません。

もう1つ。つまみと数値入力の組み合わせが2回目、読み上げを遅らせる設計が3体目でそろいました。⁠同じ不足に何度も当たると、作るべきものの形が回ごとに具体的になっていきます。⁠ 1回目は「無い」としか言えませんでしたが、2回目で要求が3つに絞れ、3体目で遅延の値まで決まりました。

コンポーネント化スコアボード（作成済 27個）

直近で加わったのは #180 の CommentThread（27個目）です。ただし取り込みの手続きが止まっていて、⁠この回の AI に渡した版（@gunjo/ui 0.1.0-beta.2）には入っていません⁠。#181 からこの回まで、新しく作ったものはありません。

3回目待ち：つまみと数値入力を束ねる部品（#767）は #191 に続いて2回目、読み上げの遅延（#753）は #191・#195 に続いて3体目です。

保険の進捗：契約者向けの3枚目

• 事業者向け：#101 保険金の査定、#102 契約の管理、#103 保険金の支払、#104 引受の査定、#105 代理店ポータル
• 契約者向け：#200 契約者マイページ、#201 給付金の請求、⁠#202 保険料の試算⁠（いまここ）、#203 告知、#204 更新

次回予告（やってみた #203）

保険の9枚目。⁠生命保険の告知⁠です。申し込む人が病歴や通院を申告する画面で、これまでのフォームとは性格が逆になります。急がせない、追い詰めない、それでも省略もさせない。このトーンが部品で作れるかを見ます。

試す

• ⁠gunjo.jp⁠ ／ ⁠つまみ Slider⁠ ／ ⁠数値の入力 NumberInput⁠ ／ ⁠金額の内訳 AmountBreakdown⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#201
• ⁠GunjoUI by UIXHERO⁠

型が緑でも、数字を打つまで出てこない不具合があります。読むだけの確認では届きません。