APIデータ送信形式：x-www-form-urlencodedとJSONの違い

## はじめに
get/postでapiを叩いてデータを送信するときは、画像などを除き、content typeに設定するのは、大体「application/json」か「application/x-www-form-urlencoded」になると思います。この2つの違いや、送信方法についてまとめようと思います。

:::note info
API開発やテストの際、`application/x-www-form-urlencoded` と `application/json` のリクエスト形式に悩んだことはありませんか？
**Apidog**なら、これらのフォーマットを簡単にテスト・デバッグでき、開発者の作業を大幅に効率化します。複雑なAPIリクエストを直感的に作成し、即座にレスポンスを確認できるため、問題点を迅速に特定できます。
さらに、Content-Typeの設定やリクエストボディの編集も簡単に行えるので、APIの仕様確認や動作確認がスムーズに進みます。[Apidog](http://www.apidog.com/jp/?utm_source=opr&utm_medium=a2takuya)を活用すれば、API開発がより高速に、精度高く行えるようになります。
:::

![apidog-client-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877124/bd29704e-b74b-d898-b6d3-b99ede7014e6.png)


## Application/x-www-form-urlencodedとは何ですか？
`application/x-www-form-urlencoded` は、HTTPリクエストでデータを送信するための形式の一つで、特にWebフォームの送信時に使用されます。この形式では、データはURLエンコードされ、名前と値のペアが `&` で区切られた形式で送信されます。

**特徴：**

- データはURLエンコードされており、簡単な構造のデータに最適です
- 主に表形式のデータ（フォームデータなど）に使用されます
- URLパラメータとして送信されるため、ブラウザに送信する際に直接見ることができます

## Application/jsonとは何ですか？
`application/json` は、データをJSON形式で送信するためのMIMEタイプです。API間のデータ交換などで広く使用されており、複雑なデータ構造やオブジェクトの送受信に適しています。

**特徴：**

- 人間が読みやすいテキスト形式であり、JavaScriptオブジェクトとして自然に処理できます
- 配列やオブジェクトなど複雑なデータ構造を表現できる
- 現代的なWebアプリケーションやAPIで広く使用されています


### Application/x-www-form-urlencodedとApplication/jsonの主な違い

|特徴| application/x-www-form-urlencoded| 	application/json |
|:-:|:-:|:-:|
| データ形式| URLエンコードされたキーと値のペア | JSON形式でオブジェクトや配列が表現される|
|  用途 |  主にフォームデータの送信	 | APIやモバイルアプリとの通信|
| データの構造	  |  単純なキーと値	 | 複雑なオブジェクト、配列、ネストされたデータ|
| 可読性  |  低（URLエンコードされている）	 |  高（テキスト形式で見やすい）|
| 一般的な使用例	  | シンプルなウェブフォーム	  | REST API、複雑なデータ型|

## application/x-www-form-urlencodedとapplication/jsonの使用時期
- `application/x-www-form-urlencoded` は、主にWebフォームで使われるデータ送信形式です。フォームデータをサーバに送る際に使われます。簡単なデータ送信にはこの形式を選ぶのが最適です
- `application/json` は、API通信やアプリケーション間のデータ交換に使用されます。特に複雑なデータやネストされたオブジェクト、配列を送信する必要がある場合に最適です

## 実用例：リクエストボディフォーマットの送信
ここでは、application/x-www-form-urlencodedとapplication/jsonの両方でデータを送信する例を紹介します。

### 例1：application/x-www-form-urlencodedとしてデータを送信
フォームデータとして、`username` と `password` を送信する例です。

```
curl -X POST \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "username=johndoe&password=123456" \
  http://example.com/login
```

**説明：**

- `-X POST` はPOSTリクエストを指定します
- `-H "Content-Type: application/x-www-form-urlencoded"` は送信するデータ形式を指定します
- `-d "username=johndoe&password=123456"` は送信するデータです。キーと値は `&` で区切られます

### 例2：application/jsonとしてデータを送信
`application/json` 形式でデータを送信する例です。送信するデータはJSONオブジェクト形式で構造化されています。

```
curl -X POST \
  -H "Content-Type: application/json" \
  -d '{"username": "johndoe", "password": "123456"}' \
  http://example.com/login
```

**説明：**

- `-X POST` はPOSTリクエストを指定します
- `-H "Content-Type: application/json"` は送信するデータ形式を指定します
- `-d '{"username": "johndoe", "password": "123456"}'` はJSON形式でデータを送信します。JSONオブジェクトはキーと値のペアとして構造化されています

## APIインタラクションを強化するためのApidogの活用
[Apidog](https://apidog.com/jp/)を使用すると、`application/x-www-form-urlencoded` および `application/json` 形式のAPIリクエストを簡単にテスト・デバッグできます。特にAPIのレスポンスをすばやく確認し、リクエストのパラメータやヘッダの設定を調整する際に非常に便利です。

### Apidogの使用方法：

- Apidogで新しいAPIリクエストを作成します

![apidog-新しいリクエストを作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877124/c5749c06-51a3-3409-ec74-b671216026c1.png)

- リクエストのヘッダーで `Content-Type` を設定します

![apidog-Content-Type.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877124/e0c8c6b9-b705-299f-d50d-ce7e435d20f8.png)

- リクエストボディを `application/json` または `application/x-www-form-urlencoded` 形式で設定します

![apidog-application:json.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877124/e0cedeab-f209-193a-0088-3782f7aeb1d0.png)

- リクエストを送信し、レスポンスを確認します

ApidogはAPIリクエストの効率的なテストとデバッグを可能にし、データフォーマットの設定が簡単に行えます。

## 結論
`application/x-www-form-urlencoded` と`application/json` は、異なるシチュエーションにおいて適切な形式を選ぶことが重要です。Webフォームの簡単なデータ送信には ` x-www-form-urlencoded` が適していますが、複雑なデータ交換には `application/json` が最適です。API開発やテストにおいては、Apidogを活用するこでこれらのデータ形式の設定が簡単に行え、効率的な開発が可能となります。

**最後まで読んでくださり、ありがとうございました！
この記事を読んで少しでも理解を深めていただければ幸いです！**