はじめに

本記事では Express というフレームワークを使った簡単なWebサーバーを構築方法を紹介します。 Express は Node.js を活用したWebアプリ開発を効率よくするためのフレームワークです。

当初、簡単な Webアプリケーションの作り方を紹介しようと思いましたが一つの記事では長くなってしまうので、とりあえずWebサーバー構築までとしました。

必要なツール類は以下の通りです。

Node.js（筆者の動作環境ではVer.16.20）
VSCode 等のエディタ

Express 導入まで

適当な作業フォルダ内でVSCode等を開き、ターミナルから下記コードを入力してゆきます。

① 作業フォルダ内の初期化処理および package.json の作成

npm init -y

※y オプションをつけると項目の入力を省略して package.json を作成可能

② Express をインストール

npm install express

package.json に以下のように Express が依存関係として記述されているはずです。

次に JavaScript ファイルを新規作成します。ファイル名は app.js としています。
以下のようになればOKです。

app.js への記述～Webサーバー起動まで～

まずは app.js に以下の記述をします。

1行目 require の部分は express を使うための準備です。express に限らず node ではモジュールの呼び出しにrequire を使います。
2行目で express をインスタンス化して変数に入れます。

const express = require('express'); // express を使うための準備
const app = express(); // express をインスタンス化

次に listen メソッドというのを使います。
第1引数にこのWebアプリが利用するポート番号、第2引数にコールバック関数を指定します。
※ポート番号は3000ではなくてもよいです。

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

ここまででWebサーバーが起動する所まで記述になります。
express を利用する場合のテンプレートみたいなものですね。

指定したポート番号で httpリクエストを受け付けることが出来ます。つまりブラウザからアクセスが出来るということです。

同時に、listen メソッドの第2引数に指定したコールバック関数が実行されます。

試しに一度起動してみます。
以下のように「Server listening on port 3000」が表示されればWebサーバーが起動している状態です。

ブラウザに http://localhost:3000/ を入力することでアクセスが可能です。
localhost というのはブラウザを立ち上げた端末（自分自身）を表しており、その3000番ポートという意味です。

ただし、今の状態だとHTTPリクエストにおけるGETリクエストを受けたときのふるまいを何も書いていません。なのでブラウザでアクセスをしても「Cannot GET /」という文字が表示されるだけのはずです。

次項からは GETリクエストを受けた場合の処理を書いてゆきます。

app.get() の使い方

基本的な書き方

「app.get()」を追加することで「http://localhost:3000/」にGETリクエストがあった場合の挙動を追加することが出来ます。

第1引数：アクセスを受けるパスです。http://localhost:3000 の後ろに続く内容を記載します。
第2引数：アクセスを受けた際に実行される関数です。

const express = require('express');
const app = express();

// 追加
app.get("/", (req, res) => {
  console.log("hello express");
});

app.listen(3000, () => {
    console.log('Server listening on port 3000');
  });

「http://localhost:3000/」にアクセスする度にコンソールに hello express と表示されるはずです。

ブラウザへのレスポンス

ただし、試してみるとわかると思いますが、このままだとブラウザ側で「ページ読み込みエラー」になるはずです。GETリクエストを受けた際のブラウザ側の挙動を何も書いていないからですね。

「res.send()」という記述を追加しましょう。
これでブラウザの表示も変わることが確認できるはずです。

app.get("/", (req, res) => {
    console.log("hello express");
    res.send("こんにちは！")    // 追加
});

ブラウザで「http://localhost:3000/」にアクセスすると以下が表示されるはずです。

jsonデータを返す方法

前の例では res.send() で単純な文字列を表示していましたが、GETメソッドを送った際にjsonデータを返すようにすることもできます。

方法は簡単で「res.send()」の部分を「res.json()」に変えるだけです。

app.get("/", (req, res) => {
    console.log("hello express");
    res.json({ msg: "こんにちは！"})  //json形式に変更
});

ブラウザでアクセスした際の表示は以下になります。

json 形式についてわからない方は各自調べて頂きたいと思いますが、データの受け渡しをする際に頻繁に使用するので、是非覚えておくと良いと思います。

起動からGETリクエストを受けるまでの処理の流れ

大まかに処理の流れを整理してみますと、以下のようになります。

リクエストリスナーにてリクエストを待つ。→「app.listen」の部分
リクエストを受信する。→ ブラウザでアクセスすることで、WebサーバーがGETメソッドを受信する
リクエストに対するレスポンスを設定する。→ res.send("こんにちは！")
レスポンスを返答する。→ コールバック関数が実行される。
を処理するには、まず「誰がどのような要求を送ってきたのか」を知り「その要求を判定し内容を設定する」ためにrequest/responseがどちらも渡されます。

その関数が完了した後、httpサーバーの④の機能が発火し設定したレスポンス内容が返答（送信）されるという流れになります。

以上が基本的な Express の使い方になります。別記事でもうエンドポイントやルーティングの設定など、もう少し応用的な利用方法を含めてWebアプリケーションっぽいものを作ってみようと思います。

まるノート

備忘録も兼ねて、様々なお役立ち情報をまとめています。

【Node.js】 Express の使い方～簡単なWebサーバー構築編～