まずはじめに
API通信を学んでいると、
GET や POST という言葉をよく見かけます。
自分も最初、
「何となく見たことはあるけど、違いがよく分からない」
という状態でした。
今回は GET と POST の違いを初心者向けに整理します。
GETとPOSTを超ざっくり言うと
GET → データを取得する
POST → データを送信する
GETとは？
一言でいうと
「データを下さい」
という通信です。
例として
- 商品一覧を見たい
- ユーザー情報を見たい
- Todo一覧を見たい
こういう時に使います。
- 取得
- 閲覧
- 検索
- 表示
などです。
GETはデータをURLに乗せることが多いです。
例：
/products?category=keyboard&page=1
これは「category が keyboard の商品を、1ページ目で表示する」
という意味です。
このようにURLへ情報を付けるものを
「クエリパラメータ」と呼びます。
| 部分 | 意味 |
|---|---|
| ?category=keyboard | categoryがkeyboard |
| &page=1 | pageが1 |
POSTとは？
一言でいうと、
「このデータを送ります」
という通信です。
例えば、
- 新規登録
- ログイン
- 注文作成
- コメント投稿
などで使われます
fetchで比較してみる
GETの場合
const res = await fetch("/api/products")
fetchを使って商品一覧を取得しています。
GETは「データをください」という通信なので、
シンプルに書けることが多いです。
POSTの場合
const res = await fetch("/api/orders", {
method: "POST",
headers:{
"Content-Type": "application/json",
},
body: JSON.stringify(orderData)
})
POSTでは、
- method
- headers
- body
などを設定しています。
特に body は「送信するデータ」です。
今回は注文データをJSON形式で送っています。
POSTでは、送信したいデータを body に入れることが多いです。
GETとPOSTの使い分け
GET は「データを取得したい時」
POSTは「データを送信したい時」
によく使われます。
例えばECサイトなら、
- GET → 商品一覧や商品詳細を取得
- POST → 注文情報を送信
というように使い分けます。
まとめ
| GET | POST |
|---|---|
| データ取得 | データ送信 |
| シンプル | 設定が増える |
| URLで条件指定することが多い | bodyにデータを入れる |
補足
headersって何？
そのデータの説明や追加情報
例えばContent-Type
headers: {
"Content-Type": "application/json"
}
これは
「bodyの中身はJSON形式ですよ」
とサーバーへ伝えています。
他にも
| ヘッダー | 意味 |
|---|---|
| Content-Type | データ形式 |
| Authorization | ログイン情報 |
| Date | 日付 |
| User-Agent | ブラウザ情報 |
などがあります。
JSON.stringifyって何？
JSON.stringifyは、
JavascriptのオブジェクトをJSON文字列へ変換する処理です。
const data = {
name: "Taro"
}
↓
'{"name":"Taro"}'
このように、
javascriptオブジェクトをJSON文字列へ変換しています。