職場にあったら便利だなと思い、開発している医療計算ツール。
今回はNa補正とK補正をタブ切替で分割する構成を実装しました。

🎯 目的

Na補正とK補正をひとつの画面で切替
コードの責務を分離して保守性を高める

🧩 実装のポイント

親コンポーネント（ElectrolyteCorrectionCalculator.tsx）

const [tab, setTab] = useState<"na" | "k">("na");

<div className="flex space-x-4 mb-4">
  <button
    className={`px-4 py-2 rounded ${
      tab === "na" ? "bg-cyan-600 text-white" : "bg-gray-200"
    }`}
    onClick={() => setTab("na")}
  >
    Na補正
  </button>
  <button
    className={`px-4 py-2 rounded ${
      tab === "k" ? "bg-cyan-600 text-white" : "bg-gray-200"
    }`}
    onClick={() => setTab("k")}
  >
    K補正
  </button>
</div>

{tab === "na" && <NaCorrectionForm />}
{tab === "k" && <KCorrectionForm />}

useState でタブ状態を管理
子コンポーネントにフォームを分離
ResultBox＋履歴保存機能を共通化

⚗️ Na補正とK補正の式

// Na補正
const correctedNa = measuredNa + 0.016 * (glucoseLevel - 100);

// K補正
const correctedK = measuredK + 0.6 * (pH - 7.4);

💡 学び

Reactは「1コンポーネント1責務」で整理すると保守性が高まる
タブUIは親状態＋条件レンダリングで簡潔に実装できる

📘 詳細な設計背景・UI改善の流れはZennで公開中👇
👉 看護師が医療現場で使える計算ツールを開発してみた（Zenn）