Yokoyama Nana ChatGPTやClaude、Geminiなどの生成AIを活用すれば、Webサイトを短時間で作成できるようになりました。
実際に、
- ランディングページを作る
- お問い合わせフォームを作る
- Webサイトをカスタマイズする
といった作業も、AIによって手軽に行えるようになっています。
一方でありがちなのが、「最初はうまく動いていたのに、修正しているうちに分からなくなった…」というケースです。
- レイアウトを少し変更したいだけなのに全体が崩れてしまう…
- うまく動いていないけど、どこをどうしたらいいかわからない…
今回はAIで作ったコードが直せなくなってしまう原因と、その対処法について解説します。
目次
AIで作ったコードが直せなくなる理由
AIが変更した内容を把握できていない
生成AIに修正を依頼すると、意図した箇所だけでなく周辺のコードも変更されることがあります。
しかし、出力結果だけを見て「動いているから大丈夫そう」と判断してしまうと、変更内容を十分に確認できていないことがあります。
例えばこのようなケースです。
- 本来必要だった処理が削除されている
- 他の機能に影響するコードが変更されている
変更内容を理解しないまま修正を重ねることで、後から原因の特定が難しくなることがあります。
コードを修正するための知識が必要
自分で書いたコードであれば、「この辺りを変更したから影響が出たのかもしれない」と予測できますが、AIが生成した場合は、まず内容を理解するところから始める必要があります。
そのため、コードを作ることができても、修正の段階で手が止まってしまうことがあります。
コードを作ることと修正することでは求める知識やスキルが少し異なります。
- どのコードがどこに影響しているのかを調査するスキル
- なぜその実装になっているのかを理解する力
- 修正によって何が変わるのかを把握するスキル
問題が起きたときに原因を特定し適切に修正するためには、コードを読み解く力が必要です。
AIとのやり取りを繰り返した結果、コードが複雑になっている
- AIでコードを作る
- 少し修正する
- またAIに修正を依頼する
- 別の不具合が発生する
- 再度AIに修正を依頼する
これを繰り返すことで、不要なコード・重複したコードが増えていることがよくあります。
結果として、どこを直せばよいのか分からなかったり、修正が芋づる式に広がってしまうのです。
トラブルを防ぐためのポイント
変更前の状態を保存する
こまめにバックアップを残しておきましょう。
問題が発生した際に比較しやすくなります。
Web制作では、Gitなどのバージョン管理ツールを活用して変更履歴を管理しておくと安心です。
一度に大きく修正しない
AIにまとめて修正を依頼すると、影響範囲が分かりづらくなります。
修正は小さな単位で行うのがおすすめです。
私は、1つ1つの機能に分けて修正をお願いするようにしています。
「お問い合わせフォームにバリデーションを追加して、送信完了画面を作って、スマホ表示も改善して」のように複数の修正を一度に依頼するのではなく、
- 必須項目のバリデーションを追加 → 確認
- エラーメッセージを表示 → 確認
- 送信完了画面の作成 → 確認
- スマホ表示の調整 → 確認
と順番に進めることで、手戻りを小さくすることができます。
修正毎に、AIのアウトプットを確認する
何度もAIに修正を依頼している場合は、使われていないコードが残っていたり、いつの間にか意図せぬ変更が入ってしまっている可能性があります。
AIのアウトプットを確認し、リファクタリングしておくべきことがないか・間違った修正が入ってしまっていないかをチェックするようにしましょう。
デバッグする力を身につけておく
問題が起きたときは、どこに原因があるのかを切り分け、特定する必要があります。
デバッグする力は、AIを使う・使わないに関係なく、開発を行う上で欠かせないスキルです。
また、原因を特定できるようになることで、AIに対してもより的確な指示を出せるようになります。
例えば、「フォームが動かないので直して」ではなく、「JavaScriptのバリデーション部分でエラーが出ているので修正して」のように具体的な依頼ができるようになります。
AIが実装を手伝ってくれるようになった今でも、
- プログラミングの基本的な考え方
- 利用している言語の理解
- ブラウザの開発者ツール（DevTools）の使い方
といった知識は身につけておくことをおすすめします。
まとめ
参考になる内容はありましたか？
生成AIによって誰でもコードを書ける時代になりました。
非常に便利なツールですが、コードの品質や修正内容を最終的に判断するのは人間です。
AIのコード品質は年々向上しているものの、コードを読み解く力や問題を切り分ける力は今後も一定必要なスキルだと考えています。
AIで作ったWebサイトの修正・コードレビューもご相談ください
もしAIで作ったコードの修正に行き詰まってしまったら、プロに相談することも選択肢のひとつです。
本メディアを運営している株式会社レクトでは、
- AI生成コードのレビュー
- AIで作ったWebサイトの修正
- レスポンシブ対応の見直し
- Webサイトの改修・運用サポート
- コードの保守性改善
なども承っています。
「AIで作ったけれど、どこから手を付ければいいか分からない…」
そんな場合もお気軽にご相談ください。
