1. はじめに：JavaScriptからReact × Firebase構成への進化
以前はバニラJavaScriptで基本的なタスク管理プロトタイプを作成していましたが、実際の看護現場で耐えうる複雑なロジックや複数人でのリアルタイム利用を実現するため、React ＋ Firebase への全面リファクタリング・移行を行いました。
- 複雑な状態管理と非同期処理（React）： 多数の患者タスク、8段階のステータス遷移、排他制御などをスムーズに動かすため。
- バックエンド基盤と認証機能（Firebase）： 複数人の看護師が同時に利用できるログイン・認証機能の実装、およびリアルタイムなデータ同期の実現のため。
- 拡張性の高いコンポーネント設計： タイムラインやマップなど、現場特有の複雑な画面を分離・保守しやすくするため。
2. 【達成】PC版の完成 ＆ 複数ログイン機能の実装
バックエンドにFirebaseを連携させ、複数アカウントでの認証・ログイン機能を実装完了。PC・タブレット表示に最適化した4つの主要画面を構築しました。
① 患者マスター画面（個別の状況整理）
- 機能： 患者様の基本情報と、患者ごと・時系列ごとのタスクを一元表示。
- 目的： 担当看護師が患者様一人ひとりの「現在の状態」と「一日の流れ」を即座に把握・整理。
② タイムライン画面（時間軸でのタスク・動線管理）
現場の誤操作防止や業務分散のために6つのロジックを実装。
- 8段階のステータス制御： 1つのタスクに対して8つの状態を管理。「実施中」にできるタスクは常時1つのみに制限し、同時進行によるミスを防止。
- 固定タスクと自由配置の分離： 定時ケアなどの固定タスクは自動配置し、「午前中」「随時」などの柔軟なタスクは手動で配置できるようUIを分離。
- 勤務帯別・カスタム表示切り替え： 24時間の長大なスクロール負担を減らすため、「日勤」「夜勤」などの切り替えや自由な時間絞り込み機能を搭載。
- 条件付きタスク複製機能： 急な検査変更や定期ケアに対応するため、看護師の判断範囲で行えるタスクに限定してその場で複製可能に。
- 受け持ち過多時の「グループ化」： 受け持ち患者が多い時間帯に画面が埋め尽くされないよう、タスクをすっきりまとめるグループ化表示。
- 優先度の視覚化： 状況に応じた優先度変更と、一目で重要度が判別できるカラーコード化。
③ マップ画面（動線可視化 ＆ チーム連携）
病棟内のメンバー位置把握に加え、相互サポートをスムーズにする機能を盛り込みました。
- 2種類のSOS機能： 手が回らない時の「タスクSOS」と、緊急対応を要する「ユーザー自身のSOS」を切り分けて発行。
- 病棟全体の進捗共有バー： スタッフ全員の進捗率を可視化し、余裕のあるスタッフがカバーに回りやすい環境を構築。
- 座標連動メモ（位置通知）： メモに位置情報（座標）を付与し、指定の場所に近づくと自動通知が届く仕組みを実装。
④ リーダーTODO画面（病棟管理・指示出し）
- 機能： リーダー看護師が患者ごとの「やることリスト」を作成・管理。
- 目的： 病棟全体のタスク漏れを防ぎ、メンバーへの的確な指示・タスク分配をサポート。
3. 【現在進行形】PWA（Progressive Web App）化への着手
PC版・Firebase連携の完成を経て、現在はPWA化（モバイル対応・多デバイス化）に集中して取り組んでいます。
- なぜPWA化なのか？ 看護師はナースステーションのPC前だけでなく、病室や廊下を頻繁に移動します。「ポケットからサッと取り出して使えるネイティブアプリのような操作感」と「Webならではの導入の軽さ」を両立するため、PWA化を選択しました。
- 現在の実装内容：
- スマートフォン表示に最適化したレスポンシブUIの調整
- Web App Manifest の設定（ホーム画面追加機能）
- キャッシュ戦略や通知機能を視野に入れた Service Worker の検証・実装
4. 開発ロードマップの現在地
- ステップ1（完了）： バニラJSによるプロトタイプ作成（基礎機能の検証）
- ステップ2（完了）： React移行 ＆ PC版の完成（患者マスター・タイムライン・マップ・リーダーTODO）
- ステップ3（完了）： Firebase基盤構築 ＆ 複数アカウントログイン機能の実装
- ステップ4（現在進行中）： PWA化（モバイル最適化・ホーム画面追加・多デバイス対応）
現場の課題意識（看護ドメイン知識）× モダンな技術スタック（React / Firebase / PWA）を掛け合わせ、本当に医療現場で愛されるプロダクトへ磨き上げていきます。
※患者・看護師データはデモデータです。
