既存コードを編集する

プロジェクトに正確な変更を加える

⏱ 想定 ~7 分

01 · 読む

新しいファイルを作るのはすごいですが、現実の開発の大半は既存コードの編集です。アプリに機能を追加、バグ修正、デザイン変更、関数のリファクタ。

ここで Claude Code が本当に光ります。プロジェクト全体を読めるので、コンテキストを理解しています。フッターを追加するように頼めば、どんな HTML 構造があるか把握しています。スタイル変更を頼めば、どの CSS ファイルを編集すべきか分かっています。

Claude はゼロから始めません —— 必要な部分だけを外科的に変更し、それ以外はそのままにします。

💡 想像してみてください業者を呼んで自宅に部屋を増築するところを想像してください。悪い業者は適当に壁を壊すかもしれません。良い業者は図面を確認し、構造を理解し、ちょうど良い場所に部屋を追加します。Claude Code は良い業者です。

前のレッスンで作った HTML に Claude にフッターを追加してもらいます。何を入れるかを明確に伝えましょう。

index.html にフッターを追加してください。内容は copyright 2024 と GitHub へのリンクで。

次は Claude に CSS を編集させます。これは精密な変更です —— 関連するスタイルルールだけを更新するはずです。

ナビバーを sticky にして、スクロール時にトップに固定されるようにしてください

では Level 4 で学んだツールを使いましょう —— git diff です。これで Claude が正確に何を変えたかが分かります。緑が追加、赤が削除。

git diff

重要な習慣はこれ。コミット前に必ず変更をレビューする。Claude は強力ですが完璧ではありません。あなたは常に次のことをすべきです： - diff を読んで何が変わったか理解する - ブラウザやコード実行で変更をテストする - 満足できたらコミット

git diff はあなたの一番の味方です。何が追加され、削除され、変更されたかを 1 行ずつ教えてくれます。

ポイントまとめ

Claude がコードを編集したあと、正確に何が変わったかを教えてくれるコマンドは？

コミット前に Claude が正確にどの行を変更したかを見るには、 git ___ を実行します。

⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。

※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。