第11回で、ツールに3つの機能を足しました。 薬の種類、計算履歴、見た目の調整。 ここまでで、機能としてはひととおり揃った状態です。
第12回（今日）は、ファイル分割という工程に通します。 1枚のHTMLに全部詰まっている状態から、設計図（HTML）、見た目（CSS）、動き（JavaScript）の3つに分けます。
ちょっと中級っぽい響きの「リファクタリング」という言葉も、ここで一緒に体験します。
ㅤ
なぜ分けるのか
ここまで作ってきたツールは、index.html という1枚のファイルに、
- 構造（どこにボタンや表を置くか）
- 見た目（色、大きさ、余白）
- 動き（ボタンを押したときの計算）
が全部詰まっています。
最初の1本目はこれで何の問題もありません。 ただ、機能を足していくと、だんだん中身が長くなってきます。 そうなると、修正したい場所を探すのに時間がかかるようになります。
そこで、3つに分けます。
- 構造 → index.html
- 見た目 → style.css
- 動き → script.js
CSS は、Webページの見た目（色・大きさ・配置）を担当する設計書。 私のイメージは、家具の配置と内装の指示書です。
JavaScript（ジャバスクリプト、JS）は、Webページに動きをつけるためのプログラミング言語。 ボタンを押したら計算する、みたいな部分はこれが担当します。 私のイメージは、家のセンサーとスイッチです。
3つのファイルが連携して、1つのアプリになる。 この感覚を、今日掴みます。
ㅤ
ステップ1 Claude Codeに頼む
ターミナルで、第11回のフォルダにいる状態（cd ~/Desktop/vibe-test）で、claude を起動します。 そしてこう話しかけます。
今のindex.htmlを、3つのファイルに分割してください。 ・index.html（HTMLの構造だけ） ・style.css（見た目の指定） ・script.js（計算と履歴のロジック）
ファイルを分けた後も、index.html を開けば今までと同じように動くようにしてください。
Claude Codeが、ファイルを3つに分けてくれます。 フォルダを見ると、本当に3つのファイルができているはずです。
ブラウザで開き直して、見た目も動きも変わっていないことを確認します。 これが「ファイル分割」、もう少し格好いい言い方をすると「リファクタリング」と呼ばれる作業です。
リファクタリングというのは、動きは変えずに、コードの書き方だけを整える作業のこと。 家でいうと、引っ越さずに部屋の模様替えをするイメージです。
ㅤ
なぜ分けるのが嬉しいのか
「動いてるのに、なぜわざわざ分けるの？」と感じた人もいるはずです。 正しい疑問です。
理由は、3つあります。
1. 分担できる
見た目を変えたいときはCSSだけ触る、計算を直したいときはJSだけ触る、と作業範囲を限定できます。 1枚のファイルだと、全部の中から探す手間がかかります。
2. 再利用できる
CSSを別のページにも使う、JSを別のアプリでも使う、ということがやりやすくなります。
3. AIにも伝わりやすい
「style.cssの色だけ直して」と頼めるようになります。 ファイルが分かれていると、AIへの指示も具体的に出せます。
最初の1本目は、1ファイルで全部入りでOK。 作りながら大きくなってきたタイミングで、AIに「分けて」と頼む。 これが、現実的な進め方です。
ㅤ
ステップ2 分けた後で、ピンポイント修正を試す
分割したことの嬉しさを、すぐに体感できる場面を作ります。
style.css の中で、ボタンの色だけ、ティールから青に変えてください。 他のファイルや他の指定は、触らないでください。
数秒で、style.css の該当部分だけが書き換わります。 index.html や script.js は触られません。
「他は触らないで」という第6回・第7回で出てきた指示が、ここで一段強く効きます。 ファイルが分かれていると、AIも安心して「ここだけ」に集中できます。
ㅤ
今日のつまずきポイント
ファイル分割で、よくぶつかる場面が2つあります。
1. ブラウザに反映されない
第11回でも書きましたが、強制再読み込み（Ctrl + F5、MacならCmd + Shift + R）で解決します。 分割した直後は、特にキャッシュが残りやすいです。
2. 分けたら動かなくなった
リファクタリング後にアプリが壊れる、というのも、まれに起きます。 そのときは、こう書きます。
ファイル分割後、ブラウザで開いても何も動きません。 元の動作に戻るように、見直して直してください。
Claude Codeが、ファイル間の参照関係（index.html から style.css と script.js を読み込む記述）を確認して直してくれます。
ㅤ
今日のまとめ
3行で振り返ります。
- 1ファイルで全部入りからスタートして、大きくなったら分けるのが現実的
- 構造（HTML）、見た目（CSS）、動き（JavaScript）の3つに分けるのが基本
- 分けた後は、ピンポイント修正がぐっと楽になる
ㅤ
次回予告
第13回からは、第5段に入ります。 第5段のテーマは「世に出す」。
ここまで自分のパソコンの中だけで動いていたアプリを、ネット上に置いて、家族や同僚にURLで送れる状態にします。 その第一歩が、GitHubに上げる、という工程です。
ㅤ
ファイル分割は、見えない投資です。 今日の数十分が、明日以降の数時間を返してくれます。
ㅤ
連載の更新は、メルマガ「おかもんだより」でもお知らせします。 よかったら登録してお待ちください。
ㅤ
演習：30分の宿題
第12回は、自分のアプリをファイル分割してみる回。
宿題1：自分のアプリを Claude Code で3ファイル分割（15分）
第11回までで育てたアプリを開いて、Claude Code に：
今のindex.htmlを、3つのファイルに分割してください。
・index.html（HTMLの構造だけ）
・style.css（見た目の指定）
・script.js（計算と履歴のロジック）
ファイルを分けた後も、index.html を開けば今までと同じように動くようにしてください。
完了したら、ブラウザで開いて、見た目も動きも変わっていないことを確認します。
宿題2：ピンポイント修正を試す（10分）
分割したアプリで、CSSだけ・JSだけ修正する、を試します。
style.css のボタン色を、ティールから紺色に変えてください。
他のファイルは、触らないでください。
VSCode で diff を見ると、style.css だけ変わって、他は変わっていないはず。 ピンポイント修正の効果を、自分の目で確認してください。
宿題3：分割後の3ファイルの先頭を眺める（5分）
何が書いてあるか、読まなくていいです。眺めるだけ。
3ファイルそれぞれが「短くて役割が明確」になっていることを、目で確認できれば十分。 コードの中身の理解は、第13回以降で必要になったときに自然と進みます。
医療職別 実例ギャラリー：分割で読みやすくなった例
例1：医師・薬量計算ツールを4ファイルに分割
私の解熱薬計算ツールが、機能を増やしたら500行まで膨らみました。 Claude Code に依頼して、以下の4ファイルに分割：
index.html（80行）：構造のみstyle.css（120行）：見た目calculator.js（180行）：計算ロジックhistory.js（120行）：履歴表示ロジック
ロジックを2つに分けたのは、「計算」と「履歴」は別の関心事だから。
これで「履歴の表示順を変えたい」と頼むと、history.js だけ触ってくれます。
例2：薬剤師・相互作用早見ツールをモジュール化
薬剤師Bさんの相互作用ツール、薬の組み合わせデータを別ファイル interactions.json に外出し。
データだけ更新するときは JSON ファイルを触れば済むので、コードは安定。
「ロジック」と「データ」を分ける、というのが分割の応用。
例3：医療事務・問い合わせ定型回答ツールをコンポーネント化
医療事務Cさんの問い合わせフロー、質問パターンごとに別ファイルに分割。
questions/scheduling.html（予約変更）questions/hours.html（診療時間）questions/parking.html（駐車場）
新しい質問パターンが増えたら、ファイルを1つ追加するだけ。 機能追加が、機械的にできるようになりました。
もっと深く：リファクタリングの歴史
「動きは変えずに、コードの書き方だけ整える」というリファクタリングの考え方は、最近のものではありません。
1980年代：Smalltalk コミュニティで「コードを後から整える」という習慣が生まれた。
1999年：Martin Fowler が『リファクタリング。プログラムの体質改善テクニック』という本を出版。「動作を変えずにコードを整える」が、業界の共通言語になった。
2000年代：MVCパターン（Model / View / Controller）が普及。Webアプリは「データ」「見た目」「制御」を分ける設計が標準に。
2010年代：Atomic Design（小さな部品を組み合わせる設計）、Modular Architecture（モジュール化）が広がる。
今：Vibe Coding でも、AI に「分割して」と頼むだけで、これらの設計原則が適用されたコードが返ってきます。
つまり、40年の積み重ねが、いま「1プロンプトで体験できる」状態になっているわけです。 これは、過去の世代の開発者にとっては羨ましい状況かもしれません。
動画で見る
- YouTube：Martin Fowler によるリファクタリング解説（英語）：もっと深く知りたい人向け