Postmanを使ってみようと思った理由

実務で外部APIの疎通を確認するときにCurlコマンドを使って確認をおこなっていました。
Postmanという存在はそれまで知っていたが、確認作業が終わった後に、「あれ?Postmanの方が、レスポンス分かりやすかったんじゃないかな?」と思ったところから始まります。個人開発でバックエンドの開発に取り掛かった際に、わざわざブラウザ立ち上げるのも面倒だなと思ったのもあります

Postmanの何がいいのか?

バックエンドの開発をするときにただバックエンドのレスポンスだけを見たいときに便利。
Postman以外でだと、Chromeの検証ツールかターミナルでcurlコマンドを打ち込むことで可能。
・Chromeの検証ツールの場合はフォームに値を入力しクリックイベントなどでリクエストを送る形になる
・Curlコマンドの場合POSTを送る際一つのコマンドに複数の情報をいれる。

curl -X POST -H "Content-Type: application/json" -d '{"Name":"sensuikan1973", "Age":"100"}' localhost:8080/api/v1/users

↓コマンドを参考にしたのはこちらです
https://qiita.com/sensuikan1973/items/b2085a9cdc6d1e97e8f8

`実際にリクエストを送ってみる`

Node.jsで簡単なAPIを作成しました。

const createError = require('http-errors');
const express = require('express');
const path = require('path');

let datas = [
  {id: 1, title: 'ネーム', completed: true},
  {id: 2, title: '下書き', completed: false}
]
const app = express();
app.use(express.json())

app.get('/data', (req, res)=> {
  return res.json(datas);
});

let id = 2
app.post('/data', (req, res, next) => {
  const { title } = req.body
  if (typeof title !== 'string' || !title) {
    const err = new Error('title is required');
    err.statusCode = 400;
    return next(err);
  }
  const data = {
    id: id += 1,
    title,
    completed: false
  }
  datas.push(data);
  return res.status(201).json(data);
})

app.use((err, req, res, next) => {
  console.log(err);
  res.status(err.statusCode || 500).json({ error: err.message })
})

app.listen(3000);

上記コードはハンズオンNode.js(オライリー)のコードをもとに作成しています。

Postmanを開きます

メイン画面の左上のプラスをクリックするとエンドポイントを入力できる画面が表示されます。

エンドポイントの左にHTTPメソッドの指定できるところがあります
GETを選択しエンドポイントを入力してSendをクリックします
コードのエンドポイントの指定で

app.get('/data', (req, res)=> {
  return res.json(datas);
});

とあるので「localhost:3000/data」をGETメソッドで送ってみます。datasを返すので2つのデータが返ってくるはずです。

しっかりと2つのデータが配列で帰ってきています。
次はPOSTでデータの追加を行います。
エンドポイントの左のHTTPメソッドをPOSTに変更し、今度は真ん中の領域に少し書き込みを行います。
Headersの部分のKEYにContent-Type,VALUEにapplication/jsonを指定してやります。
Bodyの部分に追加する内容を入力します。コードを見ると、idとcompletedの値は書かれるようになっているので、titleだけを書くようにします。rawの部分に書きます。

{
  "title": "チョモランマ"
}

これでSendします。
追加しようとしたデータが表示されています。

ここで再度localhost:3000/dataのGETを確認し、id：3のデータが表示されていれば追加に成功しています。

OKですね！

Postmanだとより、リクエストとレスポンスの入力出力が見やすいため、APIの開発を行なっているときには頼りになると思います。
GraphQLでのリクエスト、レスポンスも確認できるようです。確認方法がわかったら更新します。