📱

🩺 看護師が医療現場で使う計算ツールの開発に挑戦してみた #4：ついにオフライン対応！Next.jsでPWA化するまでの道のり

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

💡 はじめに

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

このツールは、投薬量・点滴速度・体液バランス・栄養計算など
医療現場でよく使う計算をひとまとめにした Web アプリです。

現場で使える実用性と、開発者としての再利用性・型安全性の両立を目指して、実装の過程を1ステップずつ公開しています。

⚙️ 使用技術

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

📈 これまでの進捗

  1. 投薬・点滴・栄養など主要計算機能の実装
  2. 履歴データの保存・表示
  3. 型ガードによる安全な履歴再利用
  4. スマホ向けUI最適化

前回の記事では、
履歴ページのデザイン改善で直感的な操作性を実現
をまとめました。

🚀 今回のテーマ：PWA対応でオフラインでも使えるアプリに！

病棟では、電波が届かない環境でも業務を行う場面があります。
そんなときにも使えるように、
Next.js × TypeScript × next-pwa を利用して PWA（Progressive Web App）対応 に挑戦しました。

📦 PWAとは？

PWA（Progressive Web App） とは、
Webアプリをスマホにインストールできるようにする技術です。

✅ ネイティブアプリのような操作感
✅ オフラインでも動作可能
✅ ホーム画面にアイコンを追加できる

「ブラウザで開く」アプリから「ホームに置ける」アプリへ。
看護師が現場ですぐに使えるツールになる大きな一歩です。

⚙️ 導入手順

① パッケージの導入

npm install next-pwa

② next.config.ts の編集

import withPWA from "next-pwa";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {};

export default withPWA({
  dest: "public",
  register: true,
  skipWaiting: true,
})(nextConfig);

📌 ポイント

  • dest: "public"：Service Workerの出力先を指定
  • register, skipWaiting：更新時の自動反映に対応

③ manifest.json の設定

{
  "name": "看護師向け計算ツール",
  "short_name": "NurseCalc",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#f87171",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

これで、スマホのホーム画面にアプリアイコンを追加できるようになります🩺✨

④ layout.tsx に <link> を追加

<html lang="ja">
  <head>
    <link rel="manifest" href="/manifest.json" />
    <link rel="icon" href="/icons/icon-192.png" />
    <meta name="theme-color" content="#f87171" />
  </head>
  <body>{children}</body>
</html>

📌 theme-color はアプリのメインカラー。
今回は暖色系の fuchsiaトーン（やさしく目立つ色）で統一しました。

⑤ アイコンを作成

オリジナルのアプリアイコンをデザインしました🎨

🩹 ナース帽 × 電卓 のシルエットをモチーフに、
「誰でも使えるポップ×シンプル」な印象に。

用途 サイズ 備考
manifest用 192×192 スマホ用アイコン
PWA用 512×512 インストール時に使用
元画像 521×521 背景透過・角丸正方形

✅ 動作確認手順

npm run build && npm start
  • ブラウザで localhostにアクセス
  • 開発者ツール → Application → Service Workers を確認
  • スマホで「ホーム画面に追加」を実行

以下をチェック👇
✅ オフライン状態で再読み込みしても動作する
✅ インストール時にオリジナルアイコンが表示される

💡 トラブル対処メモ

エラー内容 原因 解決策
GenerateSW plugin configuration: 'pwa' property is not expected 設定内に pwa: を二重で記載 withPWA() 内に直接記述する
minimatch の型エラー バージョン不整合 npm i -D @types/minimatch
next-pwa に型宣言がない 公式型が未提供 declare module "next-pwa"; を追加

🧠 学びと気づき

  • PWA化は意外とシンプル！（3ステップで導入可能）
  • manifest・next.config・アイコン設定の3つで実現
  • オフライン対応はユーザー体験を一変させる
  • 看護師業務では「通信不安定な環境」も多く、PWA対応の価値は非常に高い
  • React × Next.js × PWA で、“現場で本当に使えるアプリ”へ。

🚀 次回予告

次回は、履歴データの再利用機能（型ガード統一版） に挑戦します。
計算結果を安全に再入力へ反映できるよう、TypeScriptの活用を掘り下げます！

🩺 現場の課題をReactとTypeScriptで解決し、
「誰でも使える医療アプリ」を作る挑戦は続きます。

Discussion