0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Postmanが便利だなと思い使い方をまとめてみました。

Posted at

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を開きます
postman1

メイン画面の左上のプラスをクリックするとエンドポイントを入力できる画面が表示されます。
スクリーンショット 2021-12-22 22.08.05.png

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

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

とあるので「localhost:3000/data」をGETメソッドで送ってみます。datasを返すので2つのデータが返ってくるはずです。
スクリーンショット 2021-12-22 22.13.41.png

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

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

これでSendします。
追加しようとしたデータが表示されています。
スクリーンショット 2021-12-22 22.16.33.png

ここで再度localhost:3000/dataのGETを確認し、id:3のデータが表示されていれば追加に成功しています。
スクリーンショット 2021-12-22 22.17.34.png
OKですね!

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?