【Express.js】Expressで最小構成のサーバーを立てる(npm init〜起動まで)

Expressjs

こんにちは、かつコーチです。

Node.jsの基本を学んだら、次に気になるのが「実際にサーバーを作ってみたい」ということではないでしょうか。

この記事では、Node.jsのフレームワークであるExpressを使って、最小構成のサーバーを立てる手順を、npm initから起動までひと通り解説します。

コピー&ペーストで動かせる完全なコードを載せているので、手を動かしながら読んでみてください。

Expressとは?

Expressとは、Node.js上でWebサーバーを簡単に作れるようにするフレームワークです。

フレームワークとは、よく使う機能があらかじめ用意された、開発の土台となるプログラム一式のことです。

Node.js単体でもサーバーは作れますが、ルーティングやリクエストの処理を自分ですべて書くのは大変です。

Expressを使えば、そうした面倒な処理を数行のコードで済ませられます。

実装手順

手順1:プロジェクトフォルダを作成する

まずはターミナルで、プロジェクト用のフォルダを作成します。

mkdir my-express-app
cd my-express-app

手順2:npm initでpackage.jsonを作成する

作成したフォルダの中で、package.jsonを初期化します。

npm init -y

手順3:Expressをインストールする

続いて、npmを使ってExpressをインストールします。

npm install express

インストールが完了すると、package.jsonのdependenciesにExpressが追加されます。

手順4:最小構成のサーバーを書く

プロジェクト直下にindex.jsというファイルを作成し、以下のコードを書きます。

// index.js
const express = require("express");
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`サーバーが起動しました: http://localhost:${port}`);
});

express()でアプリケーションを作成し、app.get()でトップページへのアクセスに対する処理を定義しています。

app.listen()は、指定したポート番号でサーバーを起動する命令です。

手順5:サーバーを起動して動作確認する

ターミナルで以下のコマンドを実行し、サーバーを起動します。

node index.js

「サーバーが起動しました: http://localhost:3000」と表示されれば成功です。

ブラウザでhttp://localhost:3000にアクセスすると、「Hello, Express!」という文字が表示されます。

よくあるつまずきポイント・エラー対処

ポートがすでに使われているエラー

私が実際に経験したのは、サーバーを起動しようとしたときに出た、以下のエラーです。

❌ Before

$ node index.js
Error: listen EADDRINUSE: address already in use :::3000

原因は、前回起動したサーバーをCtrl + Cで止めたつもりが、実は別のターミナルタブで動いたままだったことでした。

✅ After

# 動いているプロセスを確認して終了させる
$ lsof -i :3000
$ kill -9 <表示されたPID>

# 再度起動
$ node index.js
サーバーが起動しました: http://localhost:3000

lsof -i :3000でポートを使っているプロセスを確認し、killコマンドで終了させることで解決しました。

同じポート番号でサーバーが二重起動していないか、エラーが出たらまず疑ってみてください。

まとめ

この記事のポイント

  • ExpressはNode.js上でWebサーバーを簡単に作れるフレームワークである
  • npm install expressでインストールできる
  • app.get()でルーティング、app.listen()でサーバー起動を定義する
  • ポート番号の衝突エラーは、既存プロセスの終了で解決できる

次に読むべき記事

最小構成のサーバーが動いたら、次はルーティングをさらに詳しく学びましょう。

「Expressのルーティングの基本(GET/POST/パラメータ)」で、GET・POSTの使い分けやパラメータの取得方法を解説しています。

タグ: #Express #初心者向け #環境構築

タイトルとURLをコピーしました