はじめに
透析治療を受けており、月2回の血液検査結果を記録しているのですが、「透析がちゃんとできているか」を示すKt/V(標準化透析量)という指標を毎回手計算するのが大変でした。
手計算が面倒(電卓を叩いてもミスが起きる)
過去データとの比較が大変(ノートをめくって探す手間)
グラフ化して推移を見たい(Excel 使うのも面倒)
医師に見せるときに整理が必要(見せ方がわからない)
そこで、検査データを入力するだけでKt/Vを自動計算し、3年分のデータをグラフで可視化できるWebアプリを自分用に 作ってみました。
プログラミングから遠ざかっていた私でも、AIの力を借りることで数時間で実用的なアプリ を完成させることができたので、その過程を記録として残しておきます。
※このアプリは個人利用目的で作成したもので、一般公開はしていません。
Top
主な機能
📊 透析効率の自動計算
- 透析前後のBUN値からKt/V(標準化透析量)を自動計算
- 尿素 除去率(URR)も同時に計算
- Daugirdasの第2世代式を使用(透析医療の標準的な計算式)
📈 データの可視化
- 3年分(月2回×12ヶ月×3年=72回分)のデータを保存
- グラフで推移を一目で確認
- 目標値(Kt/V≥1.2、URR≥65%)との比較
💾 データ管理
- ブラウザ内にデータを永続保存
- CSV 形式でエクスポート可能(医師への共有に便利)
- データの削除・編集も可能
📱 スマホ ・PC両対応
- レスポンシブデザインでどのデバイス でも快適
- 検査結果を見ながらスマホ で入力できる
⚡ 便利機能
- 除水量を体重差から自動計算(いちいち計算しなくてOK)
- 異常値を色分けして表示(緑=良好、赤=要注意)
使い方
入力画面
使い方はとてもシンプルです。
「新しいデータを入力」ボタンをクリック
検査日、透析前後のBUN値、透析時間、体重を入力
「計算して保存」ボタンをクリック
Kt/VとURRが自動計算され、グラフに追加される
たったこれだけで、過去のデータと比較しながら透析効率を管理できます。
なぜ作ったのか
既存の計算ツールの課題
実は、Kt/V計算ツール自体はいくつか存在します。例えば、愛知県腎臓病協議会のWebサイトには計算ツールがあり、数値を入力すれば計算結果が表示されます。
しかし、これらのツールには共通の課題がありました。
その場限りの計算 : 計算したら終わり。データは残らない
過去データとの比較ができない : 前回の値と比べるには自分でメモが必要
グラフ化できない : 推移を見るにはExcel などで別途グラフを作る必要がある
毎回同じ数値を入力 : 透析時間など、毎回同じ値を入力するのが面倒
本当に欲しかった機能
グラフ
テストデータ
私が欲しかったのは、単なる計算ツールではなく、自分の透析データを継続的に管理できるシステム でした。
検査のたびにデータを蓄積していける
過去数ヶ月〜数年の推移を一目で確認できる
目標値に達しているか、調子が良いのか悪いのかが視覚的にわかる
スマホ でもサッと確認できる
必要に応じて医師に見せられる形式でデータを出力できる
既製品を探しましたが、ちょうど良いものが見つかりませんでした。
「ないなら作ろう」
そう思って、個人利用のために開発を始めました。
使用技術
フロントエンド
React - UIライブラリ
モダンなWebアプリ開発 の定番。コンポーネント 指向で開発しやすい。
Recharts - グラフ描画ライブラリ
Reactと相性が良く、美しいグラフを簡単に作成できる。
Tailwind CSS - CSS フレームワーク
ユーティリティファーストで、素早くレスポンシブなデザインを実装できる。
Lucide React - アイコンライブラリ
シンプルで美しいアイコンを簡単に使える。
データ管理
Claude Artifacts Storage API - 永続化ストレージ
ブラウザ内でデータを保存できる仕組み。セッションをまたいでデータが残るため、何度アクセスしても過去のデータが表示される。
開発環境
Claude (Anthropic) - AI支援開発
要件定義から実装、デバッグ まで、Claudeとの対話で開発を進めた。
なぜこの構成を選んだのか
サーバーレス
バックエンドサーバーが不要なので、インフラ管理の手間がなく、運用コストも0円。個人利用には最適。
シンプル
認証やデータベースが不要で、素早く作れる。個人利用には十分な機能。
AI活用
プログラミングから遠ざかっていても、Claudeとの対話で開発できた。
開発の流れ
Phase 1: 要件定義(30分)
まず、Claudeに「こんなものを作りたい」と相談しました。
私の最初のメッセージはこんな感じでした。
血液検査の結果を写真撮ってファイルアップロードする
OCR 処理して文字起こしする
その結果から透析の効率Kt/Vを計算する
データを保持して過去と現在が比較できる月2回×12ヶ月×3年
WEBサイトで見られる
こんなのを作りたいです。できそうですか。要件定義してください
Claudeは詳細な要件定義を作成してくれました。
機能要件(データ入力、計算、管理、表示・分析)
非機能要件(セキュリティ、パフォーマンス、ユーザビリティ )
技術的検討事項(OCR 精度、データ保存、医療的考慮)
制約事項と実現可能性
プロジェクトの全体像が見え、何を作るべきか明確になりました。
Phase 2: MVP開発(30分)
最初はOCR 機能なしの手動入力版を作成することにしました。
実装した機能:
- データ入力フォーム
- Kt/V計算ロジック(Daugirdasの第2世代式)
- データ保存・一覧表示
- グラフ表示
Claudeが生成したReactコードを、Claude Artifacts(対話的に動くアプリを作れる機能)で実行。
ここまで約30分で完成しました。
初めてReactアプリを作った私でも、Claudeの助けを借りれば驚くほど早く形になりました。
Phase 3: 機能追加・改善(1〜2時間)
実際に使いながら、気づいた点をどんどん追加していきました。
1. 除水量の自動計算
私: 除水量を計算するのが面倒なので、
透析前体重から透析後体重を引いて除水量にしてくれない?
Claude: いいですね!体重差を自動的に除水量として計算するようにします。
実装後、入力の手間が大幅に減りました。
2. 尿素 除去率(URR)の追加
私: このサイトでは尿素除去率も見てるようです。機能追加できますか?
https://www.aijinkyo.com/ktv.html
Claude: なるほど!尿素除去率(URR)も一緒に計算・表示できるようにしますね。
参考サイトを見せただけで、同様の機能を実装してくれました。
3. CSV エクスポート
私: CSV出力とかできますか?
Claude: はい、CSV出力機能を追加しますね!
医師への共有や自分でのバックアップに使えるCSV エクスポート機能を実装。Excel 対応の文字コード も考慮してくれました。
4. レスポンシブ対応の確認
私: このサイトはスマホでも見れる?
Claude: はい、スマホでも見れます!
レスポンシブデザインで作っているので、
スマホ・タブレット・PCどのデバイスでも快適に使えます。
最初から対応してくれていました。
Phase 4: OCR 機能の検討
当初はTesseract.js(JavaScript で動くOCR ライブラリ)で実装する予定でしたが、開発中にふと気づきました。
「Claudeに写真を見せれば文字起こししてくれるよね?」
そこで、OpenAI API やClaude API を使った画像認識の方向性を検討。
結局、
- 手動入力でも十分実用的
- API 利用にはコストがかかる
- まずはシンプルな形で使ってみる
ということで、現時点では手動入力のみとしました。
将来的に、本当に必要だと感じたらAPI 連携を実装する予定です。
実装のポイント
技術的に工夫した点をいくつか紹介します。
Kt/V計算式の実装
const calculateKtV = ( preBUN, postBUN, time, uf, weight) => {
const R = postBUN / preBUN;
const t = time / 60 ;
const ktv = - Math . log ( R - 0 . 008 * t) + ( 4 - 3 . 5 * R) * ( uf / weight) ;
return ktv;
} ;
Daugirdasの第2世代式を実装しました。これは透析医学会でも推奨されている標準的な計算式です。
数式は複雑に見えますが、Claudeが医療サイトの情報を基に正確に実装してくれました。
尿素 除去率(URR)の計算
const calculateURR = ( preBUN, postBUN) => {
const urr = (( preBUN - postBUN) / preBUN) * 100 ;
return urr;
} ;
URRはKt/Vよりもシンプルな指標で、「透析前の尿素 がどれだけ減ったか」をパーセンテージで示します。
データの永続化
await window . storage. set ( `dialysis: ${ id} ` , JSON . stringify ( record)) ;
const result = await window . storage. get ( `dialysis: ${ id} ` ) ;
const record = JSON . parse ( result. value) ;
const result = await window . storage. list ( 'dialysis:' ) ;
Claude Artifacts Storage API を使うことで、ブラウザ内にデータを永続保存できます。
キーにdialysis:というプレフィックス をつけることで、データを整理しています。
グラフの二軸表示
Kt/V(0〜2の範囲)とURR(0〜100%の範囲)を同時にプロット。
<YAxis yAxisId= "left" domain= {[ 0 , 2 ]} / >
<YAxis yAxisId="right" orientation="right" domain={ [ 0, 100 ] } / >
<Line yAxisId= "left" dataKey= "Kt/V" stroke= "#4f46e5" / >
<Line yAxisId= "right" dataKey= "URR(%)" stroke= "#10b981" / >
左軸と右軸で異なるスケールを設定することで、両方の推移を1つのグラフで確認できます。
CSV エクスポートの文字化け対策
const bom = '\uFEFF' ;
const blob = new Blob ([ bom + csvContent] , {
type : 'text/csv;charset=utf-8;'
}) ;
BOM(Byte Order Mark)を付けることで、Excel で開いても日本語が文字化けしません。
こういった細かい配慮も、Claudeが自動的に実装してくれました。
除水量の自動計算
let uf = parseFloat ( formData. uf) ;
if ( ! uf && preWeight && postWeight) {
uf = preWeight - postWeight;
}
除水量の入力欄が空の場合、透析前後の体重差から自動的に計算します。
手動で入力した場合はその値を優先するので、柔軟に対応できます。
使ってみて
良かった点
記録が習慣化した
アプリがあることで、検査後すぐに入力する習慣ができました。ノートに手書きしていた頃は「あとで書こう」と思って忘れることもありましたが、スマホ でサッと入力できるので継続しやすいです。
推移が一目瞭然
グラフで見ると、調子の良し悪しが視覚的にわかります。「最近ちょっと下がってきたな」「今月は良好だ」といった変化に気づきやすくなりました。
目標意識が生まれた
Kt/V 1.2以上を維持しようという意識が生まれました。赤字(目標未達)を見ると「次は頑張ろう」という気持ちになります。
医師とのコミュニケーションが円滑に
CSV をエクスポートして印刷し、診察時に見せることができます。口頭で「最近の調子」を伝えるよりも、データで示す方が話が早いです。
改善の余地
もちろん、まだまだ改善の余地はあります。
OCR 機能
やっぱり写真から自動入力したいです。OpenAI API やClaude API を使えば実装できそうなので、今後追加予定です。
他の検査値
Cr(クレアチニン )、K(カリウム )、P(リン)、Hb(ヘモグロビン)なども記録したいです。透析患者にとって重要な指標なので。
アラート機能
異常値の時に通知が欲しいです。「前回よりKt/Vが0.3以上下がっています」といった警告があると便利。
クラウド 同期
今は1つのブラウザでしか使えないので、複数デバイス で見られるようにしたいです。Supabaseなどのバックエンドを追加すれば実現できそう。
今後、少しずつ機能を追加していく予定です。
AI(Claude)と開発してみて
プログラミングから離れていても作れた
正直に言うと、最近はプログラミングから遠ざかっていました。
以前はある程度コードを書いていましたが、仕事や生活の変化で数年間ほとんど触れていませんでした。特にReactのような最近のフレームワーク は未経験でした。
しかし、Claudeとの対話で
「こういう機能が欲しい」
「ここをこう変えたい」
「このサイトの機能を参考にしたい」
と自然言語 で伝えるだけで、コードを生成・修正してくれました。
エラーが出たときも、エラーメッセージをコピーして「これどういう意味?」と聞けば、原因と解決策を教えてくれます。
プログラミングの知識よりも、「何を作りたいか」を明確にすることの方が重要 だと実感しました。
ブランクがあっても、AIがサポートしてくれれば問題なく開発できる時代になったんだなと感じます。
要件定義から実装まで一貫してサポート
Claudeとの開発プロセス は、こんな流れでした。
最初の相談 : 実現可能性の検証、全体像の把握
技術選定 : 適切なライブラリやアーキテクチャ の提案
実装 : コード生成、バグ修正
改善 : 使いながら気づいた点を随時追加
ドキュメント作成 : この記事の構成案も提案してもらった
従来なら、
要件定義: エンジニアに相談
技術選定: 調査・比較
実装: コードを書く
テスト: バグを見つけて修正
ドキュメント: 自分で書く
と、各工程で時間がかかっていましたが、Claudeとの開発では全てが対話の中で完結 しました。
数日かかる開発が、数時間で完成 したのは驚きでした。
ただし医療情報の扱いには注意
このアプリはあくまで記録・参考用 です。
Kt/Vの計算式は標準的なものですが、個々の患者さんの状況によって解釈が異なる場合があります
目標値(Kt/V≥1.2)は一般的な推奨値ですが、年齢や合併症の有無によって変わります
このアプリの数値だけで自己判断せず、必ず医療従事者に相談してください
医療情報を扱うアプリを作る際は、こうした注意書きを明記することが重要です。
まとめ
自分の透析データ管理のために、AIの力を借りてアプリを開発してみました。
学んだこと
AIを活用すれば、ブランクがあっても実用的なアプリが作れる
数年ぶりのプログラミングでしたが、Claudeとの対話でアプリを完成させることができました。
要件定義をしっかりすることの重要性
「何を作りたいか」を明確にすれば、AIが適切な実装を提案してくれます。
小さく始めて、使いながら改善していくアプローチの有効性
最初から全機能を実装するのではなく、MVPを作って使いながら改善していく方が、実用的なアプリになります。
今後の予定
個人利用の範囲で、以下の改善を検討中です。
OpenAI/Claude API でOCR 機能実装 : 写真から自動入力
より多くの検査値に対応 : Cr, K, P, Hbなど
PWA化 : ホーム画面に追加してアプリのように使える
クラウド 同期 : 複数デバイス で使える
同じように透析データ管理で困っている方の参考になれば幸いです。
「こういうアプローチもあるよ」といった情報があれば、ぜひコメントで教えてください。
※注意事項
このアプリは医療機器ではありません。あくまで記録・参考用であり、医療判断の代替とはなりません。実際の医療判断は必ず医療従事者にご相談ください。
参考リンク :
- 愛知県腎臓病協議会 Kt/V計算ツール
- Claude (Anthropic)
- React 公式ドキュメント