Hello World サーバー
10 行のコードで本物のウェブサーバーを建てる
⏱ 想定 ~8 分
01 · 読む
そろそろ本物を建てる時間です — 10 行のコードのウェブサーバーです。
あなたが訪れるすべてのウェブサイトが動くのは、サーバー がリクエストを待ち受け、レスポンスを返しているからです。ブラウザで URL を打つと、ブラウザがサーバーにリクエストを送り、サーバーがウェブページを送り返します。
これから建てるのは、まさにそのサーバーです。自分のコンピュータで動き、ブラウザでアクセスできます。Netflix、Twitter、そのほか数百万のウェブアプリを支えているのと同じテクノロジーです。
ポイントまとめ
- サーバーはリクエストを待ち受け、レスポンスを返します
- Express を使うとサーバー構築がシンプルになります
- あなたのサーバーはローカルの http://localhost:3000 で動きます
02 · 実機演習
テキストエディタで app.js というファイルを作り、my-server フォルダ(Express をインストールした作業ディレクトリ)に保存しましょう。下のブロックをまるごとコピーして大丈夫です — これが完全な Express ウェブサーバーです。
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, World! This is my first server.');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});03 · 実機演習
サーバーを起動しましょう！Node でこのファイルを実行します。サーバーが動いていることを示すメッセージが見えるはずです。
node app.js
04 · クイズ
Express サーバーの listen 関数は何をしますか？
- ブラウザにレスポンスを送る
- ディスクからファイルを読む
- データベースに接続する
- サーバーを起動し、特定のポートで受信リクエストを待ち受けさせる
05 · 空欄補充
Express で app.listen(3000) はサーバーに _____ 3000 を待ち受けるよう指示します。
06 · 実機演習
ブラウザを開き、http://localhost:3000 にアクセスしましょう。ページにメッセージが表示されるはずです！ 作品を眺めたら、ターミナルに戻り Ctrl+C を押してサーバーを止めてください。
07 · クイズ
サーバーのコードから app.listen(3000, ...) の行を消してから実行すると、どうなりますか？
- ファイルは実行されてすぐ終了します — サーバーは起動しません
- サーバーがランダムなポートで待ち受けます
- Express が自動でポート 80 を選びます
- listen は必須なので、構文エラーになります
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。