AIに「サイト作って」と頼めば、それらしい画面はすぐできます。ここで扱いたいのは、任せること自体の是非ではなく、任せた結果を自分の言葉で見極められるかどうかという話です。

【よくあるつまずき】
「さっき直したはずなのに、また同じエラーが出る」「ある画面では直ったのに、別の画面ではまだ直っていない」。こういう場面に何度もハマる人がいます。

原因の多くは、今直しているコードが「サーバー側で動くもの」なのか「ブラウザ側（クライアント側）で動くもの」なのかを意識しないまま直しているからです。

【なぜ気づきにくいか】
見た目上は、同じような拡張子のファイルが並んでいるだけです。エラーメッセージも「動きません」としか言わないことが多く、どちら側の話をしているのか教えてくれません。

この区別を持たないまま直していると、こういうことが起きます。

  • 開発者ツールで見ると正しく動いているように見えるのに、実際の画面には反映されない
  • 同じような処理を書いたつもりなのに、片方は動いて片方は動かない
  • AIに「直して」と頼むたびに、違う場所を触るよう提案されて、直った気がしないまま時間が過ぎる

これは技術力の問題というより、「今どちら側の話をしているか」という前提を持たずに会話しているために起きるすれ違いです。

【じゃあ何を知っておけばいいか】
覚えることは、実はそれほど多くありません。

Webアプリのコードには、大きく分けて「ページが表示されるたびに、まずサーバー側で処理される部分」と「ユーザーのブラウザの中で、その都度動く部分」の2種類があります。ボタンを押した瞬間の動きや、画面の中で値が変わる処理はブラウザ側、データベースから情報を取ってくる処理や、外部に公開したくない情報を扱う処理はサーバー側、というのが大まかな役割分担です。

直す前に「これはサーバー側の話か、ブラウザ側の話か」を1つだけ自問する。それだけで、AIへの聞き方を絞れますし、原因を探す範囲も体感でかなり絞り込めます。

なお、実際にどこにその境界の印を付けるか、印を付けた場所をまたいで値を渡すとどうなるかという実装の具体的な話は、別の記事でコード例つきで扱っています。ここで伝えたいのは実装の手順ではなく、「この区別を知らないまま進むと、直したはずなのに直っていないという状態に何度も戻ってきてしまう」という、知らないままでいることの怖さの方です。

作る力の前に、まず「今どちら側を触っているか」を見分ける目。これも、AIと一緒に開発を進める上で欠かせない前提知識のひとつです。

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

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

プログラミングの知識だけでなく、AIへの指示の出し方や、AIが出してきたコードを自分の言葉で確認する目も、教材を進める中で自然に身についていきます。

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