AI にバイタル・温度板を作らせてみた — 「基準値フラグ」という医療の核心コンポーネントが無かった（やってみた #54）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠医療2枚目⁠——⁠バイタルサイン記録 / 温度板⁠（バイタル入力 × 基準値による異常フラグ × フローシート × 温度板トレンド）。

#53 与薬（バーコード安全ゲート）と⁠真逆⁠の、時系列の臨床データ入力＋レビュー。体温/血圧/脈拍/SpO2 を記録し、⁠基準値に対して H/L/異常をフラグ⁠し、温度板で数日のトレンドを見る——スキャンではなく"値を範囲で判断する"医療の作法。

結果 — 4/5

tsc/build 緑・console 0・375px でフローシート内スクロール・基準値で H/L/異常フラグ（アイコン+文字+トーン・色だけに依存しない）・異常値で assertive 読み上げ・温度板トレンド・保存検証・h1 1個。

今回の核心の欠落 — 「基準値による異常フラグ」が無い

バイタル画面（そして検査結果画面）の⁠最も中心的なコンポーネント⁠——「値を正常範囲に対して H/L/critical でフラグする」——が、ライブラリに無かった。予備知識ゼロの AI が手組みし、既存の最小コンポーネントは⁠どれも軸が違う⁠と明言:

上位のコンポーネントが足りない: ⁠基準値の範囲/異常値インジケーター⁠だ。既存の最小コンポーネントはどれも合わない——⁠Meter は容量の色調⁠（value/max・満→warning/超→destructive で「正常範囲内」が逆さま・SpO₂ 98% が destructive に見える・下限も帯も無い）、⁠Delta は前回比⁠（数値の符号であって、範囲のどこに属するかではない）。

これは #52 で気付いた「Meter は容量、進捗/範囲には別物」の再確認でもある。⁠値が範囲のどこにいるか⁠は、容量(Meter)とも変化(Delta)とも違う第3の軸。理想の API を課題に記録（#241）:

<ReferenceValue value={38.9} unit="℃" range={{low:36.0, high:37.5, criticalHigh:39.9}}
  labels={{high:"高値", low:"低値", critical:"異常"}} format={v=>v.toFixed(1)} size="inline" />
// → flag を導出 → トーン（正常=success・H/L=warning・異常=destructive）
//    値+単位+アイコン+コード(H/L/!!)+sr-only 文 を描画、範囲外を読み上げ

＋ 純関数 flagValue(value, range): RangeFlag を export（テーブル/チャートがセルを再計算せず色付けできるように）。⁠医療を超えて再利用できる⁠——SLA/レイテンシ、QA 公差、監視閾値、金融リミット。検査結果(#55)は同じコンポーネントが核になるので、⁠すぐ2回目が来る⁠はず。

規律 — 1回目では作らない（誠実に課題に記録だけ）

ReferenceValue は強い候補だが、⁠今回が1回目⁠。3回ルールに従い⁠作らずに課題に記録⁠した。検査結果(#55)で2回目、もう1枚の臨床画面で3回目——そこで作る。今すぐ作りたくなる衝動を抑えるのが、作りすぎを防ぐ規律。⁠今回は src 修正ゼロ＝ライブラリが医療2枚目でも持ちこたえた⁠（欠落は新しいコンポーネント1つ＋チャート拡張だけ）。

複利・うまくいった点

• ⁠Delta — 業界を越えた採用（正しく）⁠。「前回比」列に neutral トーン（バイタルが上がるのは良い/悪いではない）＋日本語 labels で。⁠金融/物流で作った差分コンポーネントが、医療の前回比でそのまま効いた。⁠
• ⁠LineChart — 温度板に採用⁠（一部手組み）。multi-point・ResizeObserver 自動リサイズ・referenceValue/showGrid/min/max/formatValue が初手で動いた。
• Table（フローシート＋チャートのアクセシブル代替）・Alert(assertive)・Dialog・Tabs・Select・NumberInput・CardTitle as（h1→h2→h3 飛びなし）も。

課題に記録だけした欠落（1回目→3回ルール待ち）

• 🟠 ⁠ReferenceValue / 基準値異常フラグ⁠（#241・1回目・医療の核心・医療外も再利用可）。
• 🟠 ⁠LineChart に referenceBand（網掛けの正常域）＋系列ごとの軸/正規化⁠（#242・1回目）。温度板の正常域は"帯"だが referenceValue は単一の線→ CSS の重ね描画で手組み。体温(35-40)と脈拍(50-130)が1軸に乗らず2チャート縦積み。
• 🟡 NumberInput に単位を後ろに添える差込口が無い（label に単位・動くが CurrencyInput の記号のような装飾があると綺麗）。

学び — 「軸」が違うコンポーネントは、別のコンポーネント

容量(Meter): value/max のどこ → 満載で警告
変化(Delta): 前回比の符号    → 上下で色
範囲(ReferenceValue): 正常域のどこ → H/L/異常 ← 医療で初めて要求された第3の軸

50回超で基礎コンポーネントは揃ったが、医療は「⁠値を正常範囲で判断する⁠」という、商業/金融/物流では要らなかった第3の軸を突きつけた。Meter でも Delta でも代用できない——軸が違うから。業界を移すと、既存コンポーネントの組み合わせでは埋まらない⁠新しい意味の軸⁠が出る。それが ReferenceValue。検査結果で2回目を確認したら作る。

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

• ⁠医療をもう1枚＝検査結果（基準値・H/L・パニック値）⁠。ReferenceValue#241 の2回目をほぼ確実に踏むはず。医療は深掘り継続。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#53
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。医療の核心「基準値フラグ」という第3の軸の不在が見え、規律どおり1回目は課題に記録だけにした回。