前回はNode.jsだけでWebサーバーを作成し、1行ずつコードをみていきました。
ここからはExpressを利用してWebサーバーを作成してみます。

パッケージの導入

Expressパッケージを導入します。

$ npm install express --save

成功するとこのように表示されます。

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN express-app@1.0.0 No description
npm WARN express-app@1.0.0 No repository field.

+ express@4.17.1
added 50 packages from 37 contributors and audited 126 packages in 1.606s
found 0 vulnerabilities 

WARNと出ているのはpacket.jsonに情報を入れていないからなので今回は無視します。
次はpackage.jsonにExpressが追加されたか確認してみましょう。

{
   "name": "express-app",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "express": "4.17.1" //<— 追加されている
   }
 } 

このように dependencies という項目が追加され、express がそのバージョンとともに記録されます。

ExpressでWebサーバーを作成

ここでExpressを使用したWebサーバーを作成してみます。
Expressの公式サイトにも app.js のサンプルがありましたのでそのままコピペします。

 // app.js
 var express = require('express')
 var app = express()
 
 app.get('/', function (req, res) {
   res.send('Hello World!')
 })
 app.listen(3000) 

ES6で書くとこんな感じです。
こちらのほうがスッキリしています。

 // app.js
 const express = require('express')
 const app = express()
 
 app.get('/', (req, res) => res.send('HelloWorld'))
 app.listen(3000) 

サーバーを起動します。

 $ node app.js

ブラウザに http://localhost:3000/ を入力してアクセスすると以下のように表示されました！

あとがき

Expressを使うときは http パッケージを指定しなくてもHTTP通信ができちゃうのですね。
これってExpressの中にいろいろ入っているからなんでしょうね。

また、get や send で書いているので直感的にわかりやすそうです。
次は1行ずつコードを見ていきたいと思います。

関連記事