SAMURAI TERAKOYA

Postman : 導入~基本的な使い方(APIテスト)

Web開発用ツール

Webアプリケーション・サービス等の開発を行う中で、ソフトウェア同士をつなぐ「API連携」という手法を用いることが多々あります。

メリットとしては、開発の効率化を実現することによるコストの削減やサービスの拡張が広がる点があげられます。

今回は、そんなAPI連携を行う上で、テストツールの1つとして使用されている「Postman」の導入から使い方までご紹介していきます。

Postmanの導入

Postman 導入
  • 1
    公式サイトへアクセス

    まずは公式サイトへアクセスし、デスクトップ版をダウンロードします。ブラウザ上でも検証は出来ますが、今回は、PC上にアプリをおとして使ってみます。

    Postman API Platform

    Postman_公式サイト

  • 2
    デスクトップアプリのダウンロード

    続いて、アプリのダウンロードをしていきます。以下の赤枠の箇所にDownload the desktop app forに続き、各OSのアイコンがあるのが分かると思います。

    現在使用のOSにあわせて、選択するようにしてください。

    以下は、Windowsを選択した例になりますが、各々のアイコンをクリックするとそれぞれのダウンロードページへ遷移します。

    Postman_Windows_app_Download

    画面の左側にあるオレンジのボタンを押下することで、ダウンロードを開始することが出来ます。

  • 3
    Postmanの新規アカウントを作成

    Windowsの例にはなりますが、次のようなセットアップファイルがダウンロードされているかと思いますので、ダブルクリックで起動しましょう。

    Download_Windows_setupfile

    すると、次のようにアカウント作成かサインインが選べる画面へ遷移しますので、「Create Free Account」をクリックしましょう。

    Postman_app_createAccount

    ブラウザへ遷移しますので、Googleアカウントを用いて新規アカウントを作成してみましょう。

    早速、「Sign up with Google」をクリックします。

    Postman_browser_CreateAccount

    アカウントの選択画面へ遷移しますので、アカウントとして使用するアカウントを選択します。

    Googleアカウント選択_postman

    問題なく進むと、ライセンスへの同意をする画面へ遷移しますので、「Accept」をクリックしてください。

    Postman_ライセンス_同意

    ここまで出来たらPostman上での名前と役割を設定してアカウント設定は終わりになります。

    入力及び選択が出来たら「Continue」を押しましょう。

    Postman_Basic_Infomation

    この後、チームメンバーを招待するための画面に移りますが、個別で使用する場合は、スルーしてOKですので、「Continue without team」をクリックしてください

    Postman_team_invite

    このままブラウザのアカウントページに飛びますので、飛んだことを確認したら次の作業に移っていきましょう。

  • 4
    デスクトップアプリからログインする

    デスクトップアプリへ戻り、「Sign In」をクリックしてください。

    Postman_app_signin

    すると、ブラウザが開きますので、ログインするアカウントを選択しましょう。

    Postman_browser_Account_choice

    選択すると、アプリケーションで開くかどうかをたずねられますので、Postmanを開くをクリックしてください。

    Postman_app_move

    デスクトップアプリのほうで、次のように表示されれば完璧です。

    Postman_mypage

    以上で、作業は終わります。

JSONPlaceholderとは

Postmanの導入が完了したため、続いて、テストに使用するAPI情報をチェックしていきます。

使用するのは、「jsonplaceholder」です。このサイトでは無料のAPIが準備されており、そのデータを使用することが出来ます。

以下のURLリンクよりアクセスが可能ですので、APIテストをする前にチェックしておきましょう。

JSONPlaceholder - Free Fake REST API

用意されているエンドポイントは、次の通りです。

  1. 投稿データ : https://jsonplaceholder.typicode.com/posts
  2. コメントデータ : https://jsonplaceholder.typicode.com/comments
  3. アルバムデータ : https://jsonplaceholder.typicode.com/albums
  4. 写真データ : https://jsonplaceholder.typicode.com/photos
  5. Todoデータ : https://jsonplaceholder.typicode.com/todos
  6. ユーザーデータ : https://jsonplaceholder.typicode.com/users

PostmanでAPIテストをしてみよう

※ 本記事上ではHTTPメソッド(GET, POSTなど)に関する詳細な説明は省いています。
では、無料のAPIデータを使用し、Postmanで取得・追加・更新・削除の操作をしてみましょう。データとして使用するのは、Todoデータになります。

まずは、Postman上から「My Workspace」へ移動しましょう。

Postman_MyWorkspace

以下の画面へ移動出来たら、Overviewタブのすぐ隣にある「+」をクリックしてください。

Postman_myworkspace_page

リクエストを送るための画面が確認出来ましたら準備OKです。
Postman_request_page

GET

ここでは、どんなデータの取得が出来るかを確認してみます。

GETでデータを取得
  • 1
    Todoデータを全件取得

    GETが選択されていることを確認したら、https://jsonplaceholder.typicode.com/todos  と入力します。スペルミスなどがないかも確認出来たら「Send」を押しましょう。

    Postman_GET_all_Todos

  • 2
    結果

    すると、画面下に取得できたデータ一覧が表示されるのが分かります。Todoデータは、全部で200件表示されます。

    GET_all_todo

     

  • 3
    特定のTodoデータを取得

    続いて、userIdが2のユーザーが登録したTodoデータのみを一覧で取得してみたいと思います。GETを選択した状態で、https://jsonplaceholder.typicode.com/todos?userId=2 と入力しましょう。

    Postman_userId=2

  • 4
    結果

    「Send」を押すと、先程と違い、userIdが2のTodoのみが一覧で20件取得できます。

    Postman_userId=2_GET

POST

POST送信を行い、新しいTodoデータを追加してみましょう。

Todoデータを追加
  • 1
    新規のTodoデータを追加

    今回は、GETではなくPOSTを選択し、https://jsonplaceholder.typicode.com/todos と入力してください。

    また、Bodyタブ -> raw -> JSONの流れで選択し、以下の内容を入力しましょう。

    {
      "userId": 1,
      "title""新規Todoの追加",
      "completed"false
    }

    ここまで出来たら「Send」を押してください。

    Postman_POST

  • 2
    結果

    id : 201が自動的に割り振られたTodoが追加されたことが分かりますので、POST送信が成功しています。Todoデータは全件で200ありますので、201個目のTodoが作成されたことになります。

    Postman_POST_success

    もし、結果としてidしか返ってこない場合は、JSON形式であるかを確認してみましょう。

 

 

PUT

ここまで、データの取得と追加をしてきましたが、次は既にあるデータを編集・更新していきましょう。

Todoデータを更新
  • 1
    idが20のTodoデータを更新

    今回は、PUTを選択し、https://jsonplaceholder.typicode.com/todos/20 と入力してください。/20は、id=20のTodoへアクセスことを意味します。

    また、Bodyタブ -> raw -> JSONの流れで選択し、以下の内容を入力しましょう。

    {
      "userId"2,
      "title""Todoを編集・更新",
      "completed"false
    }

    ここまで出来たら「Send」を押してください。

    Postman_PUT

  • 2
    結果

    返ってくる値を確認すると、idが20のTodoデータが変更されていることが分かります。

    Postman_PUT_success

    因みに、id=20の変更前のTodoデータは、以下になります。

    {  
      "userId"1,
      "id"20,
      "title""ullam nobis libero sapiente ad optio sint",
      "completed"true
    }

DELETE

最後の既存のTodoを削除してみます。

Todoデータを削除
  • 1
    特定のTodoデータを削除

    DELETEに変更したら、PUT時と同様に https://jsonplaceholder.typicode.com/todos/20 でリクエストしてみましょう。

    Postman_DELETE

  • 2
    結果

    Statusが200 OKとなっていれば正常に該当のTodoの削除が成功していることを表しています。もし、Not Foundとなっている場合は、失敗していますので、リクエストを送信する際に入力したURLにミスがないかチェックしましょう。

    Postman_DELETE_success

以上で、既存のAPIを用いたAPIテストを終了します。

まとめ

Postmanは基本英語ですので、抵抗がある方もいらっしゃるかもしれませんが、Webアプリ開発をする上で覚えておくと便利です。

実際にフロント側でAPI経由でデータを取得する場合もどんあデータがとれるのかを予め確認しながら進めていくとミスを防ぐことも出来ます。

コメント

タイトルとURLをコピーしました