【React × TypeScript】型安全に基準値を扱う！比較ロジックを安全設計する方法

職場にあったら便利だなと思い開発を始めた「看護師向け計算ツールアプリ」。
今回は、基準値比較を型安全に行うTypeScriptロジックを紹介します。

要約

• unknown で外部値を安全に受け取る
• parseFloat + isNaN() で不正値を防止
• compareValueToRange() で "high" | "low" | "normal" を返す
• 小規模なら型ガード、大規模入力ならZod等のスキーマ利用が◎

---

実装例

export type Range = { min: number; max: number; };

export const compareValueToRange = (value: unknown, range?: Range) => {
  if (!range) return "N/A";
  const numericValue = parseFloat(String(value));
  if (isNaN(numericValue)) return "invalid";
  if (numericValue > range.max) return "high";
  if (numericValue < range.min) return "low";
  return "normal";
};

---

📘 詳細な実装・スキーマ比較解説はZennで公開中👇
👉 【React × TypeScript】医療系アプリで学ぶ基準値UI設計③（Zenn）
（※Zenn版では設計背景や色覚対応の工夫も詳しく解説）