FRL 自由研究ラボ

はじめての道具箱 — まず知っておくこと

localhost とポート番号

— 自分の Mac の中にある「店」 —

AI に作ってもらった道具(自分用の小さなアプリ)を開くとき、「http://localhost:8001」のようなアドレスを使います。localhost はいま使っているこの Mac 自身、:8001 はその中の部屋番号です。開けないときは、まず道具が動いているかを確かめます。

この記事を読むとできること

  • 「http://localhost:8001」のようなアドレスの意味が読めるようになります
  • 道具が開けないとき、まず何を疑えばよいか分かるようになります
  • iPhone から開けない理由が分かるようになります

想定している使い方

ブラウザで開くチャット型の AI(Gemini や ChatGPT など)にコードを書いてもらい、 それを自分の Mac に保存して動かす使い方です。この記事の操作や画面の説明は、すべて Mac を前提にしています。

  1. localhost とは何か
  2. アドレスの読み方
  3. 1台の Mac に店がいくつも
  4. iPhone で開けない理由
  5. よくあるつまずき
  6. AI への伝え方
  7. 確かめ方
  8. 関連する項目

読む目安:約13分 ・ 道具箱の項目 A4(まず知っておくこと)・ 図4枚

localhost とは何か ―― なぜ知っておく必要があるのか

localhost は「いま使っているこの Mac 自身」、ポート番号は「その Mac の中の部屋番号」です。つまり http://localhost:8001 は、「この Mac の 8001 号室で開いている店に入る」という意味になります。

AI に、ブラウザで開く画面つきの道具を作ってもらうと、最後に「ブラウザで http://localhost:8001 を開いてください」と言われます。

意味が分からないままだと、開けなかったときに、アドレスのまちがいなのか、道具が止まっているのか、見当がつきません。チャットの AI は Mac の様子を見られないので、確かめて伝えるのはあなたの役目です。

✕ 店を開けないまま、アドレスを開くと ブラウザ localhost:8001 Mac の 8001 号室 店は閉まっている 「このサイトに アクセスできません」 ○ 先に店を開けてから、アドレスを開くと ブラウザ localhost:8001 Mac の 8001 号室 営業中 ターミナルで道具を起動=開店 道具の画面が出る アドレスが正しくても、店(道具)が動いていなければ入れません。「開けない」ときは、まず店が開いているかを確かめます。

図の見方:上の段は、道具を起動しないまま、ブラウザで localhost:8001 を開いた場合です。8001 号室の店は閉まっているので、「このサイトにアクセスできません」と表示されます。下の段は、先にターミナル(文字で命令を打ち込むアプリ。「アプリケーション」→「ユーティリティ」の中にあります)で道具を起動して店を開けておいた場合で、同じアドレスで道具の画面が出ます。

アドレスの読み方 ―― 3つに分けると、ふだんの Web サイトと同じ形

http://localhost:8001 は、次の3つに分けて読みます。最初の http:// は、ブラウザと店がやりとりするときの話し方の決まりです。次の localhost は行き先で、いま触っているこの Mac 自身を指します。最後の :8001 が部屋番号(ポート番号)で、Mac の中のどの店かを表します。

作った道具を開くときのアドレス http:// localhost :8001 話し方の決まり ブラウザと店の やりとりの作法 行き先 = この機械自身 ネットの向こうではなく いま触っている Mac 部屋番号(ポート番号) Mac の中の、どの店か くらべてみる:ふだんの Web サイト https:// example.com ← 行き先が「ネットの向こうの機械」になっているだけ

※ ふだんの Web サイトでは部屋番号が決まっていて省略されますが、自作の道具は番号を自分で決めるので、アドレスに出てきます。また、https:// は http:// に暗号化(途中で盗み見られないようにする仕組み)を足したもので、読み方は同じです。

127.0.0.1 という数字も出てきます。これは localhost を数字で書いたもので、http://127.0.0.1:8001 と http://localhost:8001 は同じ店を指します。

1台の Mac に、店がいくつも入っている

Mac をビル、作った道具をテナントの店だと考えてください。店ごとに部屋番号が違うので、道具がいくつあっても番号で入り分けられます。

道具が動いている状態を「店が開いている」と呼びます。このとき動いているプログラムをサーバー(来た客に画面を返すプログラム)と呼びます。道具を「起動する」とは、ターミナルで道具を動かし、店を開けることです。ターミナルを閉じるか Mac を再起動すると、店は閉まります。

1台の Mac = 1つのビル(住所は localhost) 8001 号室 動画管理の店 営業中 8005 号室 クイズの店 営業中 8050 号室 まとめ画面の店 営業中 8099 号室 空き部屋(例) 開いても「接続できません」 店が開いている= 「サーバー」というプログラムが 動いている間だけ 店が閉まる= ターミナルを閉じた・止めた Mac を再起動した 1部屋に店は1つだけ 同じ番号は2つの道具で使えない

※ 図の店の名前と番号は例です。

アドレスが正しくても、店が閉まっていれば入れません。「開けない」ときの多くは、これが原因です。また、1つの部屋に店は1つしか入れません。ほかの道具がすでに使っている番号で店を開こうとすると、「Address already in use」(その番号はもう使われています)と知らされて、開店できません。

iPhone で localhost を開いても出てこない理由

Mac で動いた道具のアドレスを iPhone でそのまま打ち込んでも、開けません。localhost は「いま触っているこの機械」なので、iPhone で打てば iPhone 自身を指し、その中には店が無いからです。

iPhone から開くには、localhost の代わりに Mac の住所を書きます。Mac の住所(IP アドレス。ネットワークの中での番地)は、画面左上のアップルメニューから「システム設定」→「Wi-Fi」と進み、つないでいるネットワークの「詳細」を押します。詳細の画面で「TCP/IP」を開き、「IPアドレス」(「IPv4アドレス」と出る場合もあります)の横の数字(192.168 や 10. などで始まります)を控えます。

✕ iPhone で localhost:8001 を開く iPhone 店は入っていない 行き先が自分自身に戻ってくる → 開けない ○ Mac の住所+部屋番号で開く(同じ Wi-Fi の中) iPhone http://(Mac の住所):8001 例: 192.168.〇.〇 のような数字 Mac の 8001 号室 「外からの客も入れる」設定が必要

※ iPhone から入るには、Mac 側の店を「外の機器の客も入れる」設定にする必要があります。変え方は AI に聞けます。

「外の機器の客も入れる」は、同じ Wi-Fi にいる全員に対して入口を開く、という意味です。家の Wi-Fi なら問題になりにくいですが、カフェのように知らない人と同じ Wi-Fi では、その人たちにも入口が見えてしまいます。外での守り方は LAB 007 にまとめています。

筆者の体験メモ

筆者もクイズの道具を iPhone で使いたくて、最初はインターネット上に公開するサービス(Netlify)に置いてみました。ところがスマホから開くとデータが読み込まれず「ずっと読み込み中」のまま止まり、自作のコードやフォルダの構成が外から見える不安もありました。そこで公開はやめ、Mac の中の店を同じ Wi-Fi から開く形に切り替えました。のちに(エージェント型コーディングに移ってから)は、自分の機器どうしだけをつなぐ専用の網を通して開く形にしています。

よくあるつまずき

起きていることから探してください。

起きていること 原因 どうするか
「このサイトにアクセスできません」のような表示が出る(文面はブラウザで少し違う) 店が閉まっている(道具が動いていない) 「確かめ方」の1番目の手順で、道具を起動し直します
起動すると「Address already in use」と出て止まる その部屋番号を、ほかの道具がもう使っている 先にいる道具を止める(起動したターミナルで control キーと C を同時に押す)か、まだ使っていない番号に変えてもらいます
ターミナルを閉じたら、開けなくなった 店はターミナルの中で動いていた。閉じると閉店する 使う間はターミナルを開けたままにします。毎回の起動が面倒なら、自動で起動する方法を AI に相談します
iPhone で同じアドレスを開いても出てこない iPhone で打った localhost は iPhone 自身を指す 同じ Wi-Fi につないだ iPhone から、Mac の住所+部屋番号で開きます
直してもらったのに、画面が前のまま 道具が古い中身のまま動いている、またはブラウザが前の画面の控え(キャッシュ)を出している 道具を起動し直してから、ブラウザで再読み込みします(command キーと R を同時に押します。変わらなければ、shift キーを押しながらブラウザの再読み込みボタン(丸い矢印)を押します)

筆者の体験メモ

直してもらったはずの画面で、すでに付けていた機能(暗い配色や小窓での再生)が消え、古い見た目に戻ってしまったことがありました。原因は AI が書いたコードの書き損じでしたが、ブラウザが前の控え(キャッシュ)を出していたせいで、「前の版に戻った」ように見えていました。

AI への伝え方

※ この道具箱は対話型コーディング(ブラウザの画面でチャットの AI と文章をやりとりして、コードを書いてもらうやり方)の前提です。 チャットの AI はあなたの Mac を見られないので、頼むのは「コードを書いて」、困ったら出た文字を貼って伝えます。 専門用語は覚えなくても、この記事の「店」「部屋番号」のままで伝わります。 下の文は写すためのものではなく、言い方の見本です。

新しく道具を作ってもらうとき

「ブラウザで開ける道具のコードを書いて。部屋番号(ポート番号)は、ほかの道具とぶつからない番号にして。保存する場所と動かし方、開くときのアドレス、止め方・起動のし直し方も順番に教えて」

開けないとき

「http://localhost:8001 を開いたら『このサイトにアクセスできません』と出た。ターミナルにはこう出ている(貼る)。店が開いていない(道具が動いていない)のか、ほかの原因か、確かめ方と直し方を順番に教えて」

iPhone からも使いたいとき

「同じ Wi-Fi の iPhone から、この道具を開きたい。家の Wi-Fi の中だけで見られればよく、インターネットには出したくない。コードと設定の変え方を教えて。危ないところがあれば先に教えて」

※ 3つ目のように「どこまで開きたいか」を添えると、AI が広く開けすぎる作りを選びにくくなります。

確かめ方 ―― 店を開けて、閉めて、見くらべる

店を開けたときと閉めたときの、ブラウザの表示を見くらべます。

  1. 1

    道具を起動します。作ってもらったときに AI が教えてくれた起動の文を、ターミナルに貼って Enter キーを押します(教えてもらっていなければ、AI に「起動のしかたを教えて」と頼みます)。すると、ターミナルに Running on http://127.0.0.1:8001 のような1行が出ます。これが「開店しました」の合図です。

  2. 2

    そのアドレスをブラウザで開き、道具の画面が出ることを確かめます。

  3. 3

    起動したターミナルで control キーと C を同時に押して道具を止め(店を閉めます)、同じアドレスを開き直します。「アクセスできません」に変われば成功です。店を閉めると入れなくなることを見ておくと、あとで開けなくなったときに、まず「店は開いているか」から疑えるようになります。