React

前回（第5回）は、抽出したデータをテーブルで表示し、画面上で編集・削除できるUIを作成した。 今回はついに本アプリのメイン機能である「時系列グラフの描画」に着手する。しかし、グラフを描画する前に解決しなければならない厄介な問題がある。それが...

前回（第4回）は、Excelの生データから「見出し行」を動的に探し出し、必要なデータだけを綺麗に抽出するロジックを実装した。 しかし、現状の画面はデータを単なるリスト（箇条書き）で表示しているだけで、取り込んだデータにOCRの誤字があった場...

前回（第3回）は複数のExcelファイルを同時に読み込み、画面にリスト表示するところまで実装した。 しかし、ここで一つの大きな問題に直面する。医療機関や受診した年によって、「Excelのフォーマット（表の開始位置や列の順番）」が微妙に異なる...

前回（第2回）は、SheetJS (xlsx) を使って1つのExcelファイルをブラウザ上で読み込み、画面にテキストとして表示する基本的な処理を実装した。 しかし、血液検査の推移を見るためには、過去数年分のExcelデータをまとめて読み込...

前回の全体構想を踏まえ、今回からいよいよ手を動かして開発をスタートする。「いきなりグラフを描画する」「いきなりデータベースに繋ぐ」といった大きな飛躍は避け、まずはスモールスタートの第一歩として、「手元のExcelファイルをブラウザに読み込ま...

Reactでコンポーネントの状態（State）を管理する際、最も頻繁に使用されるのがuseStateフックです。const = useState(0)const = useState({})のように宣言しますが、この後半部分であるsetVa...