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
それでは実装に…といっても単純なものなので、何はともあれ実装の全体像は以下に載せます。 ハイライト下部分について、詳しくは後ほど説明していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 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
リクエスト
1 2 3 4 | GET http://localhost:3000/api/user/123 HTTP/1.1 User-Agent: Fiddler Host: localhost:3000 Content-Length: 0 |
レスポンス
1 2 3 4 5 6 7 8 9 | 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
リクエスト
1 2 3 4 5 6 7 | 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"} |
レスポンス
1 2 3 4 5 6 7 8 9 | 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 |
参考記事
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!