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

【よくあるつまずき】
自分のパソコンで動かしているときは何の問題もなかったのに、公開した瞬間にエラーになる。ログインできない、外部のサービスに繋がらない、画面が真っ白になる。こういう場面に出会ったことがある人は多いはずです。

原因の多くは「環境変数」の設定漏れです。

【なぜ気づきにくいか】
自分のパソコンで開発しているときは、手元に置いた設定ファイルがそのまま読み込まれます。パスワードやAPIキーのような、公開してはいけない値もこのファイルに書いてあることが多く、普段は特に意識せず動いています。

ところが、この設定ファイルは公開先のサーバーには自動でついていきません。多くの場合、この設定ファイルは公開用のファイル一式（Gitで管理している範囲）からあらかじめ除外されています。パスワードやAPIキーのような値をそのまま公開してしまわないための、開発者側の慣習です。公開先のサービスの多くは、その公開用ファイル一式をそのままビルド・公開する仕組みなので、除外されている設定ファイルはそもそも届いていません。結果、公開先のサービスの管理画面に同じ値を別途登録しておかないと、そこだけ値が空のまま動くことになります。

この区別を知らないまま進めていると、こういうことが起きます。

  • 自分のパソコンでは問題なく動くのに、公開したページだけ真っ白になる
  • エラーメッセージが「〇〇が見つかりません」としか言わず、原因が設定ファイルにあると気づけない
  • AIに「直して」と頼んでも、コードそのものは正しいので、直しようがない場所を何度も触ることになる

これは技術力の問題というより、「手元の設定」と「公開先の設定」が別物だと知らないために起きるすれ違いです。

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

自分のパソコンにある設定ファイルの中身を、公開先のサービスの管理画面（環境変数を登録する設定欄）にも同じように登録しておく。これだけです。値の中身自体は手元にあるものと同じなので、コピーして貼るだけで済みます。

公開してエラーになったら、まず「これはコードの問題か、設定ファイルの問題か」を1つ自問する。それだけで、AIへの聞き方も絞れますし、原因を探す範囲も体感でかなり絞り込めます。

なお、設定ファイルの具体的な書き方や、値の種類ごとの扱い方（公開してよい値とそうでない値の見分け方など）は、別の記事で扱っています。ここで伝えたいのは書き方の手順ではなく、「手元と公開先は別物だと知らないまま進むと、コードは合っているのに動かない、という状態に何度も戻ってきてしまう」という、知らないままでいることの怖さの方です。

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

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

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

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

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