HTML を返す
サーバーから本物のウェブページを返す
⏱ 想定 ~10 分
01 · 読む
ここまで、あなたのサーバーはプレーンテキストと JSON を返していました。しかし本物のウェブサイトにアクセスすると、見るのはスタイル付きのページです — 見出し、画像、レイアウトつき。生のテキストではありません。
それは、本物のウェブサーバーが HTML ファイル を返しているからです。HTML はブラウザが理解し、リッチに整形された内容を表示するために使う言語です。
HTML を JavaScript コードの中に書き込む(すぐに散らかります)代わりに、HTML ファイルを専用のフォルダに置き、Express に自動で返してもらうようにします。これは 静的ファイルを提供する と呼ばれます — リクエストによって変わらないファイルを、そのまま送り出すという意味です。
ポイントまとめ
- 静的ファイルは加工せずにそのまま返されます
- public/ フォルダはブラウザからアクセスできるファイルを置く慣習です
- Express なら 1 行のコードで静的ファイルのフォルダ全体を返せます
- 本物のウェブサイトもこの方法で CSS、画像、HTML ページを提供しています
02 · 実機演習
まずプロジェクトフォルダの中に public ディレクトリを作りましょう。静的ファイル(HTML、CSS、画像)はここに住みます。
mkdir public
03 · 実機演習
public フォルダの中に index.html ファイルを作りましょう。テキストエディタで作って大丈夫です — プロジェクトディレクトリ内の public/index.html として保存してください。 これがサーバーのトップページになります。
<!DOCTYPE html>
<html>
<head>
<title>My First Server</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 50px auto; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Welcome to My Server</h1>
<p>This page is being served by Node.js and Express.</p>
<p>I built this myself.</p>
</body>
</html>04 · クイズ
なぜ HTML ファイルを JavaScript コードに書き込むのではなく public/ フォルダに置くのですか？
- JavaScript には HTML 文字列を入れられない
- 整理のため — HTML ファイルは加工不要で、そのまま返せる
- public/ フォルダは別のサーバーを使うので速い
- ブラウザは 'public' という名前のフォルダしか読めない
05 · 実機演習
次に、public フォルダの中身を提供するよう Express に伝えましょう。app.js を開き、const app = express(); の行の うしろ、すべての app.get() ルートの 前 に次の行を追加します。 この 1 行で public/ フォルダの中のすべてのファイルがサーバー経由で取得できるようになります。
app.use(express.static('public'));06 · 実機演習
サーバーを停止し(Ctrl+C)、再起動して、ブラウザで http://localhost:3000 にアクセスしましょう。 プレーンテキストの「Hello, World！」ではなく、見出しと段落のある スタイル付きの HTML ページ が見えるはずです。それがあなたの index.html が提供されている状態です！
node app.js
http://localhost:3000
07 · 空欄補充
'public' というフォルダから静的ファイルを返すには、次のミドルウェアを追加します：app.use(express._____('public'))
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。