第5回でChatGPTで作ったツール、まだ手元にありますか。 体重を入れると、薬の目安量が出る、あれです。
第4段からは、それをClaude Codeで「育てて」いきます。 第11回（今日）と第12回の2回で、機能を足し、見た目を整え、最後には複数のファイルに分けていきます。
今日のゴールは、3つの機能を足すこと。
- 薬の種類を選べるようにする
- 計算結果の履歴を画面に残す
- 見た目をもう一段整える
所要時間12分。 道具は、第10回で動かせるようになったClaude Codeです。
ㅤ
準備
ターミナルで、第5回のツールを置いてあるフォルダに移動します。
cd ~/Desktop/vibe-test
そして、claude を起動します。
claude
ここから、会話だけで進めます。
ㅤ
ステップ1 薬の種類を増やす
Claude Codeに、こう話しかけます。
今あるindex.htmlを見てください。 このツールに、薬の種類を選択できるドロップダウンを追加してください。
候補は3つ： ・アセトアミノフェン（10〜15mg/kg、最大500mg/回） ・イブプロフェン（5〜10mg/kg、最大400mg/回） ・アスピリン（小児には推奨されません、と表示）
選んだ薬に応じて、計算式が切り替わるようにしてください。 アスピリンを選んだ場合は、計算結果ではなく赤字の警告を表示します。
「ドロップダウン」というのは、クリックすると選択肢がペロンと出てくる、よくある入力部品のこと。 プルダウンとも呼ばれます。
数秒で、ファイルが書き換わります。
ブラウザで index.html を開き直してみます。 ドロップダウンが追加されていて、薬を選ぶと計算式が切り替わるはずです。
「動いた」を確認できたら、次に進みます。 動かなかった場合は、Claude Codeに状況を伝えます。
ブラウザで開きましたが、ドロップダウンが表示されません。 何が起きているか、見て直してください。
これで、たいてい直してくれます。
ㅤ
ステップ2 履歴を画面に残す
次に、計算した結果を画面に残しておく機能を足します。
計算ボタンを押すたびに、結果を画面の下半分に履歴として残してください。 「日時」「薬の名前」「体重」「計算結果」の4つを表に並べます。 履歴は、ページを閉じるとリセットされてOKです。
ここで、ブラウザの中でデータを覚えさせる、という新しい概念が登場します。
データを長く残したい場合は、データベース（第4回で出てきた）が必要になりますが、今日は「ページを開いている間だけ」覚えておく、というシンプルな仕組みで作ります。
数秒後、index.html が更新されます。 何回か計算してみて、表が増えていくのを確認します。
ㅤ
ステップ3 見た目を整える
ここまでで、機能は揃いました。 最後に、見た目をもう一段整えます。
全体のデザインを、もう少し読みやすくしたいです。 ・余白を増やして、要素ごとにゆったりさせる ・タイトルと注意書きを目立たせる ・ボタンを大きく、押しやすくする ・履歴の表に、薄い線とゼブラ（行ごとの色違い）を入れる ・スマホで見ても崩れないようにする
「スマホで見ても崩れない」という指定を、レスポンシブデザインと呼びます。
レスポンシブというのは、画面の大きさに応じて、自動でレイアウトが変わってくれる作りのこと。 私のイメージは、伸び縮みする服。 パソコンでもスマホでも、同じURLで快適に見られる、現代のWebの基本です。
これも、AIに一言伝えるだけで対応してくれます。
ㅤ
今日のつまずきポイント
実際にやってみると、よくぶつかる場面が2つあります。
1. ブラウザに反映されない
ブラウザは、ファイルを「キャッシュ」（前に見たもののコピー）して表示することがあります。 新しい変更が反映されないときは、キーボードのCtrl + F5（MacならCmd + Shift + R）で「強制再読み込み」をかけます。
2. 想定と違うものが出てくる
これは指示の曖昧さが原因です。 返ってきたものを見ながら、AIに「ここはこうしたい」と追加で具体的に伝えます。
ドロップダウンの位置が、入力欄の下にあります。 入力欄の上に表示してください。
事実と希望を分けて書く（第6回・第7回でも触れた、3行ルール）。 これだけで、修正の精度が上がります。
ㅤ
今日のまとめ
3行で振り返ります。
- アプリは「育てる」もの。1本目を作ってからが本番
- 機能追加・履歴・見た目の3つを、それぞれ独立に頼む
- 直してほしいときは、事実と希望を分けて伝える
ㅤ
次回予告
第12回は、今日育てたアプリを、ファイル分割という工程に通します。 1枚のHTMLに全部詰まっている状態から、設計図（HTML）、見た目（CSS）、動き（JavaScript）の3つに分けます。
リファクタリングという、ちょっと中級っぽい言葉が、実はそんなに怖くない、という話です。
ㅤ
1本目を作るのは、大変。 2本目から、爆発的に楽になります。
ㅤ
連載の更新は、メルマガ「おかもんだより」でもお知らせします。 よかったら登録してお待ちください。
ㅤ
演習：30分の宿題
第11回は、自分のアプリに機能を1つ追加する回。
自分のアプリに、機能を1つ足す
第5回・第10回で作ったアプリのうち、どちらか1つを Claude Code で開いて、機能を1つだけ足してください。
候補機能（職種別）
医師：
- 薬の選択肢を増やす（5種類以上）
- 計算結果に「腎機能補正」のオプションを追加
- 「印刷ボタン」で PDF出力できる機能
看護師・薬剤師：
- チェックリストの保存機能
- 完了率のプログレスバー表示
- 異常値検出時のアラート機能
PT/OT・ST・検査・栄養・事務：
- 過去の入力履歴を表で保持
- グラフ描画機能（時系列で結果を視覚化）
- 結果のCSVエクスポート
「1つだけ」がポイント。一気に3つ足すと、どれが原因で不具合が出たか分からなくなります。1機能ずつ動作確認、を習慣にすると事故が減ります。
医療職別 実例ギャラリー：機能の足し方が分かれた3例
例1：「機能を足しすぎて使いにくくなった」失敗例（架空）
外来で使う薬計算ツールに、欲張って 15機能を一気に追加。 「ドロップダウン × 入力欄 × チェックボックス × タブ × 履歴 × グラフ × 印刷 × エクスポート × 共有 × ...」。 結果、外来で「どこを押せばいいか分からない」状態に。
教訓：機能は足し算より引き算。最も使う1機能だけにフォーカスする方が、現場で実用的。
例2：「最小構成で続けて成功」例
別の医師は、解熱薬計算ツールを1機能のみで運用。「体重を入れる、目安量が出る」だけ。 ただし毎日使うから、改善要望が現場から自然に出てきて、必要な分だけ機能を追加。 3ヶ月後に5機能に成長、しかし全部使われている状態。
教訓：使う頻度が高いツールほど、自然に機能が育つ。
例3：「保護者にも使えるように」改造例
私の解熱薬計算ツールを、保護者向けに改造した版。 体重入力 + ボタンのほかに、「いつ飲ませたか」の記録機能を追加。 6時間ルールの自動チェック（次回投与可能時刻が表示される）まで実装。
外来で「これで管理できますよ」と URL を渡すと、保護者の安心感がぐっと上がるそうです。
もっと深く：localStorage の制限と、個人情報
第11回で出てきた「ブラウザの中で覚える」機能（履歴）は、localStorage / sessionStorage という仕組みで実装されます。
localStorage の制限：
- 容量上限：5MB 程度（ブラウザによって異なる）
- ブラウザ・端末ごとに別々：別のPCからは見えない
- ブラウザの「閲覧履歴削除」で消える
入れていい情報・悪い情報：
✓ 入れていい：自分用の設定、計算履歴（自分しか見ない）、UI の状態 ✗ 入れたら危険：氏名、ID、連絡先、診療情報、APIキー
理由は、localStorage の中身は「ブラウザのDevToolsから誰でも読める」から。 PC を共有している、家族と PC を使っている、職場 PC で個人情報を入れている、などのケースで漏洩リスクがある。
「localStorage は自分専用のメモ帳」と捉えて、他人に見られて困る情報は入れない。 これだけ守れば、活用範囲はぐっと広がります。
動画で見る
- YouTube：paiza「バイブコーディング入門 機能追加編」