なぜAIのコードははみ出すの？「コードの入れ子問題」を解決する最強プロンプトを公開！

💡 AIと仲良くなるコツ

なぜ「特別な指示」が必要なの？

ブログでコードを紹介するとき、AIに「コピーボタン付きで作って！」と頼むと、実はちょっとしたトラブルが起きることがあります。

⚠️ よくあるトラブル
・コードの中に別のコード（コピー機能）を入れようとして、AIが混乱する
・途中で出力が止まってしまう
・スマホで見たときに、右側に大きくはみ出して表示が崩れる

これらは、AIが「見せるためのコード」と「動くためのコード」を混同してしまうのが原因です。今回は、そんな問題をまるっと解決して、「崩れないコピーボタン付き配布カード」を誰でも作れる魔法のプロンプトを公開します！

📦 コードの「入れ子」ってこういうこと！

① 記事に貼る「配布用カード」のコード

② その中にある「コピーボタン」のコード

③ コピーされる「魔法」のコード

マトリョーシカのように「コードの中に、別のコード」が何重にも入っている状態です。
指示が曖昧だと、AIは「どこまでが外枠で、どこからが中身か」分からなくなってしまいます。

Gemini、配布用のコードをAIに頼むとき、コピーボタンまで含めて一気に出力させようとすると、たまに中身がぐちゃぐちゃになっちゃうよね。あれ、どうしてなの？

鋭いですね！それは、AIが「見せるためのコード」と「動くためのコード」を混同しちゃうからなんです。だから、指示の段階で「崩れ防止ルール」をビシッと決めておくのが一番の近道。そうすれば、複雑な入れ子構造も上手に書き分けてくれるんですよ🌿

📋 そのまま使えるプロンプト

以下の条件で、HTML/JSコードを作成してください。 1. 崩れ防止の必須ルール ・スマホ表示を優先し、横幅は100%またはautoにしてください。 ・長いコードや文字列が含まれる場合は、必ずCSSで「word-break: break-all;」を指定するか、スクロール可能にして、画面外へのはみ出しを厳禁してください。 2. コピペ機能の実装 ・完成したコードをワンクリックでコピーできる「コピーボタン」を設置してください。 ・コピー完了時には、alertやテキストで完了通知を出してください。 3. 作成したい内容 [ここに作りたいものを記入してください]