Web APIの動作確認に役立つツールまとめ

# はじめに

Webアプリケーション開発をしていると、公開されている Web API (以下「API」) を開発しているアプリケーションに組み込んだり、自分で API を実装して外部に公開するといった機会が訪れると思います。公開されている API の使用方法を知るための動作確認や、API が正しく動くか試すための動作確認に、みなさんはどのようなツールを使っていますか？

この記事では、APIの動作確認に役立つ様々なツールを紹介します。

# CLI を使った API の動作確認

## curl

curl はとても有名で便利なコマンドラインツールで、API の動作確認に使用することができます。
さまざまなライブラリのドキュメントや README に使用方法として curl を使用した例が書かれていることが多く、Web 開発をしている方の多くが使ったことがあるはずです。

https://curl.se/

使い方は以下のように、curl に API の URL を指定してリクエストを送信することで、API の動作確認を行うことができます。（結果を見やすくするために、 `jq` コマンドで JSON を見やすくしています。`jq` も CLI で API の動作確認をする際によく使いますよね。）

```bash
λ curl 'https://qiita.com/api/v2/users/wataru86' | jq       
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   448    0   448    0     0   1141      0 --:--:-- --:--:-- --:--:--  1163
{
  "description": "",
  "facebook_id": "",
  "followees_count": 15,
  "followers_count": 31,
  "github_login_name": "wataru86",
  "id": "wataru86",
  "items_count": 36,
  "linkedin_id": "",
  "location": "",
  "name": "Wataru Yamada",
  "organization": "",
  "permanent_id": 325392,
  "profile_image_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/325392/bc103c4508672e910cd3807be3e74d19978f1b94/large.png?1544534972",
  "team_only": false,
  "twitter_screen_name": null,
  "website_url": ""
}

```

本記事では省きますが、 curl にはさまざまな使用方法やオプションがありますので、詳細な使い方については公式ドキュメントや Qiita 記事等を参照してみてください！

## wget

wget も curl と同様に HTTP リクエストを送信するためのコマンドラインツールであり、API の動作確認に使用できます。curl と比べると wget はファイルのダウンロードのために使用することが多い気がします。

https://www.gnu.org/software/wget/

API に対して以下のようにリクエストできます。使い方も curl と似ていますね。

```bash
λ wget -qO- https://qiita.com/api/v2/users/wataru86 | jq 
{
  "description": "",
  "facebook_id": "",
  "followees_count": 15,
  "followers_count": 31,
  "github_login_name": "wataru86",
  "id": "wataru86",
  "items_count": 36,
  "linkedin_id": "",
  "location": "",
  "name": "Wataru Yamada",
  "organization": "",
  "permanent_id": 325392,
  "profile_image_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/325392/bc103c4508672e910cd3807be3e74d19978f1b94/large.png?1544534972",
  "team_only": false,
  "twitter_screen_name": null,
  "website_url": ""
}

```

## httpie

httpie も HTTP リクエストが可能なCLIです。 コマンドラインオプションが curl 等よりも書きやすく、POSTメソッドを `http POST url param=value` のように書けるといった特徴があります。

CLIとしてだけでなく、デスクトップアプリケーションも提供しているようです。

https://httpie.io/

以下のように `http` コマンドで API にリクエストができます。

```bash
λ http https://qiita.com/api/v2/users/wataru86
HTTP/1.1 200 OK
Cache-Control: max-age=0, private, must-revalidate
Connection: keep-alive
Content-Type: application/json; charset=utf-8
Date: Thu, 31 Aug 2023 03:52:47 GMT
ETag: W/"8e3872804624fc12d3636a9f76af9e7d"
Rate-Limit: 60
Rate-Remaining: 59
Rate-Reset: 1693457567
Referrer-Policy: strict-origin-when-cross-origin
Server: nginx
Strict-Transport-Security: max-age=2592000
Transfer-Encoding: chunked
Vary: Accept, Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 7549a547-38b5-4000-9875-784e8fe505c3
X-Runtime: 0.179149
X-XSS-Protection: 1; mode=block

{
    "description": "",
    "facebook_id": "",
    "followees_count": 15,
    "followers_count": 31,
    "github_login_name": "wataru86",
    "id": "wataru86",
    "items_count": 36,
    "linkedin_id": "",
    "location": "",
    "name": "Wataru Yamada",
    "organization": "",
    "permanent_id": 325392,
    "profile_image_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/325392/bc103c4508672e910cd3807be3e74d19978f1b94/large.png?1544534972",
    "team_only": false,
    "twitter_screen_name": null,
    "website_url": ""
}

```


# GUI を使った API の動作確認

## Postman

GUI で API の動作確認をするツールとして僕が最初に思い浮かんだものは Postman です。Postmanは、直感的なインターフェースと豊富な機能を備えており、API のリクエストやレスポンスを簡単にテストすることができます。Postman は僕がまだ CLI に慣れていない頃にお世話になった思い出があります。

https://www.postman.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/4bc5341d-3abf-59a0-4393-2ff5a1f463e4.png)
(画像は公式ドキュメントからお借りしました。)

## Insomnia

Insomnia も GUI でWeb APIを動作確認するためのツールで、Postmanと同様に様々なHTTPメソッドをサポートしており、リクエストの送信やレスポンスの確認が簡単に行えます。

https://insomnia.rest/

以下のように Webサイトにリクエストを行い、ページのプレビューを表示することも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/f3881552-1340-40ca-7ead-ac08537aa2f3.png)
(画像は公式ドキュメントからお借りしました。)

# ブラウザ拡張機能を使った API の動作確認

普段 Chrome を使っているので、Chromeの拡張のみになっています。ご了承ください。

## JSON Viewer

ブラウザで API のGET可能なエンドポイントにアクセスすると、レスポンスは取得可能ですが、JSONだと以下のように見ずらいですよね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/f498e9fb-9f81-a35d-70bc-0654c3b1b5f7.png)

開発者ツールでも以下のようにプレビュー可能ですが、もっと楽にブラウザで確認する方法があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/173cf87e-499e-b927-bb15-942925b0d21f.png)

拡張機能 JSON Viewer を導入すると、JSON を見やすい形で表示可能です。

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ja

ブラウザ上で以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/1cfa78fc-e9d4-7718-ce75-b323ef5c25a9.png)

## Talend API Tester

先ほど紹介したように、ブラウザで直接 API の URL を入力して GET することも可能ですが、さすがにそれだけだとAPIの動作確認には限界があります。Chrome の拡張機能 Talend API Tester をインストールすることで、Postman や Insomnia のようにブラウザ上で GUI を使ってAPIの動作確認ができるようになります。

https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/59a824e9-ca67-4007-0734-5c79cd97f539.png)

# エディタを使った API の動作確認

普段僕が VSCode を使っているので、VSCode の拡張のみになっています。ご了承ください。

## REST Clinet

REST Client は VSCode の拡張機能の一つで、API のリクエストを簡単に作成し、実行することができます。

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

VSCode でリクエストを記述し、選択した状態でコマンドを実行すると、REST Client がリクエストを送信し、新しいタブにレスポンスを表示することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/4c399b16-8e39-5c0f-2380-8992ed55078a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/676bf443-10c6-4312-51d7-2041d6b7a367.png)

VSCode で開発し、VSCode で API の動作確認ができるので、とても便利です。僕はこれを一番よく使っています。

## Postman

先ほど GUI のところで紹介した Postman ですが、VSCode の拡張機能も存在するようです。

https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

> This extension is currently in its beta phase. We appreciate your feedback and patience as we fine-tune its capabilities.

上記のようにまだベータ版ですが、Postman と VSCode を両方使っている人にとっては便利かもしれないですね。

![image](https://st-ar.cdn.postman.com/release-notes/vs-code/overview/req-in-collection-2507.gif)

上記は拡張機能のページからお借りしました。

# 好きなプログラミング言語を使った API の動作確認

ツールを使用せず、好きなプログラミング言語で API にリクエストを送信するプログラムを書いてしまう、というやり方もあると思います。例えば、JavaScript の Fetch API を使ってリクエストを送信するコードを書けば、ブラウザ開発者ツールの Console に流すだけで実行できます。また、様々なプログラミング言語で HTTP リクエストをするためのライブラリが公開されているので、それを利用しても良いでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/a03f3e96-e161-719f-0792-ee50d7aca3d3.png)

# おわりに

みなさんが使っているツールはありましたか？本記事では僕が知る限りのAPIの動作確認に便利なツールを紹介しましたが、他にもさまざまなツールが存在するとおもうので、自分に合ったツールを探して使ってみてください！！

また、「私はこれをつかっています！」「これも便利なのでオススメ！」などのコメントをいただけると、他のエンジニアの方々にも参考になるかもしれませんので、ぜひコメント欄にご意見をお寄せください！！！