APIって何？RESTを理解する

このページで学ぶこと

• API とは何かがわかる
• REST API の基本的な設計ルールがわかる
• HTTP メソッドと URL の設計がわかる

API とは

API（Application Programming Interface） は、「プログラム同士が通信するための窓口」です。

Webアプリでは、フロントエンド（ブラウザ上のReact）とバックエンド（サーバー上のデータ処理）が分かれています。
フロントエンドは API を通じてバックエンドにリクエストを送り、データを受け取ります。

REST API とは

REST（Representational State Transfer） は、Web API の設計スタイルの一つです。
「URLでリソースを表し、HTTPメソッドで操作を表す」というシンプルなルールです。

HTTPメソッドと操作の対応

URL の設計

URLはリソース（データの種類）を表します。動詞は使わず、名詞で表します。

❌ 悪い例（動詞が入っている）
/getTodos
/createTodo
/deleteTodo?id=1

✅ 良い例（名詞でリソースを表す）
GET    /api/todos       → Todo一覧を取得
POST   /api/todos       → Todoを新規作成
GET    /api/todos/1     → id=1のTodoを取得
PUT    /api/todos/1     → id=1のTodoを更新
DELETE /api/todos/1     → id=1のTodoを削除

JSON とは

API のやり取りには JSON（JavaScript Object Notation） という形式が使われます。

{
  "id": 1,
  "title": "牛乳を買う",
  "completed": false,
  "createdAt": "2024-04-01T09:00:00Z"
}

JavaScript のオブジェクトに似た形式で、ほぼすべての言語で読み書きできます。

実際のAPIをcurlで叩いてみよう

ターミナルで以下を実行してみましょう。

# JSONPlaceholderのAPIを叩いてみる
curl https://jsonplaceholder.typicode.com/todos/1

以下のようなJSONが返ってくれば成功です。

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

• Windows: PowerShell か Git Bash で実行する
• Mac: ターミナルで実行する

ステータスコード

APIのレスポンスにはステータスコードが含まれます。

確認しよう

• API とは何かを自分の言葉で説明できる
• GET / POST / PUT / DELETE の違いがわかる
• URLの設計（名詞でリソースを表す）がわかる
• curl でAPIを叩いてJSONレスポンスを確認できた

AIに聞いてみよう

「REST APIとGraphQL APIの違いを初心者向けに説明してください」

次のステップ

→ Next.jsでAPIを作ろう