Claude Code は、ターミナルで動く AI コーディングアシスタントです。ChatGPT や Claude.ai とは異なり、ファイルの作成・編集・実行・エラー修正をターミナル上で自律的に行えます。医療研究者が リハビリAI や 医療AI の教材 Web アプリを構築する場合、ChatGPT でコードを生成してコピーするよりも、Claude Code で段階的に構築するほうが整合性を保ちやすく、修正サイクルも速くなります。
本記事では、FIM 予後予測を説明する静的 Web アプリ（架空データのみ使用）を、Claude Code を使って段階的に構築する方法を解説します。6 フェーズのワークフローと、コピペで使える 4 種のプロンプトテンプレートを整理します。完成した教材は、14·01 過学習デモ や 14·04 DCA デモ と同様に、HTML・CSS・JavaScript の 3 ファイル構成で動作します。
本稿は、第13部「研究プロセスに、生成AIを組み込む」の第5記事です。生成 AI への情報入力の可否については 13·06 生成 AI 使用時の個人情報保護で詳しく解説します。論文 Methods の起草は 13·04 論文の Methods を書くプロンプト、査読対応は 13·03 査読コメントに返信するプロンプト、ChatGPT での論文読解は 13·01 ChatGPT で医学論文を読む方法 を参照してください。
// 01 · LEARN OUTCOMESこの記事で学ぶこと
- Claude Code の役割と、ChatGPT / Claude.ai との使い分けを説明できる。
- REQUIRE → SCAFFOLD → ITERATE → REVIEW → TEST → DEPLOY の 6 フェーズワークフローを設計できる。
- HTML・CSS・JavaScript の 3 ファイル構成で動作する静的 Web アプリを Claude Code で構築できる。
- FIM ミニデモ・過学習デモ・ROC デモ・DCA デモの設計コンセプトを説明できる。
- 「目的・入力・出力・制約・テスト条件」を含む構造化プロンプトを書ける。
- 個人情報を入力しない設計原則を、教材開発のワークフローに組み込める。
// 02 · CONCLUSIONまず結論
// 03 · FIGURE6フェーズワークフローと3ファイル構成を図で理解する
Claude Code で医療研究教材 Web アプリを段階的に構築するには、6 つのフェーズを順に進めます。各フェーズで「目的・入力・出力・制約」を明示したプロンプトを使うことで、AI と人間の役割分担が明確になり、コードの品質と安全性を維持できます。
Web アプリは index.html・style.css・app.js の 3 ファイルで構成します。外部ライブラリやサーバーサイドコードを使わない静的構成にすることで、Xserver の静的ホスティングや GitHub Pages・Vercel の無料枠でそのままデプロイできます。npm やビルドツールも不要です。
Claude Code に渡す情報の範囲を事前に決めることが、安全な教材開発の第一歩です。架空データ・公開論文の抄録・一般的な用語集は入力して構いませんが、個人が特定できる情報は形式を問わず入力しません。
個人情報の詳細な取り扱いおよびクラウド AI のガバナンス設定については、13·06 生成 AI 使用時の個人情報保護を参照してください。
// 04 · CLINICALリハ領域での具体ケース
以下の 4 つのデモは、Claude Code で構築する教材の典型例です。いずれも架空データのみを使い、診断・治療判断への利用を禁止する免責表示を画面に常時表示します。
CASE 1 · FIM ミニデモ
年齢・発症後日数・入院時 FIM motor・FIM cognitive の 4 項目をスライダーで入力し、架空の推定退院時 FIM total・FIM motor ゲイン・リスク分類（低・中・高）を表示します。係数は教育目的の例示値であり、実患者データに基づくものではありません。
CASE 2 · 過学習デモ
多項式次数スライダーを変えながら、訓練データへの過適合とテストデータでの汎化誤差の差を折れ線グラフで可視化します。14·01 過学習を、グラフで体験する が同コンセプトの参考実装です。
CASE 3 · ROC デモ
閾値スライダーを動かすと ROC 曲線上の点が移動し、感度・特異度・陽性的中率がリアルタイム更新されます。FIM 自立達成のカットオフ選択を題材にすると、リハビリテーション医学での文脈が理解しやすくなります。
CASE 4 · DCA デモ
閾値確率スライダーで net benefit カーブと "treat all" / "treat none" の比較を表示します。14·04 Decision Curve Analysis を、グラフで体験する が同コンセプトの参考実装です。
カルテ・患者氏名・生年月日・カルテ番号・MRI/CT 個人情報・電子カルテのスクリーンショット・顔が映る動画は Claude Code に入力しません。架空データ・集計値・公開論文の抄録・一般的な用語集に限定して使います。
// 05 · THEORY背景概念と用語整理
Claude Code は、Anthropic が開発したターミナルベースの AI コーディングアシスタントです。ChatGPT や Claude.ai がテキスト生成に特化しているのに対し、Claude Code はファイル操作・コマンド実行・エラー修正のループをターミナル上で自律的に回せます。コードを ChatGPT に貼り付けてエラーを返す往復が不要になり、開発サイクルが大幅に短縮されます。
| 観点 | ChatGPT / Claude.ai | Claude Code |
|---|---|---|
| 動作環境 | ブラウザ・スマホアプリ | ターミナル（macOS / Linux / Windows） |
| 主な用途 | テキスト生成・要約・翻訳 | コード生成・ファイル操作・実行 |
| ファイル操作 | できない（コードをコピー） | 直接作成・編集・削除 |
| エラー修正 | エラー文をコピーして再質問 | エラーを自動取得して修正 |
| 教材向き | テキスト教材・論文解説 | Web アプリ・インタラクティブデモ |
| 費用 | 月額 / 従量課金 | 月額 + API 従量課金 |
AI ペアプログラミングでは、人間が「目的・入力・出力・制約」を決め、AI が実装候補のコードを出します。臨床ロジックの妥当性・係数の根拠・安全性の確認は研究者が担います。AI が書いたコードをそのまま本番公開するのではなく、必ずローカルで動作確認し、免責表示が正しく表示されているかを確認します。
医療 AI 教材の初回制作では、HTML・CSS・JavaScript だけで動く静的構成が最も安全です。React や Vue などのフレームワークは学習コストが高く、デプロイに npm ビルドが必要になります。静的構成ならブラウザで index.html を開くだけで動作確認でき、Xserver や GitHub Pages に FTP / git push するだけで公開できます。
| 観点 | 確認する内容 | リハ研究での例 |
|---|---|---|
| 目的 | 教育目的か、臨床判断補助か | FIM 予後の理解を助ける教材（判断には使えない） |
| 入力 | 個人情報が含まれないか | 架空の年齢・発症後日数・入院時 FIM のみ |
| 出力 | 免責表示が常時表示されるか | 「教育目的のデモです」を画面常時表示 |
| 制約 | 個人情報入力欄がないか | 氏名・ID・生年月日の入力フォームを作らない |
| 安全性 | 外部へのデータ送信がないか | 全処理をブラウザ内で完結（Network タブ確認） |
// 06 · IMPLEMENTATIONコピペで使えるプロンプトテンプレート
以下のプロンプトは、公開情報または個人情報を含まない研究メモ・架空データに限定して使います。カルテ・査読中原稿全文・未公開データは入力しません。STEP 3 → 4 → 5 → 7 の順に使うと、HTML 骨格から UI・ロジック・テストまで一通り構築できます。
// STEP 3 · HTML 骨格
使用シナリオ：Claude Code の最初のプロンプトとして使い、index.html・style.css・app.js の 3 ファイルを一括生成する。
期待出力：ファイル名コメント付きの 3 ファイル分のコード。教育免責表示が含まれた基本 HTML 構造。
注意点：実患者データを使わないこと・免責表示を必ず含めることを制約に明記する。生成後はブラウザで開いて免責表示が表示されるか確認する。
あなたは医療 AI 教育サイトのフロントエンド開発者です。
FIM 予後予測を説明する静的 Web アプリを作ってください。
【目的】
退院時 FIM total を架空データで説明する教育用デモ。
診断・治療判断には使えない旨を画面に常時表示する。
【要件】
・index.html、style.css、app.js の 3 ファイル構成
・外部ライブラリ・CDN なし（バニラ HTML/CSS/JS のみ）
・レスポンシブ: PC / タブレット / スマートフォン対応
【制約】
・実患者データは使わない（架空データのみ）
・"このデモは教育目的です。実際の診断・治療には使用できません。"
と画面上部に常時表示する
・個人情報を入力するフォームを作らない
【出力】
3 ファイル分のコードを順番に提示してください。
各ファイルの先頭にファイル名をコメントで記述してください。// STEP 4 · スライダー UI
使用シナリオ：STEP 3 で骨格ができた後、スライダー入力 UI を追加する。
期待出力：4 項目のスライダー・現在値ラベル・リアルタイム更新の JavaScript イベントリスナー。
注意点：個人情報（氏名・ID・生年月日）の入力欄を絶対に作らないことを制約に明記する。サーバー送信なしのブラウザ完結を明記する。
FIM ミニデモにスライダー UI を追加してください。
【スライダー項目】
名称 最小値 最大値 初期値 単位
Age 40 100 70 歳
Days since onset 1 90 30 日
FIM motor (admission) 13 91 40 点
FIM cognitive (admission) 5 35 20 点
【表示要件】
・スライダーを動かすたびに予測結果をリアルタイム更新する
・現在値をスライダーの右側にラベル表示する
・スライダーラベルは日本語と英語を併記する
【制約】
・個人情報（氏名・ID・生年月日）の入力欄を作らない
・外部へのデータ送信は行わない（全処理をブラウザ完結）// STEP 5 · 予測ロジック
使用シナリオ：スライダー UI が完成した後、教育用の簡易予測ロジックを app.js に追加する。
期待出力：estimatedFIMTotalDis・estimatedMotorGain・riskLabel の 3 変数を計算する関数。FIM 理論範囲内のクランプ処理付き。
注意点：実患者データに基づく係数と誤認される表現を避けるよう制約に明記する。関数冒頭に「教育目的の例示係数」コメントを入れさせる。
教育用の簡易予測ロジックを app.js に追加してください。
【出力変数の定義】
estimatedFIMTotalDis : 退院時 FIM total の推定値（架空式）
estimatedMotorGain : FIM motor 改善量の推定値
riskLabel : "低リスク" / "中リスク" / "高リスク" の 3 段階
【係数の設計指針】
・実患者データに基づく回帰係数とは明示しない
・教育目的で設計した例示係数であると function 冒頭に
コメントで明記する
・式が単純であること（線形加算が望ましい）
【安全性要件】
・予測結果の下に "この推定値は教育目的のデモです" と常時表示する
・結果が FIM 理論範囲（total: 18–126）を外れた場合は
クランプ処理する
【制約】
・実患者データに基づく係数と誤認される表現を避ける
・「AI が予測」「診断システム」「臨床判断ツール」という
表現を使わない// STEP 7 · テスト観点
使用シナリオ：アプリが一通り完成した後、公開前のテストチェックリストを生成する。
期待出力：UI・計算ロジック・個人情報保護・教育免責表示の 4 カテゴリのチェックリスト。各項目に確認方法付き。
注意点：個人情報保護とセキュリティ（Network タブ確認）を必ずチェック項目に含めさせる。
FIM ミニデモの公開前テスト観点を作ってください。
【テスト範囲】
1. UI テスト
・主要ブラウザ（Chrome / Firefox / Safari / Edge）での動作
・スマートフォン（iOS / Android）でのレイアウト確認
2. 入力範囲テスト
・スライダー最小値・最大値・中間値での出力が妥当か
・スライダー値が定義範囲外にならないか
3. 計算ロジックテスト
・estimatedFIMTotalDis が 18–126 の範囲内か
・riskLabel が 3 値のいずれかであるか
・特殊値（全最小 / 全最大）でエラーが発生しないか
4. 個人情報保護テスト
・個人情報入力フォームがないことの確認
・外部へのデータ送信がないこと（Network タブで確認）
5. 教育免責表示テスト
・"教育目的" 免責表示が常時表示されているか
・医療判断への利用を促す表現がないか
【出力】
番号付きチェックリスト形式で出力してください。
各項目に「確認方法」を 1 行で追加してください。// 07 · MYTHSよくある誤解
誤解 1：コードが書けないと Claude Code は使えない
完全なゼロからは難しいですが、HTML・CSS・JavaScript それぞれの役割が分かる程度の基礎知識があれば、Claude Code の出力を確認・修正しながら構築できます。本記事のステップ方式のプロンプトを使うと、段階的に理解を深めながら進められます。
誤解 2：Claude Code は ChatGPT より高度なツールです
目的が異なります。Claude Code はファイル操作と反復的なコーディングに特化したツールであり、ChatGPT・Claude.ai はテキスト生成と対話に適しています。優劣ではなく役割で使い分けます。論文要約・メール文案は ChatGPT、Web アプリ構築は Claude Code、という使い分けが基本です。
誤解 3：AI が書いたコードは安全です
バグや意図しない動作、セキュリティ上の問題が含まれる可能性があります。本番公開前には必ずローカルで全動作を確認し、個人情報入力フォームが含まれていないこと・外部送信が発生していないことを Network タブで検証します。
誤解 4：ローカルで動けば本番環境でも同じように動く
パス設定・HTTPS 制約・ブラウザキャッシュ・文字コードなどが本番環境とローカルで異なることがあります。公開後は複数のブラウザと実機スマートフォンで動作確認します。
// 08 · WRITING論文・実務への組み込み方
Web アプリを研究教材として公開する際には、教育目的であること・架空データを使っていること・診断や治療判断への使用不可であることをアプリ画面内に常時表示します。論文や学会発表で Web デモに触れる場合は、「研究内容の理解を助ける補助教材として Web デモを公開している」と明記し、係数は「教育目的の例示値であり実患者データに基づくものではない」と注記します。
ICMJE 2026 の AI 利用開示要件に従い、Claude Code を使ってアプリを開発した場合は Acknowledgments に記載します。コードの動作確認・科学的内容の検証・安全性確認は著者が実施した事実も合わせて記述します。
「本研究の教材 Web アプリの開発に Claude Code（Anthropic）を使用しました。コードの機能確認、科学的内容の検証、個人情報保護の確認は著者が実施しました。」
// 09 · CHECKLIST確認リスト
- 01アプリの目的（教育目的 / 診断補助不可）を明確にしましたか。
- 02入力情報に個人情報（氏名・ID・生年月日）が含まれていませんか。
- 03未公開データや査読中原稿全文を Claude Code に入力していませんか。
- 04架空データのみを使っていますか。
- 05教育免責表示がアプリ画面に常時表示されていますか。
- 06出力コードをローカルで動作確認しましたか。
- 07外部へのデータ送信がないことを Network タブで確認しましたか。
- 08FIM・PUL・mRS などの用語を統一しましたか。
- 09FIM 理論範囲（18–126）のクランプ処理が実装されていますか。
- 10AI 支援の範囲を Acknowledgments に記録しましたか。
- 11「AI が予測」「診断システム」などの過剰な臨床実装表現を避けましたか。
- 1213·06 の個人情報保護基準を確認しましたか。
// 10 · QUIZ理解度チェック
-
Claude Code と ChatGPT の最大の違いはどれですか。
- モデルの賢さ
- ターミナルでのファイル操作と自律的なコード実行
- 日本語の流暢さ
- 価格
答えを見る
答えは 2 です。Claude Code はターミナルで動き、ファイル作成・編集・実行・エラー修正を自律的に行えます。ChatGPT はテキスト生成に特化しています。
-
FIM ミニデモで使うデータとして適切なのはどれですか。
- 自施設の回復期患者の実データ
- 教育目的で設計した架空データ
- 他施設から提供された匿名化データ
- 公開データベースの個人レベルデータ
答えを見る
答えは 2 です。教育用 Web デモでは架空データのみを使います。実データ・匿名化データ・公開 DB の個人レベルデータは使いません。
-
教材 Web アプリを公開するとき必須の表示はどれですか。
- 開発者の所属機関名
- 教育目的・診断判断不可の免責表示
- Claude Code のバージョン番号
- 参考文献の URL
答えを見る
答えは 2 です。「このデモは教育目的です。実際の診断・治療には使用できません。」という免責表示を画面に常時表示します。
-
公開前テストで Network タブを確認する主な目的はどれですか。
- ページ読み込み速度の測定
- 外部へのデータ送信がないことの確認
- フォントの読み込み確認
- CSS の構文チェック
答えを見る
答えは 2 です。スライダー操作中に外部へのリクエストが発生していないことを確認することで、個人情報の意図しない送信がないことを証明できます。
// 11 · FAQよくある質問
- Claude Code は ChatGPT と何が違いますか。
- Claude Code はターミナルで動き、ファイル作成・編集・実行・エラー修正を自律的に行えます。ChatGPT はブラウザで動くテキスト生成ツールです。Web アプリを一から構築する場合は Claude Code が適しており、論文の要約・下書きには ChatGPT や Claude.ai が手軽です。用途が異なるため、どちらが高度ということはありません。
- HTML・CSS・JavaScript の知識がないと使えませんか。
- 各ファイルの役割（HTML=構造・CSS=見た目・JS=動作）が理解できる程度の基礎知識があれば使えます。「このスライダーが動かない」「免責表示が見えない」といった現象をプロンプトで伝えるだけで Claude Code が修正します。完全なゼロからは難しいですが、本記事のステップ方式のプロンプトを使えば段階的に構築できます。
- 教材アプリを論文の補足に添付してよいですか。
- 添付できます。ただし、アプリが教育目的であること・架空データを使っていること・診断や治療判断には使えないことを明記します。係数が実患者データに基づくものではないことも注記します。ICMJE 2026 に従い、Claude Code を使用したことを Acknowledgments に記述します。
- Claude Code は Claude.ai（有料プラン）があれば使えますか。
- Claude Code は Claude.ai の Web インターフェースとは別のツールで、ターミナルから
npm install -g @anthropic-ai/claude-codeでインストールします。料金は Anthropic API の従量課金で、Claude.ai の月額プランとは別に API クレジットが必要です。詳細は Anthropic の公式ドキュメントを確認してください。
// REF参考文献
- Collins GS, Moons KGM, Dhiman P, Riley RD, Beam AL, Van Calster B, et al. TRIPOD+AI statement: updated guidance for reporting clinical prediction models that use regression or machine learning methods. BMJ 2024;385:e078378.
- Moons KGM, Wolff RF, Riley RD, Collins GS, et al. PROBAST+AI: an updated quality, risk of bias, and applicability assessment tool for studies developing and evaluating prediction models with artificial intelligence. BMJ 2025;388:e082505.
- Vasey B, Nagendran M, Campbell B, Clifton DA, Collins GS, Denaxas S, et al. Reporting guideline for the early-stage clinical evaluation of decision support systems driven by artificial intelligence: DECIDE-AI. Nat Med 2022;28(5):924-933.
- World Health Organization. Ethics and governance of artificial intelligence for health. World Health Organization 2021.
- Bender EM, Gebru T, McMillan-Major A, Shmitchell S. On the dangers of stochastic parrots: can language models be too big? Proceedings of the 2021 ACM Conference on Fairness, Accountability, and Transparency 2021;610-623.
- International Committee of Medical Journal Editors. Recommendations for the Conduct, Reporting, Editing, and Publication of Scholarly Work in Medical Journals: AI use by authors. ICMJE Recommendations 2026.