前回との接続——住所と部屋番号がつながる
前回のC-04では、1台の機器の中で通信相手のプログラムを分けるポート番号を学びました。今回はその続きです。C-03で学んだ機器の住所と、C-04のポート番号が、localhostという1つの仕組みの中でつながります。バイブコーディングで開発中に必ず登場するlocalhostを、通信の言葉できちんと理解しておきましょう。
このスライドのポイント
- C-04: 1台の中でプログラムを区別するポート番号を学んだ
- 今回: C-03の住所とC-04のポート番号が、localhostという1つの仕組みでつながる
- バイブコーディングで必ず登場するlocalhostを、通信の言葉で理解する
localhostとループバックの定義
まず定義です。localhostとは、「この機器自身」を指す特別な名前です。対応する住所は127.0.0.1で、これをループバックアドレスと呼びます。C-03で学んだIPアドレスの一種ですが、通信先が自分自身に固定されている点が特別です。ループバックとは、送った通信が外に出ず、自分自身へ折り返す仕組みのことです。だからネットワークの線がつながっていなくても動きます。
このスライドのポイント
- localhost＝「この機器自身」を指す特別な名前
- 対応する住所は 127.0.0.1（ループバックアドレス）
- ループバック＝送った通信が外に出ず、自分自身に折り返す仕組み
- ネットワークの線がつながっていなくても動く
なぜ知る必要があるか
これを知らないと、定番の混乱に陥ります。たとえば「localhost:3000をスマホで開いたのに見えない」という状況です。これはスマホにとってのlocalhostが、スマホ自身を指すために起きます。同じように「URLを人に送ったのに開けないと言われた」のも、そのURLが相手の機器の中を指しているからです。localhostの意味を取り違えると、原因の分からないつまずきが続いてしまいます。
このスライドのポイント
- 「localhost:3000をスマホで開いたのに見えない」→スマホにとってのlocalhostはスマホ自身
- 「URLを人に送ったのに開けないと言われた」→相手の機器の中を指している
- localhostの意味を取り違えると、原因の分からないつまずきが続く
構造——PCの中で完結する通信
構造を図で見てみましょう。あなたのPCの中で、3000番のポートで待っているアプリと、ブラウザが、ループバックを通じて直接やり取りしています。C-04で学んだポート番号の3000が、ここで住所127.0.0.1と組み合わさって宛先になっています。重要なのは、この通信が外側、つまりLANやインターネットへは一切出ていないことです。図では、その範囲を枠で囲って示しています。
このスライドのポイント
- あなたのPCの中で、3000番で待つアプリとブラウザがループバックで直接やり取り
- C-04のポート番号3000が、住所127.0.0.1と組み合わさって宛先になる
- この通信は外側（LAN・インターネット）へ一切出ない
具体例——localhostは未公開の安全な状態
具体例で考えます。開発中のアプリがlocalhostで動いているということは、それは世界のどこにも公開されていない、安全な状態にあるということです。B-06で見たローカル環境の実体がこれです。外から誰も触れないからこそ、壊しながら自由に試すことができます。逆に、作ったものを見せたい相手がいる場合は、公開の手順が別に必要になります。localhostのままでは、自分以外の誰にも届きません。
このスライドのポイント
- localhostで動く＝世界のどこにも公開されていない安全な状態（B-06のローカル環境の実体）
- 外から誰も触れないからこそ、壊しながら自由に試せる
- 見せたい相手がいるなら公開の手順（カテゴリRで扱う）が別に必要
技術サンプル——通信の経路を図で確認
技術サンプルとして、通信の経路を図で確認します。ブラウザがhttp://localhost:3000へアクセスすると、その通信は127.0.0.1、つまり自分自身へ向かい、同じPCの中で待つアプリに届きます。この通信はPCの外に一切出ません。読み方のポイントは2つです。localhostは、それぞれの機器にとっての自分自身を指すこと。そして外部からは見えない、すなわち未公開の状態だということです。AIへは「他の人に見てもらうには何が必要ですか」と聞いてみましょう。
このスライドのポイント
- 種別: diagram ／ 目的: localhostの通信がPCの外に出ないことを図で確認する
混同しやすい概念——「動いている」と「公開されている」
混同しやすいのが、「localhostで動いている」ことと「公開されている」ことの違いです。この2つはまったく別物です。自分のPCの中でアプリが動いていることと、他人がそれを見られることは、切り離して考える必要があります。動いているURLをそのまま共有しても、そのlocalhostは相手の機器自身を指すため、相手には届きません。
このスライドのポイント
- 「localhostで動いている」vs「公開されている」はまったく別物
- 自分のPCの中で動くことと、他人が見られることは切り離して考える
- 動いているURLをそのまま共有しても、そのlocalhostは相手自身を指すため届かない
バイブコーディングでの確認点
確認点です。AIが提示したURLがlocalhostなら、それはあなた専用の確認用だと理解してください。誰かに見せたい、あるいはスマホで確認したいときは、その旨をAIに伝え、公開または共有の方法を相談します。どこまで届かせるか、つまり公開範囲の判断は、A-08で見たとおり人間が持つべき仕事です。「いまlocalhostで動いていますが、共有するにはどうすればよいですか」と聞いてみましょう。
このスライドのポイント
- AIが提示したURLがlocalhostなら、それは自分専用の確認用
- 見せたい・スマホで確認したいときは、その旨をAIに伝えて公開または共有の方法を相談
- どこまで届かせるか（公開範囲）の判断はA-08で見たとおり人間の仕事
まとめと次回への橋渡し
最後に一問一答です。localhost:3000のURLを同僚に送ったら、見えるでしょうか。……答えは、見えません。localhostは各自の機器自身を指すため、相手の画面では相手自身のPCを探しにいってしまうからです。30秒でまとめます。localhostは自分自身を指す名前で、対応する住所は127.0.0.1、ループバックによって通信は外に出ません。だからlocalhostで動く＝未公開で安全、という状態です。次回は、数字の住所に人が読みやすい名前を付ける仕組み、ドメイン名へ進みます。関連資料は「Webアプリ構築 完全ワークフロー」「Vercel公開 完全手順書」です。
このスライドのポイント
- 一問一答: 「localhost:3000 のURLを同僚に送ったら見える？」
- 30秒まとめ: localhostは自分自身を指す名前、住所は127.0.0.1、ループバックで外に出ない＝未公開で安全
- 次回: 数字の住所に名前を付ける仕組み、ドメイン名へ
- 関連資料: 「Webアプリ構築 完全ワークフロー」「Vercel公開 完全手順書」
