📁

【React × TypeScript】医療系アプリで学ぶ基準値UI設計：② normalRanges.tsで基準値を一元管理する設計パター

に公開
React
TypeScript
Tailwind CSS
設計
医療アプリ
tech

📘 はじめに

Next.js + TypeScript + Tailwind CSSを学習しながら、
看護現場で役に立ちそうな「看護師向け計算ツールアプリ」の開発を進めております。

このアプリでは、計算結果を表示する際に「基準値より高い・低い」を自動判定します。
その中で重要になるのが、「どの数値を正常値として扱うか」という部分。

この記事では、各指標の基準値をnormalRanges.tsに一元管理する設計パターンを紹介します。

💡 背景：なぜ「一元管理」なのか？

はじめの頃、私は各計算コンポーネントの中に直接こう書いていました👇

// BMI計算コンポーネント内
const bmiRange = { min: 18.5, max: 24.9 };

// 電解質補正コンポーネント内
const potassiumRange = { min: 3.5, max: 5.0 };

一見シンプルですが、運用が進むにつれて次の課題が出てきました。

  • どこに何が定義されているか分かりにくい
  • 修正が入るたびに複数箇所を探す必要がある
  • 値の間違いがあっても気づきにくい

医療系アプリでは数値ミスが判断の誤りにつながることもあるため、
「信頼できる基準値の単一ソース」を設けることが極めて重要です。

🗂️ normalRanges.ts の構造

基準値はこのように整理します👇


// config/normalRanges.ts
export const normalRanges = {
  sodium: { min: 135, max: 145 },     // Na（mEq/L）
  potassium: { min: 3.5, max: 5.0 },  // K（mEq/L）
  bmi: { min: 18.5, max: 24.9 },      // BMI
  temperature: { min: 36.0, max: 37.5 }, // 体温（参考例）
};

💡ポイント

  • すべて { min, max } の共通構造に統一
  • 後から normalRanges/nutrition.ts などに分割しても扱いやすい
  • 値の根拠（文献・施設基準）をコメントに記載しておくと◎

🧱 型定義で安全性を高める

TypeScriptを活かして型で安全性を担保しましょう。

// types/normalRange.ts
export type Range = {
  min: number;
  max: number;
};

export type NormalRangeKeys = "sodium" | "potassium" | "bmi" | "temperature";

export type NormalRanges = Record<NormalRangeKeys, Range>;

そして normalRanges.ts に型を適用します👇


import type { NormalRanges } from "@/types/normalRange";

export const normalRanges: NormalRanges = {
  sodium: { min: 135, max: 145 },
  potassium: { min: 3.5, max: 5.0 },
  bmi: { min: 18.5, max: 24.9 },
  temperature: { min: 36.0, max: 37.5 },
};

これにより、もし max に "145" のような文字列を誤って入力しても、
TypeScriptが即エラーで検知してくれます💪

⚙️ 実際の使い方

アプリのどこからでも normalRanges を呼び出して使えます。

ResultBox.tsx（結果表示）


import { normalRanges } from "@/config/normalRanges";

{getStatusIcon(Number(result), normalRanges.potassium)}

HistoryList.tsx（履歴判定）

const getRangeForItem = (item: HistoryItem) => {
  if (item.typeId === "electrolyte" && item.sub === "na")
    return normalRanges.sodium;
  if (item.typeId === "electrolyte" && item.sub === "k")
    return normalRanges.potassium;
  if (item.typeId === "bmi") return normalRanges.bmi;
  return undefined;
};

これにより、複数のページで同じ基準値を安全に参照できます。

🧩 一元管理のメリット

項目 メリット
一貫性 どの画面でも同じ基準値を参照
メンテ性 修正は normalRanges.ts 1箇所で完結
型安全性 TypeScriptの型で誤入力を防止
拡張性 項目追加や分割が容易
信頼性 医療アプリとしての安全性が向上

🚀 発展アイデア

この設計をベースに、次のような拡張も可能です👇

  • 📦 normalRanges.json にして外部データ管理
  • 🏥 施設ごとの基準値を切り替え
  • 🌐 多言語対応（en / ja）
  • 🤖 AIによる基準値推定・自動補正

こうした拡張の“土台”を支えるのが、今回の normalRanges.ts です。

🧠 学びまとめ

ポイント 内容
💡 管理場所 config/normalRanges.ts に一元化
🧩 構造 { min, max } で統一
🧱 型定義 Range / NormalRangeKeys で安全に
⚙️ 実用例 ResultBox・HistoryListで活用
🔒 医療的信頼性 値の整合性・修正漏れを防ぐ

🔗 シリーズ案内

🩺 【React × TypeScript】医療系アプリで学ぶ基準値UI設計シリーズ

1.基準値より高い・低いを矢印で表示する方法
2.normalRanges.tsで基準値を一元管理する設計パターン ←（この記事）
3.型安全に基準値を扱う！TypeScriptで安全な比較ロジックを設計する
4.見やすさ重視のUI設計！Tailwindで基準値判定をわかりやすく表示する

Discussion