コーダーのAI活用入門｜コード生成で失敗しない使い方と確認
「スマホでボタンの位置が少しずれているから、AIに直してもらおう」
こんな小さな修正から、AIをコード作業に使い始める人も増えています。
実際、原因を探してもらったり、修正案を出してもらったり、同じようなコードを書く作業を手伝ってもらったりすると、かなり時間を短縮できます。
ただ、ここで気をつけたいのが、「画面が動いた＝正しく直った」ではないことです。
ボタンを1か所直したつもりが別の画面まで変わっていたり、必要のないパッケージが追加されていたり、以前は動いていた機能が止まっていたりすることもあります。
AIが作ったコードは、最初から「完成品」と考えるより、確認が必要な修正案として扱う方が安全です。
といっても、AIが書いた何百行ものコードを、すべて読んで理解してから使うわけではありません。
大切なのは、自分で確認できる大きさに作業を小さくすることです。
この記事では、
直したい範囲を決める → AIに調べてもらう → 変更する → 差分を見る → 動作を確認する
という流れで、AIをコード作業に使うときの基本を見ていきます。
1. AIにコードを丸投げする前に、直したい範囲を1つに絞る
たとえば、スマートフォンでお問い合わせボタンの文字が2行になってしまったとします。
このとき、
「このサイトをスマホで見やすくしてほしい」
とAIへ頼むこともできます。
ただ、この頼み方では範囲がかなり広いため、AIはボタンだけでなく、文字サイズ、余白、レイアウト、別のコンポーネントまで変更するかもしれません。
そこで最初は、
「お問い合わせボタンの文字がスマホだけ2行になる問題を直す」
くらいまで作業を小さくします。
さらに、
- 今はどうなっているのか
- どうなれば修正完了なのか
- どこまで変更してよいのか
- 変更してほしくない場所はどこか
まで伝えられると、かなり確認しやすくなります。
たとえば、
画面幅375px前後で、お問い合わせボタンの文字が2行になります。
1行で表示されるようにしたいです。
まず原因を調べてほしいです。ほかのボタンやページは変更しないでほしいです。
くらいでも十分です。
プロンプトの文章を完璧に仕上げることが、ここでの本題ではありません。
何を直したいのかと、どこまで触ってよいのかは、人が先に決めておきます。
また、既存コードをAIへ渡す場面では、.env、APIキー、パスワード、顧客データなどの秘密情報が混ざっていないかも先に見ておきます。
仕事のコードなら、利用しているAIサービスのルールに加えて、会社や取引先との契約やリポジトリの運用ルールが優先です。
ポイント
最初からサイト全体を任せるより、「1つの画面」「1つの不具合」「1つの変更」に分ける方が、AIの失敗にも気づきやすくなります。
2. まず説明・候補出しから頼み、いきなり変更させない
AIでコードを書けるようになると、つい最初から「直して」と頼みたくなります。
でも、原因がまだ分かっていない段階では、最初の1回は変更ではなく調査に使うのがおすすめです。
先ほどのボタンなら、
まだコードは変更せず、原因として考えられる場所を教えてほしいです。
関係しそうなファイルと、確かめる理由も説明してほしいです。
と頼めます。
すると、
「ボタン自体のCSSかもしれない」
「親要素の幅が原因かもしれない」
「モバイル用のスタイルが上書きしているかもしれない」
といった候補を先に見ることができます。
ここで方向が合っていそうなら、次に変更を頼みます。
この順番にすると、AIが何をしようとしているのか分からないまま、いきなり大量のコードを書き換えられることを減らせます。
AIに直接ファイルを編集させられるツールでも考え方は同じです。
読むだけなのか、ファイルを書き換えるのか、コマンドを実行するのかでは、AIに許可していることが違います。
Claude CodeやCodexのようにPC上の開発作業まで進められるAIを使う場合は、なのはAI教室の「Claude Code・Codexの権限と承認の読み方」で、この違いを先に確かめておくと分かりやすいです。
AIに任せる範囲が広くなるほど、「何ができるAIなのか」より、「今このAIに何を許可しているのか」の方が効いてきます。
3. 変更したら、必ず差分を見る
AIにコードを変更してもらったら、すぐブラウザを開いて「直った」で終わらせず、その前に一度差分を見ます。
差分とは、簡単にいうと変更する前と後で、コードのどこが変わったのかです。
たとえば、
変更前：padding: 16px;
変更後：padding: 12px;
になっただけなら、変更内容はかなり追いやすいです。
一方で、ボタンの余白を直しただけなのに、
- 関係のないファイルまで変更されている
- コンポーネント全体が書き換えられている
- 新しいライブラリが追加されている
- 設定ファイルが変わっている
- 大量のコードが削除されている
といった差分が出ていたら、一度止まった方が安全です。
もちろん、大きな変更がすべて間違いというわけではありません。
ただ、「なぜこの変更が必要なのか説明できない差分」が混ざっている状態で、そのまま先へ進まないことが大切です。
分からない部分があれば、
この変更は何のためですか？
今回の修正に必要ですか？
これを変更しなかった場合はどうなりますか？
と、そのままAIへ聞けます。
AIの説明自体が必ず正しいとは限りませんが、変更理由を確かめる材料にはなります。
そして、元に戻せる状態も残しておきます。
Gitを使っているなら変更前にコミットする、まだGitに慣れていなければフォルダをコピーしておくなど、方法は難しくありません。
なのはAI教室の「変更前後を確認する習慣」では、差分・画面・テスト・Gitの状態を見る基本的な流れをまとめています。
AIコード生成でかなり大事な感覚
いい変更は、「AIがすごいコードを書いた変更」より、人が何を変えたのか追える変更です。
4. ブラウザ表示・テスト・エラーを確認する
差分に問題がなさそうでも、コードを見ただけでは修正完了ではありません。
コードを見た次は、実際に動かす番です。
先ほどのボタンなら、まずスマートフォン幅で1行になったかを確かめます。
でも、それだけではなく、
「パソコン表示は崩れていないか」
「隣のボタンは変わっていないか」
「押したときのリンクは動くか」
まで見ておきます。
一つ直すと、関係する別の場所に影響が出ることがあるからです。
コードの種類によっては、さらに次も確かめます。
- ブラウザのコンソールに新しいエラーが出ていないか
- ビルドが正常に通るか
- 型チェックや静的解析で問題が出ていないか
- 既存の自動テストが通るか
- 変更した機能を実際に操作できるか
ここで気をつけるのは、AIが作ったテストだけを信用しすぎないことです。
AIが実装とテストの両方を書いた場合、同じ思い込みで両方を作ってしまうことがあります。
たとえばお問い合わせフォームなら、「正しい内容を入力して送信できた」だけではなく、
- 空欄で送ったらどうなるか
- 間違ったメールアドレスを入れたらどうなるか
- とても長い文字を入れたらどうなるか
- 送信ボタンを連続で押したらどうなるか
- 通信に失敗したらどうなるか
といったケースもあります。
特にログイン、フォーム、個人情報、ファイルアップロード、決済などに関係する部分は、見た目以上に慎重な確認が必要です。
Webアプリケーションのセキュリティを確かめるときは、OWASP Top 10のような開発者向け資料も判断材料になります。
また、入力フォームではブラウザ側でエラーを表示するだけでは安全対策として十分ではなく、サーバー側でも入力を確かめる必要があります。
とはいえ、ここまでの項目を一度に覚えるのは大変です。
まずは、
「直した場所を見る」→「その周辺を見る」→「エラーを見る」→「失敗する場合も試す」
という順番だけでも、AIコードをそのまま採用するよりかなり安全になります。
5. 本番へ反映するかは、人が決める
ローカル環境やテスト環境で問題なく動いたら、最後に本番へ反映します。
ここもAIに任せられる作業は増えていますが、公開してよい状態かどうかの判断までAIへ丸投げしないのが前提です。
本番反映の前に、少なくとも次を確かめます。
- 変更内容を説明できる
- 関係のない変更が混ざっていない
- 必要なテストを行った
- 元の状態へ戻せる
- APIキーや個人情報などがコードやログへ入っていない
- 新しいパッケージや設定変更がある場合、その理由が分かる
- 本番で問題が起きたとき、どこを戻せばよいか分かる
そして、仕事としてコードを納品する場合は、AIとの会話がなくても次の人が保守できる状態にしておきます。
AIが生成したコメントが大量に残っていたり、同じ処理が何か所にも増えていたり、なぜ追加されたのか分からないライブラリが入っていたりすれば、動いていても後から修正しにくくなります。
必要なら、最後にAIへ、
今回変更したコードについて、不要な重複や依存関係がないか確かめてほしいです。
ただし、まだ変更はせず、改善候補だけ教えてほしいです。
とレビューを頼むのもいい方法です。
ただし、そこで出てきた改善案を全部適用する必要はありません。
せっかく小さく直したのに、最後の「ついでの改善」で大量に書き換えてしまったら元も子もありません。
今回直すべきものが直ったなら、そこで手を止めます。
案件全体でのAIの使い方は、フリーランスのWeb制作でAIを使うには？効率化と品質を両立する考え方でも紹介しています。
AIで作られたサイトの修正を頼む前の整理は、AIで作ったサイトを直したい｜よくある失敗と修正を頼む前の整理にまとめてあります。
まとめ｜AIコード生成は「小さく頼んで、確認して進む」
AIは、コード作業をかなり助けてくれます。
分からないコードの中身を、かみ砕いてもらえます。
不具合の原因なら、候補を並べてくれます。
修正案もいくつか出してくるので、テストで見る観点はそこから増やせます。
こうした使い方だけでも、開発中に止まってしまう時間を減らせます。
一方で、AIがコードを書けることと、そのコードをそのまま公開してよいことは別です。
安全に使う基本は、とてもシンプルです。
- 直したい場所を1つに絞る
- まず説明してもらう
- 小さく変更する
- 差分を見る
- 画面とテストで確認する
- 本番へ出すかは人が決める
難しいコード生成から入らなくても、AI活用は始められます。
次に「ここをちょっと直したい」という場所が出てきたら、まずAIへコードを書かせる前に、
「どこが原因だと思う？ まだ変更せず説明して」
と聞いてみるのが、次の一手になります。
AIコード生成の使い方は、そこから始めるだけでも十分です。