
Node.jsの`Express`で立てたサーバでjsonのリクエストを受け取る方法についてです。

環境構築と簡単な動作確認については[公式](https://expressjs.com/)か
[【Nodejs】さくっとjsonを返すローカルサーバを立てる](https://www.suzu6.net/posts/182-express-json-responce/)
をご参照ください。

## 環境

**モジュール**

- Express 4.17
- body-parcer 1.19

**開発環境**

- Node.js 10.15
- npm 6.4
- yarn 1.15
- Windows 10 Home (Mac, Linux可)

### [body-parcer](https://github.com/expressjs/body-parser)

Express単体でリクエストボディを取得しようとすると`undefined`となります。

```js
app.post("/user", (req, res, next) => {
    // bodyを表示
    condole.log(req.body) // undefined
});
```

そのため、ボディを変換するミドルウェアの[body-parcer](https://github.com/expressjs/body-parser)を使って変換が必要です。
インストールと利用方法は以下です。

```sh
# インストール
$ npm install body-parser
# or
$ yarn add body-parser
```

```js
const express = require('express')
var bodyParser = require('body-parser');
const app = express()

// リクエストボディをjsonに変換する
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
```

これで`req.body`でリクエストボディのJSONを取り扱えます。

## コード例

例としてユーザを作成するエンドポイントを考えます。
ユーザ情報のjsonをPOSTで受け取ります。


```js
const express = require('express')
var bodyParser = require('body-parser');
const app = express()
const port = 3000

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

app.post("/user", (req, res, next) => {
    // アクセスログ
    console.log(req.method, req.url, req.ip)

    // headerを表示
    console.log(req.headers)

    // bodyを表示
    console.log(req.body)

    // 登録処理など...

    res.send('OK')
});

// ポート3000でサーバ起動
app.listen(port, () => console.log(`click http://localhost:${port}/ !`))
```

これに`{ name: 'Alice', age: 20 }`をリクエストすると以下のコンソールログです。JSONのキーも`req.body.name`、`req.body.age`と簡単に得られます。

```sh
>node file_list.js
click http://localhost:3000/ !
POST /user ::ffff:127.0.0.1
{ host: 'localhost:3000',
  'content-type': 'application/json',
  'content-length': '37' }
{ name: 'Alice', age: 20 }
```
## 参考

- [Express 4でPOSTされたJSONを扱う - Qiita](https://qiita.com/mas0061/items/f6cb22db1a7ec121fd81)

参考と言いつつコアな部分はこの記事と同じになってます。すみません。

【Nodejs】Expressでjsonのリクエストを受け取る


リクエストを投げる方は色々と簡単にできるツールが色々とあるが、受ける方はあまりない。
とりあえずnpmの`express`を使ってサクッとjsonを返すローカルサーバを立てる。

説明は少なめです。

## 実行環境

- Express 4.16
- Node.js 10.15
- npm 6.4
- Windows 10 Home (Mac, Linux可)

### Node.js/npmのインストール

npmとNode.jsインストール済みの方は飛ばしてください。

（2019年07月現在）Node.jsのバージョンは10.xが推奨されています。
OS毎のNodeとnpmのインストール方法はそれぞれ以下に挙げます。

- Windows : [こちら](https://nodejs.org/ja/)のインストーラ（推奨版）を使う。
- Linux
  - Ubuntu : [Ubuntuはaptを使う方法](https://www.suzu6.net/posts/81-npm-install-ubuntu)。
  - CentOS : [リンク](https://qiita.com/daskepon/items/16a77868d38f8e585840)先のコマンドを`8.x`から`10.x`に変更してインストールできます。
- Mac : [Homebrewを使う方法](https://www.suzu6.net/posts/45/)

バージョン6と8でも確認できたので、既にインストールされている方はそのままで大丈夫（なはず）です。

```sh
> node -v
v10.15.1

> npm -v
6.4.1
```

インストールして上記のコマンドが打てることを確認してください。

## ローカルサーバの準備

### プロジェクトの作成とexpressのインストール

任意のディレクトリに行ってnpmのプロジェクトを作成します。

```sh
> cd path/to/dir
# npmのプロジェクトを作成
> npm init
```

`npm init`で色々と聞かれるが`Enter`を連打。
これでプロジェクトができる。

```sh
# expressをインストール
> npm i express
```

これでインストール終わり。

### GETでJSONを返す最小構成

続いて、`index.json`を作る。下のをコピーして張り付ける。

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

// http://localhost:3000/ でresponce.jsonの中身を返す。
app.get("/", (req, res, next) => {
    // アクセスログ
    console.log(req.method, req.url) 
    // jsonを返す
    res.json(require('./responce.json'))
});

// ポート3000でサーバ起動
app.listen(port, () => console.log(`click http://localhost:${port}/ !`))
```

続いて、jsonファイルをプロジェクトのディレクトリ置く。
名前は`responce.json`としておく。

```json
{
    "msg":"Hello World!"
}
```

現在のディレクトリはこんな感じ。

```sh
.
├── index.js          # サーバの実行ファイル
├── node_modules      # expressに必要なモジュール
├── package-lock.json # バージョン固定用のファイル
├── package.json      # プロジェクトファイル
└── responce.json     # 返すjson
```

これで準備OK。

## サーバ起動

あとはサーバを起動するだけです。

```sh
# サーバ起動
> node index.js
click http://localhost:3000 !
```

[http://localhost:3000/](http://localhost:3000/)をブラウザで開けばjsonの内容が返ってきます。

**ただし、jsonの内容を書き換えた場合はサーバの再起動が必要です。**`Ctrl`+`C` -> `node index.js`

![get](/images/posts/180/182/get.png)

### 他のURLには？

`app.[メソッド]`を追加して他のパスやHTTPメソッドにも対応できます。

```js
// GET /user 
app.get("/user", (req, res, next) => {
    console.log(req.method, req.url)
    res.json(require('./user_get.json'))
});

// POST /user
app.post("/user", (req, res, next) => {
    console.log(req.method, req.url)
    res.json(require('./user_post.json'))
});
```

## おまけ

- [Advanced REST Client](https://install.advancedrestclient.com/install)

直感的に使いやすいHTTPリクエストを投げるツールです。

- [REST Client - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

VSCodeの拡張機能です。