サーバーを動かす
あなたのサーバーに命を吹き込む
⏱ 想定 ~7 分
01 · 読む
サーバーのコードはできましたが、今はまだコンピュータ上に転がっているファイルにすぎません。まだ何かをしているわけではありません。
node app.js を実行すると、魔法のようなことが起こります。あなたのコンピュータが普通のマシンから ウェブサーバー に変わります。お店が開店してお客さんを待つように、リクエストを待ち受け始めます。
待ち受けるアドレスは localhost — 文字どおり「このコンピュータ」という意味です。インターネット全体に公開しているのではなく、あなたに対してだけ提供しています。ここで、今、です。
💡 想像してみてくださいサーバーを起動するのは、店先の「営業中」の札を裏返すようなものです。お店はずっとそこにありますが、今やお客さんを迎える準備が整いました。あなたのコンピュータもずっとそこにありますが、今やウェブリクエストに応えられる状態になりました。
ポイントまとめ
- node app.js でサーバーが起動し、動き続けます
- ターミナルが「固まった」ように見えても正常です — サーバーが待ち受けています
- localhost は、サーバーとして動いている自分のコンピュータを指します
02 · 実機演習
Node で app.js を実行してサーバーを起動しましょう。プロジェクトディレクトリ(app.js と package.json があるフォルダ)にいることを確認してください。
node app.js
03 · 空欄補充
サーバーが動いていてターミナルが「固まって」見えるとき、それはサーバーがリクエストを ___ していることを意味します。
04 · 実機演習
サーバーが動き始めました！ブラウザ(Chrome、Safari、Firefox — どれでも OK)を開き、アドレスバーに打ち込みましょう。http://localhost:3000 ブラウザに「Hello, World！」のメッセージが表示されるはずです。そのテキストはあなたのサーバーから来たものです — あなたのコンピュータがブラウザのリクエストを受け取り、レスポンスを送り返したのです。
http://localhost:3000
05 · 読む
あなたはたった今、本物のウェブサーバーを建てました。
ブラウザで localhost:3000 を打つと、舞台裏ではこんなことが起きます。
1. ブラウザがあなたのコンピュータのポート 3000 に HTTP GET リクエスト を送ります 2. あなたの Express サーバーがリクエストを受け取ります 3. app.get('/') のハンドラが URL にマッチします 4. サーバーが「Hello, World！」というテキストを返します 5. ブラウザがそれを表示します
ウェブ上のすべてのウェブサイトはこの仕組みで動いています。違いは唯一？それらのサーバーはあなたのノート PC ではなく、データセンターの巨大なコンピュータで動いているということ。でも仕組みはまったく同じです。
ポイントまとめ
- ブラウザがクライアント、あなたの Node.js アプリがサーバーです
- これがすべてのウェブサイトを支えるリクエスト-レスポンスのサイクルです
- ターミナルに戻ってみましょう — サーバーはまだ動いていて、次のリクエストを待っています
06 · クイズ
ブラウザで http://localhost:3000 にアクセスすると、舞台裏で何が起こりますか？
- ブラウザが app.js をダウンロードしてローカルで実行する
- ブラウザがあなたのコンピュータに HTTP リクエストを送り、サーバーがレスポンスを返す
- Express がインターネットに接続してページを取得する
- Node.js が自動で新しいブラウザウィンドウを開く
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。