💊

🩺看護師が医療現場で使う計算ツールの開発に挑戦してみた ＃１

に公開
Next.js
React
TypeScript
Tailwind CSS
看護師
tech

💡 はじめに

現役看護師として働きながら、Next.js × TypeScript × Tailwind CSS を学習し、
そのアウトプットとして「看護師向け計算ツールアプリ」の開発に挑戦しています。

このツールは、投薬量・点滴速度・体液バランス・栄養計算など医療現場でよく使う計算をひとまとめにした Web アプリであり、現場での“使いやすさ”と、開発者としての“型安全性・再利用性”の両立を目指しています。

⚙️ 使用技術

  • Next.js 15（App Router）
  • TypeScript
  • Tailwind CSS
  • PWA対応（オフライン動作）

📈 これまでの進捗

  1. 投薬・点滴・栄養など主要計算機能の実装
  2. 履歴データの保存・表示
  3. PWA対応によるオフライン化
  4. 型ガードによる安全な履歴再利用

🎯 今回のテーマ

電解質補正機能（Na/K）を分割して、タブ切替で操作できるようにする

以前の実装では Na補正・K補正を同じファイル内に書いており、
ロジックが混在して可読性が低下していました。
今回はこの課題を整理し、機能分割＋タブ切替UI に改善します。

⚙️ 背景 ― 電解質補正の課題

以前の実装では以下のような問題がありました。

  • コードが長く、可読性が低下
  • Na/K のロジックが混在して修正が困難
  • UI上でもどちらの計算かわかりにくい

💡 改善方針

機能ごとに責務を分け、フォルダ構成を以下のように整理しました。

components/
└─ calculators/
├─ ElectrolyteCorrectionCalculator.tsx
├─ NaCorrectionForm.tsx
└─ KCorrectionForm.tsx
  • NaCorrectionForm.tsx：Na補正（ナトリウム）
  • KCorrectionForm.tsx：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 で現在のタブを管理し、
tab === "na" のときはナトリウム、"k" のときはカリウム計算を表示します。

📊 Na補正（ナトリウム）計算式

const correctedNa = measuredNa + 0.016 * (glucoseLevel - 100);

補正Na = 測定Na + 0.016 × (血糖値 - 100)
→ 「Katzの式」を採用しています。

TailwindでUIを整え、結果は ResultBox コンポーネントで表示。
saveHistory() を共通呼び出しして履歴にも保存します。

🧮 K補正（カリウム）計算式

const correctedK = measuredK + 0.6 * (pH - 7.4);

補正K = 実測K + 0.6 × (pH - 7.4)

pHが低下すると、細胞外へKが移動しやすくなるため補正が必要です。
こちらも saveHistory() を共通化して再利用しました。

🎨 UIの完成イメージ

  • ボタンで「Na補正」「K補正」を切替
  • 入力フォームのみ切り替わり、画面遷移は不要
  • 計算結果は共通 ResultBox で表示

小さなUI改善が、現場での操作体験を大きく変える。

🧠 学びと気づき

  • Reactでは「1機能1責務」にすると保守性が大幅に上がる
  • 親コンポーネントで状態を持ち、子を切り替える設計はシンプルで強い
  • 機能を分けると、今後の追加（例：Ca補正）にも柔軟に対応できる

🚀 次回予告

次回は ボタンレイアウトと履歴UIの改善 に取り組みます。
より「現場で使えるアプリ」らしいデザインへと進化させていきます。

🩺 現場で働く看護師だからこそ見える課題を、
React × TypeScript で“ツール”として形にしていく試み。
引き続きシリーズでお届けします。

Discussion