「サイト作って」で出てくるものには、毎回ほぼ同じ場所に穴が空いています。前回・前々回は見た目の完成度とデータ設計の話をしましたが、今回は「部品の使い回し」です。

※ これは「AIに任せるな」という話ではありません。任せること自体は問題ありません。困るのは、似た画面が増えていくときに、AIが毎回コピペで対応しているのに気づけないことです。

よくある流れ

商品カードを1つ作ってもらう。うまくいく。次に「お知らせ一覧にも似たようなカードを」と頼む。またうまくいく。さらに「ユーザー一覧もカード表示にしたい」と頼む。ここでも一応動く。

見た目は3箇所ともきれいに揃っています。ですが中身を見ると、ほぼ同じ見た目・ほぼ同じロジックのコードが3箇所に別々に存在しています。

これの何が困るのか

穴が表に出るのは、あとから1箇所を直すときです。

「カードの角丸をもう少し小さくしたい」と頼むと、3箇所のうち1箇所しか直りません。AIは指定した画面のコードだけを見て直すので、他の2箇所は古いままです。

見た目が同じだったのは偶然ではなく、コピペで作られていたからです。そして直すときは、その3箇所を1つずつ探して、1つずつ直す羽目になります。画面が増えるほど、この「あとから全部直す」作業が重くなっていきます。

知っておくと防げること

防ぐのに必要な知識は、実はそれほど多くありません。

同じ見た目のパーツが2〜3回出てきたら、共通化を考えるタイミングだと知っておくだけで十分です。これは「コンポーネント」と呼ばれる考え方で、パーツを1箇所にまとめて、中身が変わる部分だけ（商品名、価格、画像など）を外から渡すようにします。

AIに頼むときも、この意識があるかどうかで指示が変わります。

  • 意識がない場合：「お知らせ一覧もカード表示にして」→ 新しくコードが生成されて増える
  • 意識がある場合：「さっき作ったカードのコンポーネントを、お知らせ一覧でも使う形にして」→ 1箇所を使い回す指示になる

指示を変えるだけで、AIの出力そのものが変わります。これは技術力というより、「同じものが増えてきたら共通化する」という感覚を知っているかどうかの差です。

まとめ

画面が1つのうちは、コピペでも困りません。困るのは2つ目、3つ目が増えたときです。「同じようなパーツを3回コピペしたら、そこが共通化のサイン」——これだけ覚えておけば、この穴には気づけます。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください