Node.js + Express で WebAPI を作る

Node.js + Express で WebAPI を作成してみます。 最近だと モバイルアプリ や SPA (Single Page Appliction) などで利用されるような機能を実装するイメージです。 あまり難しいことはせず、単純な GET と POST の例でまとめました。

概要

画面を返さず JSON を返却する WebAPI を作成してみます。 今回は 単純な GET と POST を行うサンプルです。 具体的なパスは以下のようなものを作る予定です。

• GET: /api/user/:id
• POST: /api/user

上記の POST URLにリクエストしたときの動きのイメージは以下のようなものです。

実装

今回は以下のミドルウェアを利用するのであらかじめ npm install <PACKAGE> --save でインストールしておきます。

• express
• body-parser

app.js

それでは実装に…といっても単純なものなので、何はともあれ実装の全体像は以下に載せます。 ハイライト下部分について、詳しくは後ほど説明していきます。

var express = require("express");
var bodyParser = require("body-parser");

// express application
var app = express();

// add body-parser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// set routing.
app.use("/api/", (function () {
    var router = express.Router();

    // GET: /api/user/:id
    router.get("/user/:id", (request, response) => {
        var user = {
            id: request.params.id,
            name: "tanaka",
            role: "group1"
        }
        response.json(user);
    });

    // POST: /api/user
    router.post("/user", (request, response) => {
        var body = request.body;
        if (!body.name || !body.role) {
            return response.json(false);
        }
        var user = {
            id: 0,
            name: body.name,
            role: body.role
        };
        response.json(true);
    });

    return router;
})());

// start web applicaiton.
app.listen(3000);

GET: /api/user/:id

L.16-23

コロン「:」 を利用することで URL 中 にパラメータを埋め込むことができます。 埋め込まれたパラメータの取り出しは request.params.パラメータ名 でできます。 このパラメータ指定にはいくつかオプション設定（?, +, *, regexp）が使えます。 詳しくは 「Node.js + Express の URLルーティング」 を参照してください。

POST: /api/user

L.8-9 および L.26-37

POSTの場合、リクエストボディー に JSON を入れて情報を伝達するのが通常かと思います。 リクエストボディーに埋め込まれた JSON を取り出す場合 body-parser を使うと便利です。 body-parser ミドルウェアの設定および登録は L8-9 に記載の通りです。 この登録をしておけば、body-parser にはリクエストボディーに埋め込まれた文字列を JSONオブジェクト に変換して request.body へセットしてくれます。

テスト

GET と POST の両方をテストしてみます。 作成した Webアプリケーション を実行した状態で localhost:3000 に向かってリクエストを投げてみます。

リクエスト生成するツールはいろいろありますが…私は Fiddler の Composer をよく使うので、 ここでも Fiddler を利用してリクエストを投げています。 Fiddler を利用しているのでリクエストサンプルの User-Agent は Fiddler となてっていますがテストには関係ないので無視で良いです。

以下は Fiddler の Composer でリクエストを投げている画面のキャプチャです。

GET: /api/user/:id

リクエスト

GET http://localhost:3000/api/user/123 HTTP/1.1
User-Agent: Fiddler
Host: localhost:3000
Content-Length: 0

レスポンス

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 44
ETag: W/"2c-yyXPiEPxROPhaVRftHE4bQ"
Date: Sun, 12 Feb 2017 08:48:35 GMT
Connection: keep-alive

{"id":"123","name":"tanaka","role":"group1"}

POST: /api/user

リクエスト

POST http://localhost:3000/api/user HTTP/1.1
User-Agent: Fiddler
Host: localhost:3000
Content-Length: 35
Content-Type: application/json

{"name":"tanaka", "role": "group1"}

レスポンス

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 4
ETag: W/"4-sya1BisvDmkEaBBxdTTLCQ"
Date: Sun, 12 Feb 2017 08:49:12 GMT
Connection: keep-alive

true

参考記事

• Express - Express での ルーティング
• npm - path-to-regexp
• Express 4.x - API リファレンス

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter