Claude Codeで実際にWeb開発すると何が変わる？AI開発を実践検証

Claude Codeを使うと、Web開発はどこまで変わるのでしょうか。

単に「AIがコードを書いてくれる」というだけなら、ChatGPTなどの生成AIでも以前から可能でした。

Claude Codeの大きな違いは、実際のコードベースを調べ、原因を特定し、ファイルを修正し、テストを実行し、Gitまで含めて一連の開発作業を進められることです。

今回はOmochiXの実際のWordPressサイトで発生した不具合をClaude Codeへ渡し、どこまで任せられるのかを実践しました。

結論から言うと、今回のケースでは「問題を人間が定義する → Claude Codeが調査・修正・QA・Gitを担当する → 人間が本番反映と最終確認をする」という分業が成立しました。

今回Claude Codeで実際に検証したこと

今回の対象は、OmochiXの記事詳細ページです。

OmochiXでは記事カテゴリーとして「AIニュース」「AI入門」「AI活用」「比較・検証」「未来・働き方」などを使っています。

記事#05「ChatGPT・Claude・Gemini、仕事ならどう使い分ける？」のカテゴリーを「AIニュース」から「比較・検証」へ変更したところ、記事上部のカテゴリー表示は正しく変わったものの、パンくずだけが次のようになっていました。

Home → AIニュース → 記事タイトル

本来は、

Home → 比較・検証 → 記事タイトル

となるべきです。

今回はこの問題をClaude Codeに修正してもらいました。

人間がClaude Codeへ渡した指示

今回、人間側で「single.phpのこの行をこう変更して」といった実装方法までは指定していません。

伝えたのは主に次の内容です。

• 記事カテゴリーを変更してもパンくずが「AIニュース」のままになる
• 現在の投稿カテゴリーへ動的に連動させる
• カテゴリーページへの正しいリンクも付ける
• 記事上部のカテゴリー表示とパンくずを一致させる
• SEOや構造化データへの影響を確認する
• Header、Hero、Footerなど不要な部分は変更しない
• 最小diffで修正する
• PHPの構文チェックを行う
• 問題なければcommitとpushまで行う

つまり、人間が渡したのは「どんな状態にしたいのか」と「どこまで変更してよいのか」です。

具体的な原因調査と実装方法はClaude Code側に任せました。

Claude Codeは最初にコードを調査した

Claude Codeは、いきなりコードを書き換えたわけではありません。

まずOmochiXのWordPressテーマを調査し、記事詳細ページを担当しているsingle.phpを確認しました。

そこで原因を特定しました。

記事上部のカテゴリーラベルは、WordPressのget_the_category()を使って実際の投稿カテゴリーを取得していました。

一方、パンくずでは投稿カテゴリーではなく、「AIニュース」として使っている投稿ページへのリンクが固定で表示されていました。

つまり、同じ記事ページの中でカテゴリーの取得方法が2種類存在していたことが原因でした。

原因特定後、1ファイルだけを修正

原因を特定したClaude Codeは、記事上部ですでに使われているカテゴリー情報をパンくずでも利用するように変更しました。

変更したファイルは、

wp-theme/omochix-theme/single.php

の1ファイルだけです。

diffは+5行 / -1行。

サイト全体を大きく書き換えるのではなく、原因になっている部分だけを変更しました。

実際の開発フローはどうなった？

今回の流れを整理すると、次のようになります。

従来であれば、人間がコードを開いて原因を探し、修正箇所を考え、コードを書き、テストしてGitへ反映する必要がありました。

今回は、その中間工程のかなりの部分をClaude Codeが担当しています。

テストまでClaude Codeに任せられた

コードを書いて終わりではありません。

修正後、Claude CodeはPHPの構文チェックを実行しました。

single.phpだけでなく、OmochiXテーマと関連プラグインのPHPファイルについても確認し、構文エラーがないことをチェックしています。

さらに、今回利用したカテゴリー変数が修正箇所より前で定義されていることも確認し、未定義変数になるリスクがないことまで確認しました。

そして最終的に、

BREADCRUMB_CATEGORY_PASS

という結果で作業を完了しました。

GitまでClaude Codeが処理

QA後はGitへの反映もClaude Codeが行いました。

今回作成されたcommitは、

fix: use the post's actual category in the article breadcrumb

です。

その後mainブランチへpushし、ローカルとorigin/mainのハッシュが一致しているところまで確認しました。

つまり今回、人間がコードを直接編集することなく、

調査 → 原因特定 → 修正 → QA → commit → push

まで進みました。

それでも人間が担当した部分

ここは非常に重要です。

今回、Claude Codeがすべてを担当したわけではありません。

OmochiXはGitHubへpushしても本番サイトへ自動デプロイされない構成になっているため、本番環境へのファイル反映は人間が行いました。

また、実際のスマートフォン画面でカテゴリーやパンくずが正しく表示されているかという最終確認も人間側で行います。

今回の分業を簡単に表すと、

人間：問題発見・ゴール設定・本番判断
Claude Code：調査・実装・テスト・Git

という形です。

普通の生成AIとの違いを感じたポイント

通常のチャット型AIへコードについて質問する場合、人間がコードをコピーしてAIへ渡し、返ってきたコードを自分でファイルへ貼り付ける使い方が中心でした。

Claude Codeでは、AI自身がプロジェクト内を調査できます。

そのため、人間側が最初から原因箇所を知っている必要がありません。

今回も人間が「single.phpのパンくず部分がハードコードされている」と特定してから依頼したわけではありません。

「カテゴリーを変えたのにパンくずが変わらない」という現象から、Claude Code自身がコードを調べて原因へ到達しました。

ここが単純なコード生成との大きな違いです。

Claude Codeを使うと開発者はいらなくなる？

今回の結果だけを見れば、かなりの工程をAIへ任せられています。

しかし、「Claude Codeがあるから開発知識は不要」と考えるのは早いでしょう。

むしろ重要になったのは、コードを書く作業そのものよりも、

• 何が問題なのか
• 正常な状態は何なのか
• どこまでAIへ変更を許可するのか
• どのテストを通せば完成なのか
• 本番へ出してよいのか

を判断することでした。

AIが「どう作るか」を担当できる範囲が増えるほど、人間には「何を作るか」「何をもって完成とするか」を定義する能力が求められます。

AI開発で重要だったのは「制約」を渡すこと

今回の依頼では、「パンくずを直して」だけではなく、変更してはいけない範囲も明確にしました。

たとえば、不要なリファクタリングをしない、CSSを変更しない、HeaderやHeroなどへ影響を与えない、本番デプロイはしない、といった制約です。

AIエージェントは自律的に作業できるからこそ、「やってほしいこと」と同時に「やってはいけないこと」を明確にすることが重要です。

これはAIコーディングだけでなく、AIエージェント全般に共通する考え方です。

AIエージェントの仕組みについては、「AIエージェントとは？生成AIとの違い」でも詳しく解説しています。

#04の検証との違い

OmochiXでは以前、Claudeを使ってMotion Design v1を実装する検証も行いました。

その検証では、既存コードを調査したうえで必要なモーションだけを追加し、不要な実装は見送るという判断までAIが行いました。

詳しくは「Claude Fable 5.1を実務で使ってみた」で紹介しています。

今回の検証で注目したのはモデル単体のコーディング能力ではなく、Claude Codeを開発ワークフローへ入れることで、人間の仕事そのものがどう変わるかです。

OmochiXの結論｜AI開発は「コードを書く」から「仕事を設計する」へ

今回の小さな修正でも、AIコーディングが向かっている方向はかなり見えました。

人間がすべてのコードを書く必要は徐々に減っています。

その代わり、

問題を見つける → ゴールを定義する → 制約を決める → AIへ任せる → 結果を検証する

という仕事の重要性が高まっています。

Claude Codeは単なる「コード生成ツール」というより、コードベースを調査し、実装し、検証まで進める開発エージェントとして使う方が本質に近いと感じました。

今回のOmochiXでは、実際に1ファイル・+5/-1行の修正を、原因調査からGit pushまでClaude Codeへ任せることができました。

もちろん、大規模な設計変更や本番環境への重要な操作まで無条件に任せるべきではありません。

しかし、人間がゴールと安全な境界を定義できれば、日常的な開発作業のかなりの部分をAIへ移せる可能性があります。

まとめ

今回、OmochiXの実際のWeb開発でClaude Codeを使った結果、

調査 → 原因特定 → 修正 → QA → Git commit → push

までを一連の流れとして任せることができました。

一方、人間は問題発見、完成条件の定義、本番反映、最終確認を担当しました。

Claude Codeによって変わるのは、単純なコーディング速度だけではありません。

「人間がコードを書く開発」から「人間が仕事を定義し、AIが実行する開発」へ。

AIコーディングの本当の変化は、そこにあるのかもしれません。