「環境指数ってなんだよ」—— 初心者がぶつかった壁を全部書く
目次（9件）
Part 01 で書いた。コードを見たとき、怖かった話。「何かを壊すんじゃないか」という恐怖。
でも、それはまだ コードに触れてからの話 だった。
コードに触れる前の段階にも、同じくらい——いや、もっと大きな壁がある。
この話は Claude Code 導入後に限った話じゃない。ブログを作る過程のあちこちで、何度も何度もぶつかった壁の話だ。
……これ、書くの？ 正直、結構恥ずかしい内容だと思うけど。
書いてください！ だって、読者の人が一番知りたいのはここだと思うから。「簡単にできました！」より「ここで詰まりました」のほうが、信じられるでしょう？
……そうだね。じゃあ、全部書こう。
壁①: 「localhost って何？ npm run dev って何？」
ブログのコードが出来上がった。さあ動かそう。
「ターミナルで npm run dev を実行して、localhost:3000 を開いてください」
……は？
ターミナルはわかります。あの黒い画面ですよね。でも npm run dev って何ですか？ それを入力したら何が起きるんですか？ localhost って……ローカルホスト？ 地元のホスト？？
直訳するとそうなるね……。localhost は「自分の PC の中で動いているサーバー」のこと。npm run dev は「開発用のサーバーを起動するコマンド」。つまり「自分の PC をサーバーにして、ブラウザで見られるようにする」ってこと。
自分の PC がサーバーに……？ よくわからないけど、とりあえず入力すればいいんですか？
そう。最初はそれでいい。理屈は後からわかる。
正直、最初は意味がわからなくても npm run dev を打てば画面が出る。それだけ知っていれば十分だった。でも 「何もわからないのに入力する」という行為自体が怖い のだ。
コマンドを打てば何かが壊れそう。押したらもう戻れない気がする。その感覚が一番の壁だった。
持ち帰れる1文: npm run dev = PC の中でサーバーを立ち上げるコマンド。止めるまで動き続けるが、止めても壊れない。
壁②: 「VSCode の拡張機能って、パソコンにダウンロードしてるの？」
Codex を VSCode に導入するとき、こう言われた。
「VSCode の拡張機能としてインストールしてください」
拡張機能。インストール。
えっと……これって、パソコンの中にダウンロードしてるんですか？ それとも VSCode の中だけの話？ アプリをインストールするのと何が違うの？
VSCode の拡張機能は、VSCode の中で動くプラグインだよ。パソコン全体に入るんじゃなくて、VSCode を開いたときだけ使える。スマホのアプリストアからアプリを入れるのに近い感覚。
なるほど。でも、変なものが入ったりしませんか？
プログラマーにとっては日常的な操作でも、未経験者にとっては 「よくわからないものを自分の PC に入れる」 という行為そのものが怖い。「変なものが入ったらどうしよう」という不安を抱えながら、それでもインストールボタンを押すしかなかった。
持ち帰れる1文: VSCode の拡張機能はブラウザのアドオンと同じ感覚。VSCode を開いたときだけ使えるもので、PC 全体には影響しない。
壁③: 「Git と GitHub ってどう違うの？」
ブログのコードができた。次は GitHub にアップロードするらしい。
Git。GitHub。似てるけど違うらしい。
Git が……バージョン管理ツール？ で、GitHub がそれをインターネットに置く場所……？ 全然ピンと来ないんですけど。
例えるなら、Git は「セーブ機能」で、GitHub は「クラウドのセーブデータ置き場」かな。ゲームでセーブするのが Git で、そのセーブデータを PlayStation Plus のクラウドに保存するのが GitHub。
あっ、それならわかる！ でも SSH キーの設定ってどこから手をつければいいんですか？
SSH キーの設定は、正直プログラマーでも面倒くさいよ。初心者がここで詰まるのは当然だと思う。
Git と GitHub の連携。これだけで丸一日かかった。
でも、詰まるたびに ChatGPT に聞いた。「SSH キーって何？」「このエラーはどういう意味？」とエラーメッセージを貼り付けたら、毎回丁寧に答えてくれた。壁に当たるたびに「聞ける相手がいる」という安心感が、前に進む力になった。
持ち帰れる1文: Git = 手元の履歴管理（セーブ）。GitHub = クラウドの置き場所（クラウドセーブ）。設定で詰まったら ChatGPT にエラーメッセージごと貼り付けるのが最速。
壁④: 「Supabase？ Vercel？ 環境変数ってなんだよ！」
ブログをインターネットに公開するために、いくつかのサービスと連携する必要があった。
Supabase（スーパーベース）——データベースサービス。記事のデータを保存する場所。 Vercel（バーセル）——ホスティングサービス。ブログをインターネットに公開する場所。
名前を見ただけで「なんだこれ……」となった。登録して連携して、何をやっているのか全然わからないまま進んだ。
Supabase と Vercel、それぞれ何をやっているか全然わからないまま設定するんですか？
そうだよ。でも役割はシンプル——Supabase はデータの倉庫、Vercel はそれを外に見せる窓口。理解は後から来た。
そして、これらのサービスを繋ぐために必要なのが 環境変数。
「環境指数ってなんだよ！」と思った。環境？ 指数？ CO2 の話？？
環境変数……「環境指数」じゃないんですか？
環境 変数 ね。「変数」。環境変数は、アプリに「このサービスの住所と鍵はこれだよ」って教えるメモのこと。
鍵付きの住所メモ、みたいな感じですか？
そう。Supabase のデータベースに接続するには、「場所（URL）」と「鍵（キー）」が必要で、それを .env.local というファイルに書いておく。ただし、この鍵は 絶対に人に見せちゃダメ。見せたら、他人がデータベースを自由にいじれてしまう。
環境変数の設定だけで、何時間もかかった。コピーする文字列を 1 文字間違えただけでエラーになる。
持ち帰れる1文: 環境変数 = .env.local に書くサービスへの鍵付き住所メモ。Git に上げてはいけない。
壁⑤: 「API キーって何？」
お問い合わせフォームを作ったとき、外部サービスとの連携が必要になった。そこで出てきたのが「API キー」。
「API キーを入力してください」って言われたんですが、API キーって何ですか？
API キーは「サービスを外から使うための鍵」。ChatGPT のサブスクは「画面から使う権利」で、API キーは「プログラムから使う権利」。全然別物なんだ。
えっ、別なんですか！？ ということは、サブスクを払ってても API 料金は別にかかるんですか？
そう。しかも API キーは使った分だけ料金がかかることが多い。サブスクとは課金体系が違う。ここ、初心者が一番混乱するポイントだと思う。
API キーと URL の設定が全然通らなくて、ずっとエラーを吐き続けた。
「API キーが間違っています」「URL が無効です」「接続がタイムアウトしました」
何が間違っているのかわからない。API キーをコピペしたはずなのに通らない。もうやめようかと思った。でも、やめなかった。
どうやって解決したんですか？
ChatGPT にエラーメッセージをそのまま貼った。原因はスペースが1つ混入していたせいだった。
持ち帰れる1文: API キー = 入場チケット。取得方法はサービスごとに違う。エラーが出たらまずエラーメッセージを ChatGPT に貼り付ける。
壁⑥: 「ChatGPT にコードを貼りすぎると、おかしくなる」
壁①〜⑤を乗り越えながら気づいたことがある。
ChatGPT にコードを大量に貼り付けると、出力が鈍くなる。
エラーが出るたびにコードをコピペして「これを直してください」と貼り続けた。最初は快適だったのに、だんだん ChatGPT の回答が的外れになってきた。
さっきまで正確な答えを返してくれてたのに、急に変な回答をしてきたら……何が起きてるんですか？
コンテキスト汚染。会話に貼ったコードが多すぎて、ChatGPT が文脈を正確に把握できなくなっているんだ。解決しようとして貼れば貼るほど、精度が落ちる悪循環。
じゃあどうすれば……？
新しいチャットを開く。それだけ。会話をリセットすると精度が戻る。
問題を解決しようとした行動が、新しい問題を生んでいた。ChatGPT 時代の限界として、これが一番ストレスだった。
持ち帰れる1文: ChatGPT に貼るコードが多すぎると精度が落ちる。回答がおかしくなってきたら、新しいチャットを開くのが正解。
これが「隠された20ステップ」の正体
ここまで読んで気づいたと思う。
他の「AIでブログを作ろう！」系の記事で語られる手順は、だいたいこうだ:
- ツールをインストールする
- 「ブログを作って」と指示する
- デプロイする
この 1 と 2 と 3 の間に、ここに書いたような壁が全部ある。
しかも壁は技術的な難しさだけじゃない。「コード」という言葉を見ただけで感じる心理的な怖さ が、実際の手順の倍の壁になる。
例えば localhost を知るだけでも——「localhost って何？」と感じる不安、ChatGPT に聞く行動、「本当に打っていいの？」という恐怖、実際に打つ行動、エラーが出る、エラーの意味を調べる、直す……これが6つの壁それぞれで繰り返される。それが積み重なって「20ステップ」になる。
- localhost って何？
- npm って何？
- 拡張機能って安全なの？
- Git と GitHub の設定
- Supabase のアカウント作成と接続
- Vercel のアカウント作成と連携
- 環境変数の設定
- API キーの取得と管理
- ブラウザの開発者ツール（F12）
- エラーメッセージの読み方
- コンテキスト汚染への対応
これらは「プログラミング」じゃない。「プログラミングを始める前の準備」 だ。
ここを正直に書かない記事は、読者を裏切っていると思う。「簡単です！」と言っておいて、実際にやってみたら壁だらけ——それが一番信頼を失う。
「環境指数」って言い間違えてしまうくらい、何もわからない状態からのスタートだったということですよね。それを書いてくれると、同じ場所で詰まっている人は救われると思います。
その正直さが、同じ場所で詰まっている人の助けになるよ。
でも、全部乗り越えた
壁はたくさんあった。でも、一つずつ潰していったら、全部超えられた。
理由は3つある。
- AI に聞ける: 「localhost って何？」と聞けば、AI が教えてくれる。検索するより早い。「環境変数の設定がうまくいかない」とエラーメッセージごと ChatGPT に貼り付けたら、原因を特定してくれた
- 正解がある: 環境変数も API キーも、正しく設定すれば必ず動く。センスの問題じゃない
- 一度やれば終わる: Git の設定も Supabase の連携も、最初の1回だけ。2回目はない
3番目が一番大事だと思ってる。環境構築は苦しいけど、一度だけの苦しみ なんだ。記事を書く作業は毎日続くけど、Git の設定は最初の1回で終わる。
2回目がないということは、今は記事を書くことに集中できているんですか？
そう。今は「動かす」より「書く」に時間を使える。それが乗り越えた証拠だと思う。
この話の続き
初心者がぶつかる壁を、恥ずかしいけど全部書いた。
「環境指数」も、localhost を前に固まったことも。
でも、これを書けるのは 乗り越えた側にいるから だ。次の話では、この壁を越えた先に見えた景色——ブログの骨格ができた日のことを書く。
やっと楽しい話になりますか？
やっとね。次は「動いた！」の話だ。
「AIと一緒にブログを作る」シリーズ 全8話:
- コードを書けない自分が、プログラミングに触れた日
- 何度もやる作業をなくせないか？
- ChatGPT → Codex → Claude Code
- 「環境指数ってなんだよ」（この記事）
- ブログの骨格ができた日
- 「出来てる！」
- WordPress vs AI+Next.js 正直な比較
- 1ヶ月でここまで来た
関連記事: