【開発記】React + TypeScriptで血液検査記録WEBアプリを作る（第1回：プロジェクト始動とロードマップ）

健康管理のために毎年の血液検査の結果をExcelで受け取っているが、単なる数字の羅列では過去からの推移が直感的にわかりにくい。
そこで、複数年分のExcelデータをブラウザ上で一括で読み込み、時系列グラフとして可視化する自分専用のWEBアプリを開発することにした。

本連載では、プロトタイプとしてフロントエンド（React）のみで動く状態を作り上げ、最終的にバックエンド（Node.js + SQLite）と連携してデータを恒久保存するまでの過程を、実践的なコードと共に解説していく。

1. 採用する技術スタックと構成
2. 開発ロードマップ

1. 採用する技術スタックと構成

ローカル環境での動作確認をスムーズに行うため、フロントエンドとバックエンドを明確に分離した構成を採用する。

フロントエンド（URL: http://localhost:5173/）

React + TypeScript (Vite): 高速な開発環境と堅牢な型安全性を確保。
xlsx: ブラウザ上でExcelファイルを直接解析・読み込みを行うライブラリ。
recharts: 読み込んだデータをリッチな時系列折れ線グラフとして描画するライブラリ。

バックエンド（URL: http://localhost:3001/）

Node.js + Express: APIサーバーを構築し、フロントエンドからのデータ送受信を処理する。
SQLite: データを恒久保存するための軽量ローカルデータベース。環境構築の手間を省くために採用し、将来的な自宅サーバー（MariaDB）への移行を見据えた設計とする。

2. 開発ロードマップ

全14回にわたる開発ステップは以下の通り。前半でプロトタイプを作り上げ、後半で実用的なWEBアプリへと昇華させていく。

回数	テーマ	内容
第1回	プロジェクト始動とロードマップ	アプリの目的、採用する技術スタックの解説と全体設計。
第2回	単一ファイルの読み込み	React環境の構築と、xlsxを用いたExcelデータの基本読み込み。
第3回	複数ファイルの同時取り込み	複数のExcelファイルを一度に選択し、Stateで管理する仕組みの実装。
第4回	データ抽出と整形	生データから検査項目・結果・単位を動的に探し出し、扱いやすいJSONへ変換。
第5回	データの編集・削除機能	抽出した数値を画面上で微調整・削除できるテーブルUIの作成。
第6回	グラフ描画と表記揺れの吸収	rechartsによる動的グラフ生成と、正規化処理によるデータ差異の統合。
第7回	DB選定とSQLiteの構築	将来のMariaDB移行を見据えつつ、ローカルで手軽なSQLite環境を立ち上げる。
第8回	APIサーバー構築とDB連携	ExpressでAPIを作り、Reactからデータを恒久保存・取得する仕組みへの移行。
第9回	React Routerによる画面分割	アプリを「データ管理」と「グラフ閲覧」の2画面に分け、SPAとしてルーティングを実装。
第10回	データ管理画面のアコーディオンUI化	膨大なデータをすっきり見せるため、日付単位で折りたためる操作性の高いUIへの改善。
第11回	複数グラフの一覧表示とレスポンシブ対応	見たい項目を選んで同時に並べられるダッシュボード化と、画面幅に応じた自動レイアウト調整。
第12回	コンポーネント分割とリファクタリング	肥大化したコードを役割ごとにファイル分割し、保守性の高い構成へ再構築。
第13回	データの重複読み込み防止と日付別削除	誤操作による二重取り込みを防ぐアラート機能と、日付単位でのデータ削除機能の追加。
第14回	全データ一括削除機能の実装	アプリの運用やテストをより快適にするため、ワンクリックで画面上の全データをリセットする機能の追加。