REST API入門｜HTTPメソッド・JSON・fetchの使い方を初心者向けに解説

APIとは何か

「API」という言葉はよく耳にしますが、初心者には掴みにくい概念です。身近な例で説明します。

天気アプリを想像してください。 スマートフォンの天気アプリは、気象庁や気象サービスが持つ気象データを表示しています。アプリ開発者が自前で気象観測所を建てているわけではありません。気象サービスが提供する「API」を通じてデータを受け取り、表示しているのです。

APIは「アプリケーション同士がデータをやり取りするための窓口」と理解すると分かりやすいです。レストランで言えば、お客さん（アプリ）がウェイター（API）に注文し、厨房（サーバー）が料理（データ）を返してくれるイメージです。

---

RESTとは

**REST（Representational State Transfer）**は、APIを設計するための考え方・原則のセットです。RESTに従って設計されたAPIを「REST API」または「RESTful API」と呼びます。

RESTの主な原則：

1. URLでリソースを表す： https://api.example.com/users/123 は「IDが123のユーザー」を表す
2. HTTPメソッドで操作を表す： 取得・作成・更新・削除をHTTPメソッドで区別する
3. ステートレス： サーバーはリクエストごとに独立して処理する（以前のリクエストを記憶しない）

---

HTTPメソッドとCRUD操作の対応

Webアプリの基本操作「CRUD」とHTTPメソッドの対応関係を覚えましょう。

HTTPメソッド	操作	CRUD	例
GET	データを取得する	Read	ユーザー一覧を取得
POST	データを新規作成する	Create	新しいユーザーを登録
PUT	データを全て更新する	Update	ユーザー情報を全て上書き
PATCH	データを一部更新する	Update	メールアドレスだけ変更
DELETE	データを削除する	Delete	ユーザーを削除

URLとメソッドを組み合わせた設計例：

GET    /api/posts        → 投稿一覧を取得
GET    /api/posts/5      → IDが5の投稿を取得
POST   /api/posts        → 新しい投稿を作成
PUT    /api/posts/5      → IDが5の投稿を全て更新
PATCH  /api/posts/5      → IDが5の投稿を一部更新
DELETE /api/posts/5      → IDが5の投稿を削除

---

JSONとは

APIのレスポンスには主に**JSON（JavaScript Object Notation）**形式が使われます。JavaScriptのオブジェクトに似た、テキストベースのデータフォーマットです。

{
  "id": 1,
  "name": "田中太郎",
  "email": "tanaka@example.com",
  "age": 28,
  "isActive": true,
  "tags": ["エンジニア", "フロントエンド"],
  "address": {
    "city": "東京",
    "zipCode": "100-0001"
  }
}

JSONのルール：

• キー（プロパティ名）は必ずダブルクォートで囲む
• 文字列値もダブルクォートで囲む
• 数値、真偽値（true/false）、null、配列、オブジェクトが使える
• 末尾のカンマは不可（JavaScriptとの違いに注意）

JavaScriptでJSONを扱う

// オブジェクト → JSON文字列
const user = { name: '田中太郎', age: 28 };
const jsonString = JSON.stringify(user);
console.log(jsonString);
// '{"name":"田中太郎","age":28}'

// JSON文字列 → オブジェクト
const parsed = JSON.parse(jsonString);
console.log(parsed.name); // '田中太郎'

---

fetchの基本的な使い方

JavaScriptの fetch 関数を使ってAPIを呼び出す方法を学びます。fetch はPromiseを返すため、async/await と組み合わせて使います。

GETリクエスト（データ取得）

async function fetchPost(id) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

    // レスポンスが成功かチェック（200〜299の場合true）
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    // レスポンスボディをJSONとして解析
    const post = await response.json();
    return post;
  } catch (error) {
    console.error('取得失敗:', error.message);
    return null;
  }
}

// 使い方
const post = await fetchPost(1);
console.log(post.title); // 投稿のタイトルが表示される

POSTリクエスト（データ送信）

async function createPost(title, body, userId) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',  // JSONを送ることを明示
      },
      body: JSON.stringify({ title, body, userId }),  // オブジェクトをJSON文字列に変換
    });

    if (!response.ok) {
      throw new Error(`作成に失敗しました: ${response.status}`);
    }

    const newPost = await response.json();
    console.log('作成されたID:', newPost.id);
    return newPost;
  } catch (error) {
    console.error(error.message);
    return null;
  }
}

PATCHリクエスト（一部更新）

async function updatePostTitle(id, newTitle) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ title: newTitle }),
    });

    if (!response.ok) {
      throw new Error(`更新に失敗しました: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error(error.message);
    return null;
  }
}

DELETEリクエスト（削除）

async function deletePost(id) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
      method: 'DELETE',
    });

    if (!response.ok) {
      throw new Error(`削除に失敗しました: ${response.status}`);
    }

    console.log(`投稿ID:${id} を削除しました`);
    return true;
  } catch (error) {
    console.error(error.message);
    return false;
  }
}

---

無料APIで試してみよう（ハンズオン）

JSONPlaceholder（https://jsonplaceholder.typicode.com）は、REST APIの練習に最適な無料のフェイクAPIです。実際のデータベースは変更されませんが、全てのCRUDリクエストに正しいレスポンスを返してくれます。

ブラウザの開発者ツール（F12）→ Console タブを開いて、以下のコードをそのまま貼り付けて実行してみましょう。

// ユーザー一覧を取得して表示
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
users.forEach(user => {
  console.log(`${user.name} (${user.email})`);
});

---

レスポンスのHTTPステータスコード

APIを使う際によく目にするHTTPステータスコードを覚えておきましょう。

コード	意味
200 OK	成功
201 Created	作成成功（POSTで返ることが多い）
400 Bad Request	リクエストの内容が不正
401 Unauthorized	認証が必要（APIキーなど）
403 Forbidden	権限がない
404 Not Found	リソースが見つからない
500 Internal Server Error	サーバー側のエラー

---

参考書籍

---

まとめ

REST APIの基本をまとめます。

• APIはアプリケーション間のデータのやり取りの窓口
• RESTful APIはURLでリソースを表し、HTTPメソッドで操作を表す設計原則
• JSONはAPIでデータをやり取りする際の標準フォーマット
• fetchを使い、GETで取得・POSTで作成・PATCHで更新・DELETEで削除
• レスポンスの ok プロパティで成功・失敗を確認し、try/catch でエラーを処理する

JSONPlaceholderを使ったハンズオンで実際に手を動かすことで、REST APIの感覚を掴んでみてください。