はじめての道具箱 — まず知っておくこと
— 自分の Mac の中にある「店」 —
AI に作ってもらった道具を開くとき、「http://localhost:5001」のようなアドレスを使います。この記事では、このアドレスが何を指しているのかと、開けないときにまず何を確かめればよいかを、はじめての人向けに説明します。
この記事を読むとできること
想定している使い方
ブラウザで開くチャット型の AI(Gemini や ChatGPT など)にコードを書いてもらい、 それを自分の Mac に保存して動かす使い方です。この記事の操作や画面の説明は、すべて Mac を前提にしています。
読む目安:約13分 ・ 道具箱の項目 A4(まず知っておくこと)・ 図4枚
localhost は「いま使っているこの Mac 自身」、ポート番号は「その Mac の中の部屋番号」です。つまり http://localhost:5001 は、「この Mac の 5001 号室で開いている店に入る」という意味になります。
AI に、ブラウザで開く画面つきの道具を作ってもらうと、最後に「ブラウザで http://localhost:5001 を開いてください」のように言われます。
意味が分からないままだと、開けなかったときに、アドレスがまちがっているのか、道具が止まっているのか、見当がつきません。チャットの AI はあなたの Mac の様子を見られないので、どこがおかしいかを確かめて伝えるのはあなたの役目です。localhost とポート番号を知っておくと、まず何を確かめればよいかが分かるようになります。
図の見方:上の段は、道具を起動しないまま、ブラウザで localhost:5001 を開いた場合です。5001 号室の店は閉まっているので、「このサイトにアクセスできません」と表示されます。下の段は、先にターミナル(文字で命令を打ち込むアプリ)で道具を起動して店を開けておいた場合で、同じアドレスで道具の画面が出ます。
http://localhost:5001 は、次の3つに分けて読みます。最初の http:// は、ブラウザと店がやりとりするときの話し方の決まりです。次の localhost は行き先で、インターネットの向こうの機械ではなく、いま触っているこの Mac 自身を指します。最後の :5001 が部屋番号(ポート番号)で、Mac の中のどの店かを表します。
※ ふだんの Web サイトにも部屋番号はありますが、決まった番号なので省略されています。自分で作った道具は番号を自分で決めるので、アドレスに出てきます。
ときどき 127.0.0.1 という数字も出てきます。これは localhost を数字で書いたもので、意味は同じ「この Mac 自身」です。http://127.0.0.1:5001 と http://localhost:5001 は、同じ店を指しています。
Mac をビル、作った道具をテナントの店だと考えてください。店ごとに部屋番号が違うので、同じ Mac の中に道具がいくつあっても、番号で入り分けられます。
店を開けている係のプログラムをサーバーと呼びます。道具を「起動する」とは、ターミナル(文字で命令を打ち込むためのアプリ。「アプリケーション」→「ユーティリティ」の中にあります)でこの係を働かせ、店を開けることです。ターミナルを閉じたり、Mac を再起動したりすると、店は閉まります。
※ 図の店の名前と番号は例です。
ここから分かることが2つあります。1つ目は、アドレスが正しくても、店が閉まっていれば入れないことです。「開けない」ときの多くは、アドレスではなく店が閉まっていることが原因です。
2つ目は、1つの部屋に店は1つしか入れないことです。ほかの道具がすでに使っている番号で店を開こうとすると、後から来た方が「Address already in use」(その番号はもう使われています)という知らせを出して、開店できません。
Mac で動いた道具を iPhone からも使いたくなって、同じアドレスを iPhone で打ち込むと、開けません。理由は、localhost が「いま触っているこの機械」という意味だからです。iPhone で打てば、その意味は「この iPhone 自身」に変わり、iPhone の中には店が無いので開けないのです。
iPhone から開くには、localhost の代わりに Mac の住所を書きます。Mac の住所(IP アドレス。ネットワークの中での番地)は、画面左上のアップルメニューから「システム設定」→「Wi-Fi」と進み、つないでいるネットワークの「詳細」を押し、「TCP/IP」の欄で見られます。
※ iPhone から入れるようにするには、Mac 側の店を「外の機器の客も入れる」設定にする必要があります。設定の変え方は、AI に聞けば教えてくれます(このあとの「AI への伝え方」を参照)。
「外の機器の客も入れる」は、同じ Wi-Fi にいる全員に対して入口を開く、という意味です。家の Wi-Fi なら問題になりにくいですが、カフェのように知らない人と同じ Wi-Fi では、見知らぬ人にも店の入口が見えてしまいます。外に持ち出すときの守り方は LAB 007 にまとめています。
筆者の体験メモ
筆者もクイズの道具を iPhone で使いたくて、最初はインターネット上に公開するサービス(Netlify)に置いてみました。ところがスマホから開くとデータが読み込まれず「ずっと読み込み中」のまま止まり、自作のコードやフォルダの構成が外から見える不安もありました。そこで公開はやめ、Mac の中の店を同じ Wi-Fi から開く形に切り替えました。のちに(エージェント型コーディングに移ってから)、いまは Tailscale(自分の機器どうしだけをつなぐ専用の網)を通して開いています。店は「この Mac 自身(127.0.0.1)」の客しか入れない設定のままで、外の機器からの客は Tailscale が取り次ぐので、同じ Wi-Fi にいる知らない人には入口そのものが見えません。
起きていることから探してください。
| 起きていること | 原因 | どうするか |
|---|---|---|
| 「このサイトにアクセスできません」のような表示が出る(文面はブラウザで少し違う) | 店が閉まっている(サーバーが動いていない) | ターミナルで道具を起動し直します。起動のしかたが分からなければ AI に聞きます |
| 起動すると「Address already in use」と出て止まる | その部屋番号を、ほかの道具がもう使っている | 先にいる道具を止めるか、まだ使っていない番号に変えてもらいます |
| ターミナルを閉じたら、開けなくなった | 店はターミナルの中で動いていた。閉じると閉店する | 使う間はターミナルを開けたままにします。毎回の起動が面倒なら、自動で起動させる方法を AI に相談します |
| iPhone で同じアドレスを開いても出てこない | iPhone で打った localhost は iPhone 自身を指す | Mac の住所+部屋番号で開きます |
| 直してもらったのに、画面が前のまま | 店が古い中身のまま営業している、またはブラウザが前の画面の控え(キャッシュ)を出している | 道具を起動し直してから、ブラウザで再読み込みします |
筆者の体験メモ
直してもらったはずの画面で、すでに付けていた機能(暗い配色や小窓での再生)が消え、古い見た目に戻ってしまったことがありました。原因は AI が書いたコードの書き損じでしたが、ブラウザが前の控え(キャッシュ)を出していたせいで、「前の版に戻った」ように見えていました。
※ この道具箱は対話型コーディング(ブラウザの画面でチャットの AI と文章をやりとりして、コードを書いてもらうやり方)の前提です。 チャットの AI はあなたの Mac を見られないので、頼むのは「コードを書いて」、困ったら出た文字を貼って伝えます。 専門用語を覚えて使う必要はありません。この記事で使った「店」「部屋番号」のままでも伝わります。 下の文は、そのまま写すためのものではなく、言い方の見本です。
新しく道具を作ってもらうとき
「ブラウザで開ける道具のコードを書いて。部屋番号(ポート番号)は、ほかの道具とぶつからない番号にして。保存する場所と動かし方、開くときのアドレス、止め方・起動のし直し方も順番に教えて」
開けないとき
「http://localhost:5001 を開いたら『このサイトにアクセスできません』と出た。ターミナルにはこう出ている(貼る)。店(サーバー)が動いていないのか、ほかの原因か、確かめ方と直し方を順番に教えて」
iPhone からも使いたいとき
「同じ Wi-Fi の iPhone から、この道具を開きたい。家の Wi-Fi の中だけで見られればよく、インターネットには出したくない。コードと設定の変え方を教えて。危ないところがあれば先に教えて」
※ 3つ目の最後の一文のように、「どこまで開きたいか」「何は避けたいか」を添えると、AI が必要以上に広く開ける作りを選びにくくなります。
localhost の意味が分かったかは、店を開けたときと閉めたときで、ブラウザの表示がどう変わるかを見れば確かめられます。
道具を起動すると、ターミナルに Running on http://127.0.0.1:5001 のような1行が出ます。これが「開店しました」の合図です(文面は道具の作り方によって少し違います)。
ブラウザでそのアドレスを開くと、道具の画面が出ることを確かめます。
わざと道具を止めてから、同じアドレスを開き直します。「アクセスできません」に変われば成功です。店を閉めると入れなくなることを自分の目で見ておくと、あとで開けなくなったときに、まず「店は開いているか」から疑えるようになります。