はじめてのExpress.js | アールエフェクト

Express.jsに関しては非常にたくさんの文書が公開されているのでなるべく他の文書とはかぶらないように初めてExpress.jsを使う人が知りたいであろう内容にしぼって基本的なことを中心に説明を行なっています。

動作確認は、MAC環境で行なっており、Node.jsを事前にインストールしておく必要があります。インストール方法は下記を参考に行なってください。

Express.jsのインストール

Express.jsを使って作成するアプリケーションフォルダの作成を行い、そのフォルダに移動します。


 $ mkdir myapp
 $ cd myapp/

Express.jsで使用するパッケージ管理を行うためnpm initコマンドでpackage.jsonファイルの作成を行います。


 $ npm init

npm init実行後、いくつか質問をされますが、entry pointではapp.jsを入力してEnterを押してください。それ以外はEnterでかまいません。

本文書ではapp.jsを使うためapp.jsへの変更が必須というわけではありません。


Press ^C at any time to quit.
package name: (myapp) 
version: (1.0.0) 
description: 
entry point: (index.js) app.js
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

npm initの実行フォルダには、package.jsonファイルが作成されます。

Express.jsのインストールを行う準備が整ったので、npm installコマンドでexpressのインストールを行います。


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

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

npm 5.0+だと–saveをつけなくてもpackage.jsonのdependenciesにパッケージ情報が追加されるので、–saveは必須ではありません。

インストール完了後は、node_modulesフォルダとpackage-lock.jsonファイルが作成されます。ファイル構成は以下のようになります。


$ ls
node_modules		package-lock.json	package.json

Hello Worldをブラウザに表示

Express.jsのインストールが完了したので、Express.jsを使ってブラウザにHello Worldを表示させます。5行のコードでHello Worldを表示させることができます。

myappフォルダにapp.jsファイルを作成して以下のコードを記述します。


const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

上記のコードは3つの部分に分割できるので各部分について説明を行なっていきます。


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

expressモジュールをrequireで読み込んで、expressアプリケーションを作成して変数appに登録しています。このappがコアになる部分なので、appを通してさまざまな設定を行なっていきます。


const port = 3000

.listen(port, () => console.log(`Example app listening on port ${port}!`))

ブラウザからアクセスするためのポートを3000に設定し、そのポートをリスニングする設定を行なっています。


app.get('/', (req, res) => res.send('Hello World!'))

ルーティングの設定を行なっています。”/”ルートにアクセスが行われるとresのsendメソッドでHello World!を返します。reqはRequest(リクエスト)、resはResponse(レスポンス)を表しています。getはGETメソッドのことを表しています。

node app.jsを実行するとExpressサーバが起動します。ポート3000経由でアクセスすることが可能になります。


$ node app.js
Example app listening on port 3000!

3000ポートでサーバが起動しているので、ブラウザでそのポートに対してアクセスを行うと画面にHello Worldが表示されます。

また、”/”ルートしかルーティングの設定を行なっていないので、それ以外の場所にアクセスを行うとCannot GET XXXXとエラーが表示されます。XXXXはアクセスした場所です。

ポートの3000以外を設定するとアクセスはできません。もし異なるポートでアクセスしたい場合は、app.jsのportを別の番号に変更してください。

ルーティングの基本

ルーティングとは

/userという場所をExpress.jsに追加し、ブラウザからGETやPOSTメソッドを使ってリクエストがあった場合にどのような処理やレスポンスを行うのかを決めるのがルーティングです。/userという一つの場所であってもメソッド毎に複数のルーティングを設定することができます。

/userにGETメソッドとPOSTメソッドの別々の方法でリクエストがあった場合は下記のような記述を行い、ブラウザに返す値や行われる処理も変えることができます。

/userにGETメソッドでリクエストがあった場合


app.get('/user', function (req, res) {
  res.send('Hello World!')
})

/userにPOSTメソッドのリクエストがあった場合


app.post('/user', function (req, res) {
  res.send('Got a POST request')
})

ルーティングを追加

新たに”/”にPOSTメソッドがあった場合のルーティングを追加します。app.getではなくPOSTメソッドの場合はapp.postになります。


app.get('/', (req, res) => res.send('Hello World!'))
app.post('/', (req, res) => res.send('Hello World! by Post Request'))

app.jsファイルの更新を行ってもExpress.jsサーバは自動で更新を反映してくれないため、node app.jsコマンドを停止して更新後node app.jsを実行する必要があります。ファイルの更新を監視するnodemonを後ほどインストールします。

同じ”/”ルートに設定を行っているので、ブラウザから通常のアクセスを行うとGETメソッドでのアクセスになるので、Hello World!が表示されます。

通常のWEBサイトでは入力フォームを作成してPOSTメソッドで”/”にアクセスしますが、Express.jsでの入力フォームの作成方法はまだ確認していないので代わりにcurlコマンドを利用します。-XでPOSTメソッドでのアクセスを指定しています。


$ curl -X POST http://localhost:3000
Hello World! by Post Requestmyapp

同じ”/”ルートでも異なるメソッドで戻りが変わることが確認できました。

追加でルーティングを増やせばアクセスできる場所も増やすことが可能です。


app.get('/user', (req, res) => res.send('Hello John Doe'))

http://localhost:3000/userにアクセスすれば、Hello John Doeが表示されます。

nodemonインストール

app.jsのファイルを書き換えるとこれまではnode app.jsを再実行しなければ変更したファイルの内容は反映されませんでした。ファイルの変更を監視し自動でnode app.jsを再実行してくれるnodemonパッケージのインストールを行います。

npm installコマンドでnodemonのインストールを行います。


$ npm install nodemon

インストール後は、下記のコマンドを実行してサーバの起動を行います。


$ npx nodemon app.js
[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
Example app listening on port 3000!

app.jsファイルの更新があるとnode app.jsコマンドの再実行を自動で行ってくれます。


[nodemon] restarting due to changes...
[nodemon] starting `node app.js`
Example app listening on port 3000!

htmlファイルを表示させたい

ルーティングの設定によりブラウザから/userにアクセスがあると文字列を返すことができました。htmlタグで文字列を囲むとブラウザはタグを解釈してくれるためh1タグをつけると文字は大きく表示されます。


app.get('/user', (req, res) => res.send('<h1>Hello John Doe!</h1>'))

sendメソッドの中にhtml文書を記述するのは非効率なので、htmlファイルの内容を表示させる方法を確認していきます。

静的ファイルの保存場所の設定

静的ファイルを扱うためには、ミドルウェアのexpress.staticを下記のように設定する必要があります。publicは任意の名前をつけることができます。フォルダが増えるとcss, image, ….などのように用途に応じてフォルダが増えることになります。


app.use(express.static(path.join(__dirname, 'public')))

pathモジュールを利用するため、const path = require(‘path’)が必要になります。__dirnameによるこのファイルが存在するフォルダのパスがわかります。

myappフォルダの中にpublicフォルダを作成してtest.htmlファイルを作成します。


<!DOCTYPE html>
<html lang="ja"></html>
<head>
    <meta charset="UTF-8">
    <title>Express.js</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>Express.jsを使ってtest.htmlファイルを表示しています。</p>
</body>
</html>

ブラウザからhttp://localhost/test.htmlファイルにアクセスすると下記の画面が表示されます。ルーティングに設定されている場所ではありません。

次にルーティングを利用してhtmlファイルをブラウザに表示させるためには、sendFileメソッドを利用します。


app.get('/test', (req, res) => res.sendFile(path.join(__dirname, 'public/test.html')))

http://localhost/testにアクセスすると先程と同じ内容が表示されます。

入力フォームからのデータ取得したい

body-parserの利用

htmlファイルの表示方法がわかったので、入力フォームを作成して、Express.js側でデータを取得する方法を確認します。

入力フォームから送られてくるデータを処理するためにbody-parserのインストールを行います。


 $ npm install body-parser

インストールが完了するとbody-parserをrequireします。


const bodyParser = require('body-parser');

送られてくるデータのContent-Typeがapplication/x-www-form-urlencodedの場合は、body-parserのurlencoded()メソッドを利用します。これらの設定により、送られてくるデータはreq.bodyに保存されます。


app.use(bodyParser.urlencoded({ extended: true }));

送られてくるContent-Typeを確認したい場合は、req.header(‘Content-Type’)で確認することができます。

入力フォームの作成

入力フォームは/testにブラウザがアクセスがあった場合に返すtest.htmlファイルの中に記述します。


app.get('/test', (req, res) => res.sendFile(path.join(__dirname, 'public/test.html')))

test.htmlに入力フォームを追加し、送信ボタンを押すと/testに入力したデータをPOSTします。


<h1>入力フォーム</h1>
<form action="/test" method="POST">
    <input type="text" name="name">
    <button type="submit">送信</button>
</form>

入力データの取得

作成したフォームにユーザ名を入力して、送信ボタンを押します。

送信したデータはbody-parserにより、req.bodyの中に保存されるので、req.body.nameで入力した値を取り出します。受け取ったデータの内容を確認するためにsendメソッドでブラウザに戻します。


app.post('/test', (req, res) => res.send('送信したユーザ名は' + req.body.name))

入力フォームに入れて送信ボタンを押すとExpress.js側でPOSTデータを受け取りbody-parserで受け取ったデータを扱える形に変換して、その結果がブラウザに表示されます。

body-parserを利用することでPOSTで送られてきたデータをExpress.jsで取得できることが確認できました。