AIが作ったコードは「動けばOK」ではない｜本番公開前に確認したい8つのポイント

生成AIへ「ハンバーガーメニューを作って」「WordPressで施工事例を表示して」と依頼すると、短時間でコードを提案してもらえます。

自分で一から書くより早く、知らない実装方法を学べることも大きなメリットです。

一方、AIが生成したコードが画面上で動いたからといって、そのまま本番サイトで安全に使えるとは限りません。

不要な処理が含まれていたり、ほかのページで不具合を起こしたり、セキュリティやアクセシビリティへの配慮が不足していたりする可能性があります。

今回は、AIが作ったコードをWeb制作で利用するとき、本番公開前に確認したい8つのポイントを解説します。

1．依頼した目的と処理が一致しているか

最初に確認したいのは、AIが依頼内容を正しく理解しているかです。

たとえば、「ボタンを押したらお問い合わせページを開きたい」と依頼したのに、AIがページ移動ではなく画面上へフォームを表示する処理を作ることがあります。

見た目が似ていても、目的が異なれば適切なHTMLやJavaScriptも変わります。

コードを確認する前に、次の点を整理します。

何を操作する機能なのか

操作後に何が起きるべきか

どのページで使用するのか

パソコンとスマートフォンの両方で必要か

WordPressなどの既存環境へ組み込むのか

期待する動作を言葉で説明できなければ、生成されたコードが正しいかも判断できません。

まずは「何のための処理か」を明確にします。

2．コードの役割を説明できるか

AIが作ったコードを一行ずつ暗記する必要はありません。

ただし、全体として何をしているのかは理解しておく必要があります。

少なくとも、次の点は説明できる状態を目指します。

どの要素を取得しているのか

何をきっかけに処理が動くのか

どの表示やデータを変更するのか

どのファイルへ追加するのか

外部の機能やライブラリを使用しているか

内容が分からないまま本番へ追加すると、後日不具合が起きたときに修正できません。

AIへ「この処理を初心者向けに説明して」「各部分の役割を説明して」と依頼し、自分の理解と照らし合わせることも有効です。

説明を読んでも判断できない処理は、そのまま公開しない方が安全です。

3．既存のコードと重複していないか

AIは、こちらが共有していないファイルや既存の処理を知りません。

そのため、すでにサイト内にある機能と同じ処理を新しく追加することがあります。

たとえば、次のような重複が起こります。

同じJavaScriptを二重に読み込む

既存のクリック処理をもう一度登録する

同じ名前のCSSを別の目的で追加する

すでにあるプラグインと似た機能を自作する

同じ外部ライブラリを異なる方法で読み込む

処理が重複すると、一回のクリックで二回動作したり、CSSが上書きされたり、ページの読み込みが遅くなったりします。

生成された部分だけを見るのではなく、組み込むサイト全体を確認することが重要です。

4．対象範囲が広すぎないか

AIが提案するCSSやJavaScriptは、必要以上に広い範囲へ影響する場合があります。

あるページのボタンだけを変更したかったのに、サイト内のすべてのボタンへ同じデザインが適用されるケースが代表的です。

JavaScriptでも、同じ種類の要素を一括で取得した結果、意図していないメニューやリンクまで操作することがあります。

確認したいのは、次のような点です。

対象のページだけに適用されるか

ほかの部品と名前が重複していないか

複数配置しても正しく動くか

管理画面へ影響しないか

WordPressの別テンプレートでも問題が起きないか

トップページで動いたからといって、サイト全体で安全とは限りません。

共通ファイルへ追加する場合は、下層ページや投稿ページも確認します。

5．入力されたデータを安全に扱っているか

お問い合わせフォーム、検索機能、会員登録、URLのパラメーターなど、利用者が入力する情報を扱う処理には特に注意が必要です。

AIは、簡単に動作を確認できる形を優先し、安全対策が不足したコードを提案する場合があります。

利用者が入力した内容を、そのまま画面へ表示したり、データベースへ保存したりすると、不正な処理へ悪用される可能性があります。

WordPressでは、入力内容の確認、保存前の処理、画面へ表示するときの処理、操作権限の確認などが必要です。

管理画面で実行する機能だから安全とも限りません。

次のような情報を扱う場合は、特に慎重に確認します。

氏名やメールアドレス

電話番号や住所

パスワード

ファイルのアップロード

決済に関する情報

管理画面の設定

データベースの内容

外部サービスの認証情報

セキュリティに関係する処理は、AIの回答だけで判断せず、使用する仕組みの公式資料も確認することが大切です。

6．エラーが起きた場合を考えているか

AIが生成するコードは、必要なデータや要素が存在する前提で書かれていることがあります。

しかし実際のWebサイトでは、ページによって対象要素がなかったり、画像が登録されていなかったり、外部サービスからデータを取得できなかったりします。

正常に動く場合だけでなく、失敗した場合の動作も確認します。

対象要素が存在しなくてもエラーにならないか

画像が未登録でもレイアウトが崩れないか

通信に失敗したときに画面が止まらないか

入力内容が間違っている場合に案内が出るか

データが0件でも不自然な表示にならないか

同じボタンを連続して押しても問題ないか

開発中のテストデータでは正常でも、本番運用で入力される内容は一定ではありません。

空欄、長文、記号、想定外の画像サイズなども試す必要があります。

7．使いやすさとアクセシビリティを確認する

画面上でクリックできても、すべての利用者が操作できるとは限りません。

AIへ「見た目がよいメニューを作って」と依頼すると、マウス操作だけを想定した実装になることがあります。

公開前には、次の点を確認します。

キーボードだけでも操作できるか

選択中や開閉中の状態が伝わるか

文字と背景の色が見分けやすいか

ボタンの押せる範囲が小さすぎないか

入力エラーの内容が文章で伝わるか

画像が表示されない場合も内容を理解できるか

スマートフォンで拡大しても操作できるか

デザインだけをAIへ依頼すると、HTMLの意味や読み上げ機能への配慮が抜けることがあります。

見た目と操作性の両方を確認することが重要です。

8．後から修正できる構成になっているか

AIへ何度も追加の要望を出していると、その場しのぎの処理が増えることがあります。

最初のコードへ別のコードを重ね、さらに不具合を直すコードを追加すると、最終的にどの処理が必要なのか分からなくなります。

画面上では動いていても、同じ指定が複数存在し、不要な処理が残っている可能性があります。

本番へ反映する前に、次の点を整理します。

同じ処理が繰り返されていないか

使用していない部分が残っていないか

名前から役割を判断できるか

HTML、CSS、JavaScriptの役割が分かれているか

変更理由を後から確認できるか

別の担当者が読んでも修正できるか

AIには、追加修正だけでなく「現在の処理を整理して重複をなくしてほしい」と依頼する方法もあります。

ただし、整理後に動作が変わっていないか、改めて確認が必要です。

AIへサイト全体を渡せば安心とは限らない

関連するコードを多く共有すれば、AIが状況を理解しやすくなる場合があります。

一方、プロジェクト全体をそのまま送ると、重要な部分を見落としたり、機密情報まで含めてしまったりする危険があります。

共有前には、次の情報が含まれていないか確認します。

パスワード

APIキー

アクセストークン

データベースの接続情報

顧客の個人情報

非公開URLの認証情報

サーバーへ接続するための秘密鍵

問題に関係するファイルや処理を選び、秘密情報は実際の値から架空の文字列へ置き換えます。

AIに確認してもらう範囲と、外部へ出してはいけない情報を分けることが必要です。

本番サイトで直接試さない

AIが提案したコードを、本番サイトの編集画面やサーバー上のファイルへ直接追加するのは危険です。

間違いがあると、表示崩れだけでなく、管理画面へ入れなくなったり、サイト全体でエラーが発生したりする可能性があります。

まずはローカル環境やテスト環境で確認します。

本番へ反映する場合も、事前にファイルとデータベースのバックアップを取り、変更前の状態へ戻せるようにしておきます。

一度に多くのファイルを変更せず、何を変えたのか分かる単位で反映することも大切です。

問題が起きた場合に、直前の変更を特定しやすくなります。

公開前に行いたい動作確認

AIが生成したコードを組み込んだら、少なくとも次の項目を確認します。

目的どおりに動作するか

パソコンとスマートフォンで使えるか

異なる画面幅でも崩れないか

ほかのページへ影響していないか

対象データがない場合もエラーにならないか

長い文章や大きな画像でも表示できるか

キーボードで操作できるか

ブラウザのエラーが発生していないか

ページの表示が極端に遅くなっていないか

ログインしていない状態でも正しく動くか

WordPressの更新後も必要な処理が残る構成か

問題が起きたときに元へ戻せるか

確認中に不具合を見つけたら、複数の修正を同時に行わず、一つずつ原因を切り分けます。

AIは完成品を受け取る道具ではなく、制作を補助する道具

AIは、コードのたたき台を作ったり、処理を説明したり、原因の候補を整理したりすることが得意です。

しかし、実際に使用するサイトの構造、運用方法、利用者、サーバー環境をすべて理解しているわけではありません。

AIが生成したコードに対する責任は、最終的にサイトへ組み込む制作者が持ちます。

そのため、AIの回答をそのまま正解として扱うのではなく、確認すべき候補として利用する姿勢が必要です。

まとめ

AIが作ったコードは、Web制作の時間を短縮し、知らない実装を学ぶために役立ちます。

ただし、画面上で一度動いたことだけでは、本番サイトで安全に使えるとは判断できません。

目的との一致、既存コードとの重複、影響範囲、セキュリティ、エラー時の動作、アクセシビリティ、保守性などを確認する必要があります。

また、本番サイトへ直接追加せず、テスト環境で動作を確認し、バックアップを用意してから反映することも重要です。

AIにコードを書いてもらうことと、そのコードを理解して安全に運用することは別の作業です。

AIを制作の補助として使い、最後は制作者自身が確認して判断する。この習慣が、効率と品質を両立したWeb制作につながります。