AI回答で出たコードをどこに貼ればいいか分からない時の考え方
ChatGPTにコードを出してもらっても、「これはどのファイルのどこに貼るの？」で止まることがあります。
貼る場所を間違えると、直るどころか404、500、真っ白、表示崩れの原因になります。まずコードの種類を分けて考えましょう。
先に結論
AIが出したコードは、まず種類で分けます。
| コードの種類 | よく貼る場所 | 注意点 |
|---|---|---|
| HTML | body内、表示したい場所 | 既存のタグ構造を壊さない |
| CSS | style.css、または既存CSSファイル | 同じclass名の上書きに注意 |
| JavaScript | script.js、または </body> の前 | 読み込み順に注意 |
| PHP | 対象の .php ファイル内 | <?php の内外を間違えない |
| .htaccess | .htaccess | 必ずバックアップして1行ずつ試す |
症状クラスターで次に見るページ
AIコードは、貼る場所を決めただけで終わらせない方が安全です。貼る前、アップロード前、公開後で見るページを分けると、既存サイトを壊しにくくなります。
| 今の迷い | 次に見るページ | 整理すること |
|---|---|---|
| AIの回答が長く、どこが変わるか分からない | AIが出したコードを差分で確認する方法 | 追加行、削除行、URL、class名、フォーム送信先、危険な変更を確認します。 |
| 差分をメモにしてAIへ再確認したい | AIコード差分確認メモメーカー | 変更ファイル、消えた行、不安な差分、戻すファイルを1つの相談文にします。 |
| サーバーへ上書きしてよいか不安 | AIに直してもらったコードをアップロードする前の確認チェックリスト | バックアップ、秘密情報、PHP構文、.htaccess、確認URLをアップロード前に見ます。 |
| 公開後にどこまで確認すべきか分からない | AIに修正してもらった後、どこまで自分で確認すべきか | 対象ページ、関連ページ、スマホ、フォーム、リンク、戻し方を確認します。 |
HTMLは表示したい場所に入れる
HTMLは画面に表示する部品です。ボタン、見出し、フォーム、リンクなどを追加する時に使います。
<body>の中に入れることが多い- 表示したい位置の近くに入れる
<head>に入れるコードではないか確認する- 開始タグと終了タグの対応を壊さない
- 既存のフォームやリンクの中に無理に入れない
CSSは見た目を変えるファイルに入れる
CSSは色、余白、文字サイズ、レイアウトを変えるコードです。多くの場合、assets/css/style.css や style.css に入れます。
- 既存CSSファイルの最後に追加すると試しやすい
- 同じclass名の指定がすでにないか見る
- 一部だけ変えたい時は対象を狭くする
- 反映されない時はキャッシュを確認する
- HTML側のclass名とCSS側のclass名が一致しているか見る
JavaScriptは読み込み順が大事
JavaScriptはクリック時の動き、フォーム確認、コピー機能などを作るコードです。HTMLより後に読み込む必要があることがあります。
</body>の直前に入れることが多い- 外部ファイルなら
script.jsに入れる document.addEventListener('DOMContentLoaded', ...)があるか見る- 同じidをHTML側で使っているか確認する
- ブラウザの開発者ツールでエラーを見る
PHPは <?php の内外を間違えない
PHPはサーバー側で動くコードです。HTMLの中に混ざることもありますが、貼る位置を間違えると真っ白や500エラーになります。
<?php ... ?>の中に入れるコードか確認する- HTMLとして表示するコードではないか確認する
requireやincludeのパスに注意する- 変数名が既存コードとぶつかっていないか見る
- アップロード前にPHP構文チェックをする
.htaccessは特に慎重に扱う
.htaccess はサーバー設定に近いファイルです。1行のミスでサイト全体が500エラーになることがあります。
- 必ず元の
.htaccessを保存する - AIのコードを丸ごと置き換えない
- 追加する位置をAIに再確認する
- 1回に1つの変更だけ試す
- 500になったらすぐ元に戻す
AIに貼る場所を聞き直すテンプレート
あなたが出したコードを、どのファイルのどこに貼ればいいか確認したいです。
コードの種類:
例: HTML / CSS / JavaScript / PHP / .htaccess
対象ファイル候補:
今のファイル構成:
すでにある関連コード:
やりたいこと:
回答では、貼るファイル名、貼る位置、既存コードの前後関係、貼ってはいけない場所、バックアップが必要かを分けて説明してください。
危険な変更や、前提が足りない場合は、先に質問してください。貼る前の確認チェック
- コードの種類を分けた
- 対象ファイル名が分かっている
- 貼る位置の前後が分かっている
- バックアップを取った
- 秘密情報が混ざっていない
- AIに「差分で教えて」と聞いた
- アップロード後に確認するURLを決めた