Node.jsとExpressで作る初心者向けWebサーバー構築ガイド

目次

はじめに

概要

本ドキュメントは、Node.jsを使ってWebサーバーを作る手順を整理した入門ガイドです。基本のhttpモジュールでのサーバー作成から、Express.jsという便利な枠組みを使った実践まで、順を追って学べます。各章に具体的なコード例を載せ、実際に動かせることを重視します。

本書の目的

初心者がつまずきやすいポイントを避けつつ、最短で動くサーバーを作れるように導きます。例えば、サーバー起動、ルーティング(URLごとの処理)、静的ファイルの配信、そしてフォームの送信(POST)の受け取りなどを実例で示します。

誰向けか

プログラミングの基礎(変数や関数)が分かる方を想定します。JavaScriptに触れたことがあると読みやすいですが、初めてでも順を追えば理解できます。

本書で学べること(例)

  • Node.jsのhttpモジュールで簡単なサーバーを立てる方法
  • Express.jsでルーティングやミドルウェアを使う基本
  • 静的ファイル(画像やCSS)の提供方法
  • POSTリクエストの受け取り方と簡単な処理

読み進め方

各章は実際に手を動かせるように構成しました。コードをコピーして、手元の環境で実行してみてください。エラーが出たら、該当箇所のコメントをよく読み、順に修正していきましょう。

動作環境(簡潔)

Node.jsの推奨バージョンは公式サイトで確認してください。最小限はNode.jsが動くPCと、テキストエディタがあれば始められます。

次章からは、実際にhttpモジュールでサーバーを作る手順を解説します。

Node.jsで簡単にServerを作ってみる①

準備

まず作業フォルダを作り、npm init -yでプロジェクトを作ります。ファイル名はserver.jsとします。Node.jsが入っていればすぐ始められます。

最小のHTTPサーバー

httpモジュールを使うとシンプルにサーバーを作れます。例:

const http = require('http');
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});
server.listen(3000, () => console.log('http://localhost:3000'));

createServerで接続を受け、listenで待ち受けます。ブラウザでアクセスすれば応答を確認できます。

自動再起動(nodemon)

変更を反映する手間を減らすならnodemonを使います。インストール例:npm install -D nodemon。npx nodemon server.jsで実行すれば、編集後に自動で再起動します。

HTMLファイルを返す(fsとpipe)

fs.createReadStream(‘index.html’).pipe(res)とすると、ファイルをストリームで直接送れます。メモリ消費が小さく速いです。Content-Typeはtext/htmlに設定してください。

簡単なルーティング

req.urlを見て返すファイルを切り替えます。例:’/’ならindex.html、’/about’ならabout.html、それ以外は404ページを返す、といった実装が基本です。

【Node.js入門】Express.jsでWebサーバーを構築する

準備

Node.jsとnpmが入っている前提です。新しいフォルダを作り、ターミナルでそこに移動します。

mkdir my-express-app
cd my-express-app
npm init -y
npm install express

基本的なファイル作成

プロジェクトルートにindex.jsを作成し、以下のように記述します。

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('Hello Express!');
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

コードの説明

  • expressを読み込み、アプリを作成します。
  • app.getでルート(“/”)へのGET処理を定義します。ここでレスポンスを返します。
  • app.listenで待ち受けポートを指定し、起動時に通知します。

実行と確認

node index.js

ブラウザでhttp://localhost:3000 にアクセスすると”Hello Express!”が表示されます。

ちょっと便利な設定例

  • JSONを受け取る: app.use(express.json());
  • 静的ファイルを配信: app.use(express.static(‘public’));

以上でExpressの基本的なサーバー構築は完了です。次章ではより実践的な構成を扱います。

Node.js と Express を使ってサーバーを立ち上げてみる

導入

ExpressはNode.js上で簡単にWebサーバーを作れる軽量フレームワークです。ここではインストールから基本的なルーティング、静的ファイル提供、POSTの受信までを順に説明します。

インストールと基本セットアップ

  1. インストール:npm install express
  2. 最小構成:
const express = require('express');
const app = express();
const PORT = 3000;

appはアプリケーションの本体です。

静的ファイルの提供

publicフォルダ内のHTML/CSS/画像を配信するには次を追加します。

app.use(express.static('public'));

これでpublic/index.html/で参照できます。

POSTデータの解析

フォーム送信を受け取るにはボディパーサーを使います。

app.use(express.urlencoded({ extended: false }));
app.post('/submit', (req, res) => {
  const data = req.body; // nameやemailなど
  res.send('受け取りました');
});

ルーティング(URLパラメータ)

パスに変数を含めたい時は:paramを使います。

app.get('/user/:id', (req, res) => {
  const id = req.params.id;
  res.send(`ユーザーID: ${id}`);
});

クエリ文字列はreq.queryで取得します。

サーバー起動とログ表示

最後にポートを指定して起動します。

app.listen(PORT, () => {
  console.log(`Server running: http://localhost:${PORT}`);
});

起動時にコンソールへメッセージを出すと確認が楽になります。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次