💾

主要なHTTPメソッドのざっくりした違い for フロントエンドエンジニア

2022/10/23に公開

API

http

frontend

tech

この記事の対象読者

サーバサイドエンジニアからどのHTTPメソッドを使うのか伝達されず、
「きっとこのメソッドや！」と誤ったメソッドを使用し、405エラーを出しちゃった経験のあるフロントエンドエンジニア。

ちなみにHTTP Status Codeについてはこちらを参照してください。

フロントエンドエンジニアとHTTPメソッド

フロントエンドエンジニアにとって、HTTPメソッドを使うシーンと言えばもちろんAPIを叩く時。
サーバサイドエンジニアと協業して開発することが多いと思いますが、大抵の場合、以下の情報が必要になると思います。

エンドポイント
リクエストの形式
レスポンスの形式
HTTPメソッド

この中で1~3まではDBや仕様の都合で必ずコミュニケーションが必要となる情報だと思います。
ただ、4だけは『DBに対してどんな操作をしたいのか』がわかっていれば、フロントエンドでもどのメソッドを使うか判断できるはず。

今回はAPI通信を行うときにどのHTTPメソッドを使うのか、フロントエンドエンジニアが判断できるようになるためのまとめ記事です :)

主要なHTTPメソッド

今回は分かりやすく、フロントエンドフレームワークのチュートリアルでもよく使われるTODOリストを例に解説します。

POST：作成

データを作成するためのメソッド。
TODOリストならば、タスクを新しく追加するときに使います。

例：『トマトを買いに行く』というタスクを新規作成する

// POST前
[]

// POST後
[
  {
    id: 1,
    content: 'トマトを買いに行く',
  }
]

GET：取得

GET、読んでそのままの意味です。データを取得するためのメソッド。
TODOリストならば、すでに登録されているタスクを取得するために使います。

例：TODOアプリを開いた際に、すでに登録されている3つのタスクを読み込む

// GET前
[]

// GET後
[
  {
    id: 1,
    content: 'トマトを買いに行く',
  },
  {
    id: 2,
    content: 'ゴミ出しする',
  },
  {
    id: 3,
    content: '散歩する',
  },
]

PUT：作成・更新

データを作成・変更するためのメソッド。
TODOリストならば、追加済みのタスクの内容を変更するときに使います。

例：『トマトを買いに行く』というタスクを『リンゴを買いに行く』という内容に変更する

// PUT前
[
  {
    id: 1,
    content: 'トマトを買いに行く',
  }
]

// PUT後
[
  {
    id: 1,
    content: 'リンゴを買いに行く',
  }
]

また、タスクをピン留めするときにも使います。

例：『トマトを買いに行く』というタスクが上部に表示されるよう、ピン留めする

// PUT前
[
  {
    id: 1,
    content: 'トマトを買いに行く',
    isPinned: false,
  }
]

// PUT後
[
  {
    id: 1,
    content: 'トマトを買いに行く',
    isPinned: true,
  }
]

DELETE：削除

データを削除するためのメソッド。
TODOリストならば、追加済みのTODOを削除するときに使います。

例：『トマトを買いに行く』というタスクを削除する

// DELETE前
[
  {
    id: 1,
    content: 'トマトを買いに行く',
  }
]

// DELETE後
[]

POSTとPUTの違い

POSTとの違いは 冪等性（べきとうせい） にあります。
冪等性とは、 『同じ操作を複数回行っても結果が同じである』 という性質のことを言います。

PUTには冪等性があり、POSTには冪等性がありません。

POSTは冪等性がないので、APIを呼んで通信が成功した回数だけ新しいタスクを作成します。

例：『トマトを買いに行く』というタスクの追加APIを10回呼べば、10個のタスクが追加される。

それに対しPUTは、APIを何回呼んでも同じ結果が返ってきます。

例1：『トマトを買いに行く』を『リンゴを買いに行く』というタスクに変更するAPIを10回呼んでも、『リンゴを買いに行く』という結果に変わりはない。

例2：『トマトを買いに行く』というタスクをピン留めするAPIを10回呼んでも、『ピン留めされた』という結果に変わりはない。（ピン留めが外されたりしない）

ちなみにGETもDELETEも冪等性があります。
何回取得しても同じ、何回削除しても同じ。

「え、削除は削除API呼んだ分だけ削除されるのでは？」と思われるかもしれません。
そうです。冪等性がないパターンもありえます。
（ただ、削除する対象をちゃんと指定していれば何回削除しても同じなので、その場合は冪等性があると言えます。）

理解を深めるためにまたTODOリストで考えてみます。
TODOリストに以下のようなタスクが登録されているとします。

[
  {
    id: 1,
    content: 'トマトを買いに行く',
  },
  {
    id: 2,
    content: 'ゴミ出しする',
  },
  {
    id: 3,
    content: '散歩する',
  },
]

上から順番に1つずつ削除する場合は、削除APIを呼んだ分だけタスクが消えていきます。
その場合は冪等性はありません。

ただ、『IDが1のタスクを削除する』という指定があれば、削除APIを何度呼んでも以下の結果になります。
その場合は冪等性があると言えるわけです。

[
  {
    id: 2,
    content: 'ゴミ出しする',
  },
  {
    id: 3,
    content: '散歩する',
  },
]