Next.js + Cloudflare Workersでお薬手帳アプリを開発した記録

注意
この記事の内容は、開発途中のものです。
今後、変更などを行う可能性が高いのでご注意ください。

はじめに

病院や薬局でもらう処方情報を自分で管理したいと思い、個人向けのお薬手帳アプリ「my-okusuri-book」を開発しました。

マイナポータルからダウンロードできる薬剤情報CSVを取り込み、服薬記録、副作用メモ、残薬数の予測などを一元管理できるアプリです。

この記事では、技術スタックや主な機能、設計上の工夫について紹介します。

技術スタック

バックエンド

項目	技術
ランタイム	Cloudflare Workers
フレームワーク	Hono 4
データベース	Cloudflare D1（SQLite）
ストレージ	Cloudflare R2
バリデーション	Zod
言語	TypeScript 5.9
認証	Cloudflare Access（JWT）

フロントエンド

項目	技術
フレームワーク	Next.js 15（App Router）
UIライブラリ	React 19
データ取得	TanStack Query 5
スタイル	Tailwind CSS + デジタル庁デザインシステムトークン
UIコンポーネント	shadcn/ui（New York）+ Radix UI
グラフ	Recharts

共通・開発ツール

項目	技術
モノレポ	pnpm Workspaces + Turborepo
テスト	Vitest + Playwright + Testing Library
CI/CD	GitHub Actions
コード品質	ESLint + Prettier

車両管理アプリ（vehicle-management）と同様にCloudflare Workers + D1の構成ですが、フロントエンドはNext.js 15のApp Routerを採用しました。

UIにはshadcn/uiとデジタル庁デザインシステムのカラートークンを組み合わせています。

プロジェクト構成

pnpm Workspaces + Turborepoによるモノレポ構成を採用しています。

my-okusuri-book/
├── apps/
│   ├── api/              # Hono APIバックエンド
│   │   ├── src/
│   │   │   ├── routes/       # APIエンドポイント（21ファイル）
│   │   │   ├── repositories/ # データアクセス層（25ファイル）
│   │   │   ├── services/     # ビジネスロジック
│   │   │   ├── parsers/      # CSV解析（6ファイル）
│   │   │   └── middlewares/   # 認証・エラーハンドリング
│   │   └── migrations/       # D1マイグレーション（31ファイル）
│   └── web/              # Next.jsフロントエンド
│       └── src/
│           ├── app/          # App Routerページ（25以上）
│           ├── components/   # UIコンポーネント（18フォルダ以上）
│           └── hooks/        # API連携フック（20以上）
├── packages/
│   └── shared/           # 共有スキーマ・型定義
│       └── src/
│           ├── schemas/      # Zodバリデーションスキーマ（13ファイル）
│           └── types/        # 列挙型・DB行型
├── e2e/                  # Playwrightテスト
├── docs/                 # ドキュメント（日本語）
└── sample/               # テスト用CSVデータ

packages/sharedでAPIとフロントエンド間のスキーマ・型を共有しています。

Zodスキーマを共有することで、バリデーションロジックの重複を排除し、型安全性を確保しています。

主な機能

CSV取り込み

マイナポータルや電子版お薬手帳からダウンロードしたCSVを取り込めます。次の3形式に対応しています。

マイナポータル薬剤診療情報CSV
マイナポータル調剤情報CSV
JAHIS電子版お薬手帳CSV

CSVの形式はアップロード時に自動判定します。

取り込み時には医療機関、薬剤、処方箋のデータを一括で登録し、取り込み履歴を記録します。

誤って取り込んだ場合は、ロールバック機能で取り込み前の状態に戻せます。

服薬管理

処方された薬剤ごとに、服用タイミング（朝・昼・夕・就寝前・その他）と用量を設定できます。

日次の服薬記録画面では、各タイミングの服用状況を記録します。

ダッシュボードには7日分×4タイミングのカレンダー形式で服薬状況を表示し、服用完了時にはスタンプアイコンが付きます。

残薬管理・在庫予測

残薬数を記録すると、服用スケジュールに基づいて在庫切れ予測日を自動計算します。

在庫が少なくなった薬剤はダッシュボードでアラート表示されるため、処方の再取得タイミングを把握できます。

副作用記録

薬剤ごとに副作用のメモを記録できます。

さらに、PMDA（医薬品医療機器総合機構）のJADERデータを参照して、薬剤の副作用統計情報を確認できます。

ORCA（日本医師会標準レセプトソフト）のデータベースを使った薬剤相互作用のチェック機能も実装しています。

薬剤情報

厚生労働省の医薬品マスターとの連携により、薬剤の詳細情報を取得できます。

RAD-AR（くすりのしおり）のデータをキャッシュして、薬の説明情報も提供しています。

日常記録

服薬記録のほかに、次のような日常の健康情報を記録できます。

食事記録（写真付き、R2ストレージ保存）
健康測定タスク（血糖値、血圧など）
通院予約の管理
診察メモ
OTC医薬品（市販薬）の記録
患者プロフィール（アレルギー、既往歴など）

ダッシュボード

ダッシュボードでは、次の情報を一覧表示しています。

当日の服薬状況（7日カレンダー）
在庫アラート（在庫切れ予測日付き）
通院予約のリマインダー
サマリー統計

データベース設計

D1（SQLite）に21のコアテーブルを定義しています。

マイグレーションは31ファイルで管理しています。

主要なテーブルは次のとおりです。

テーブル	用途
medications	薬剤マスター
prescriptions	処方箋
prescription_items	処方明細
medication_logs	服薬記録
medication_stocks	残薬数・在庫
side_effect_notes	副作用メモ
medical_institutions	医療機関
daily_tasks	日常タスク定義
daily_task_logs	タスク実行記録
meal_logs	食事記録
appointments	通院予約
drug_master	医薬品マスター
orca_interactions	薬剤相互作用
jader_adverse_events	JADER副作用データ
import_logs	取り込み履歴

認証

個人利用を前提としたアプリのため、Cloudflare AccessのJWT（RS256署名）で認証しています。

公開鍵はCloudflare Accessのエンドポイントから取得し、1時間のTTLでキャッシュしています。

開発環境では検証をスキップするフォールバックも用意しています。

テスト

テストは3種類を実装しています。

ユニットテスト（Vitest）: CSV解析、在庫計算サービス、ユーティリティ、認証ミドルウェア
インテグレーションテスト: 取り込みフロー、薬剤クエリ、在庫計算の結合テスト
E2Eテスト（Playwright）: ダッシュボード、ナビゲーション、フォーム操作

フロントエンドのコンポーネントテストにはTesting Libraryを使っています。

CI/CDとデプロイ

GitHub Actionsで5つのワークフローを構成しています。

ワークフロー	用途
ci.yml	PRチェック（テスト・型チェック・ビルド）
deploy-api.yml	APIデプロイ + D1マイグレーション
deploy-web.yml	フロントエンドデプロイ（Cloudflare Pages）
release.yml	バージョンタグ・リリースノート
deploy-docs.yml	TypeDocドキュメント生成

開発環境（developブランチ）と本番環境（masterブランチ）で自動デプロイを分けています。

おわりに

マイナポータルの薬剤情報CSVを取り込める個人向けお薬手帳アプリを開発しました。

フロントエンドにNext.js 15 + shadcn/ui、バックエンドにCloudflare Workers + Honoという構成で、モダンなUIと低コストなインフラを両立しています。

JADER副作用データやORCA相互作用データなど、日本の医療データベースとの連携を実装したことで、単なる記録アプリにとどまらない安全性チェック機能を持たせることができました。

今後は、処方変更の履歴比較機能や、お薬手帳データのPDF出力など、さらなる機能の追加を検討しています。