「APIって何となくわかるけど、REST APIって何が違うの?」

正直、当時の僕もそうでした。フロントエンドの学習を始めて、JavaScriptの基礎は掴めてきたのに、APIという単語が出てきた瞬間に頭が止まる。「なんか通信するやつ?」くらいの理解で止まっていました。

結論から言うと、**REST APIは「Webサービス間でデータをやり取りするためのルール集」**です。そしてこのルールを理解すると、フロントエンドでできることが一気に広がります。天気予報を取得するアプリも、SNSの投稿を表示するページも、裏側でREST APIが動いています。

この記事では、文系出身・未経験からエンジニアになった僕が、REST APIをゼロから解説します。「なんとなくわかる」から「実際に使える」レベルになることが目標です。

---

REST APIとは何か

APIの基本概念

まずAPIから整理します。API（Application Programming Interface）とは、**ソフトウェア同士がやり取りするための「窓口」**です。

プログラミング的に言うと、レストランのウェイターに近いです。お客さん（フロントエンド）がウェイター（API）に「ハンバーグ定食を1つ」と注文すると、ウェイターがキッチン（サーバー/データベース）に伝えて、料理をテーブルまで持ってくる。お客さんはキッチンの中がどうなっているか知らなくていい。

Webの世界でも同じです。ブラウザやアプリがAPIに「このユーザーの情報をください」とリクエストを送ると、APIがデータベースから取ってきて返してくれる。フロントエンドはDBの構造を知らなくていい。

RESTとは

REST（Representational State Transfer）は、API設計の**アーキテクチャスタイル（考え方・ルール）**です。「REST APIに従って作られたAPI」のことを「RESTful API」とも言います。

RESTの主なルールは以下の通りです：

1. リソースはURLで表す
   例: /users/123（ユーザーID 123の情報）
       /posts（投稿一覧）

2. 操作はHTTPメソッドで表す
   GET     → データを取得する
   POST    → データを新規作成する
   PUT     → データを更新する（全体）
   PATCH   → データを部分更新する
   DELETE  → データを削除する

3. データはJSONで返す（多くの場合）

ここがポイントなんですが、REST APIはURL（エンドポイント）とHTTPメソッドの組み合わせで「何をしたいか」を表現します。

---

HTTPメソッドを理解する

4つの基本操作（CRUD）

プログラミングの世界では、データ操作の基本を「CRUD」と呼びます：

操作	意味	HTTPメソッド	例
Create	作成	POST	新しいユーザーを登録する
Read	読み取り	GET	ユーザー情報を取得する
Update	更新	PUT/PATCH	ユーザー名を変更する
Delete	削除	DELETE	ユーザーを削除する

正直、当時の僕はGETとPOSTしか知らなかったです。フォームのmethod="get"かmethod="post"くらいの認識でした。でも実際にAPIを扱い始めると、この4つを使い分けることが設計の基本になります。

エンドポイントの命名規則

RESTでは、URLの命名にも作法があります：

# 良い例（名詞・複数形）
GET    /users          → ユーザー一覧を取得
POST   /users          → ユーザーを新規作成
GET    /users/123      → ID=123のユーザーを取得
PUT    /users/123      → ID=123のユーザーを更新
DELETE /users/123      → ID=123のユーザーを削除

# 悪い例（動詞を入れない）
GET /getUsers          → NG
POST /createUser       → NG
DELETE /deleteUser/123 → NG

「URLはリソース（何か）を指す。操作はHTTPメソッドで表す」というわけで、URLに動詞を入れるのは設計上アンチパターンとされています。

---

JSONを理解する

APIはJSONでデータを返す

REST APIのレスポンスは、多くの場合JSON（JavaScript Object Notation）形式です。

{
  "id": 123,
  "name": "中村ソウマ",
  "email": "souma@example.com",
  "role": "engineer",
  "skills": ["React", "TypeScript", "Node.js"],
  "createdAt": "2026-01-15T09:00:00Z"
}

JSONは人間も読めて、機械も処理しやすい形式です。JavaScriptのオブジェクトに似た構造なので、フロントエンドエンジニアには特に馴染みやすいです。

JavaScriptでJSONを扱う

// APIからデータを取得する（fetch API）
async function getUser(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const user = await response.json(); // JSONをJavaScriptオブジェクトに変換
  console.log(user.name); // "中村ソウマ"
  return user;
}

// データを送信する（POST）
async function createUser(userData) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData), // オブジェクト→JSON文字列に変換
  });
  const newUser = await response.json();
  return newUser;
}

JSON.stringify()でオブジェクト→JSON文字列、response.json()でJSON→オブジェクト。この変換を覚えておけば、基本的な操作はできます。

JavaScriptのPromise/async-awaitの基礎が不安な方は、先にJavaScript入門ガイドで非同期処理を押さえておくと、上記のコードが理解しやすくなります。

---

ステータスコードを覚える

APIのレスポンスには、処理結果を示すHTTPステータスコードが含まれます。よく使われるものを整理します：

主要なステータスコード

2xx系（成功）
200 OK          → 正常に取得・処理できた
201 Created     → 新規作成に成功した
204 No Content  → 削除成功（返すデータなし）

4xx系（クライアントのエラー）
400 Bad Request    → リクエストの形式が間違っている
401 Unauthorized   → 認証が必要（ログインしていない）
403 Forbidden      → 権限がない（ログインしていても閲覧不可）
404 Not Found      → リソースが見つからない
422 Unprocessable  → バリデーションエラー

5xx系（サーバーのエラー）
500 Internal Server Error → サーバー内部でエラーが起きた
503 Service Unavailable   → サーバーが一時的に利用不可

ここがポイントなんですが、4xxはフロントが悪い、5xxはサーバーが悪いと覚えると原因切り分けが速くなります。デバッグのとき、まずステータスコードを確認するクセをつけると良いです。

---

実際にAPIを試してみる

公開APIで練習する

いきなり自分でAPIを作らなくても、公開されているAPIで練習できます。おすすめはJSONPlaceholder（https://jsonplaceholder.typicode.com）です。

ブラウザのコンソールを開いて（F12→Console）、以下を貼り付けてみてください：

// 投稿一覧を取得
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(res => res.json())
  .then(data => console.log(data));

// ID=1の投稿を取得
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => console.log(data));

実際にデータが返ってくるのを見ると、「これがAPIか」と体感できます。

curlコマンドで試す

ターミナルからも確認できます：

# データ取得（GET）
curl https://jsonplaceholder.typicode.com/posts/1

# データ作成（POST）
curl -X POST https://jsonplaceholder.typicode.com/posts \
  -H "Content-Type: application/json" \
  -d '{"title": "テスト投稿", "body": "本文です", "userId": 1}'

エンジニアとして働き始めると、APIのデバッグにcurlやPostmanを使う場面が増えます。ターミナル操作と合わせて覚えておくと便利です（Linuxコマンドの基礎についてはLinuxコマンド入門の記事も参照してください）。

---

認証（Authentication）の基本

実際のAPIでは、認証が必要なエンドポイントが多いです。代表的な方式を紹介します。

APIキー認証

最も単純な認証方式。APIキーをヘッダーやクエリパラメータで渡します：

// ヘッダーにAPIキーを付ける
fetch('https://api.example.com/data', {
  headers: {
    'X-API-Key': 'your-api-key-here',
  }
});

// クエリパラメータで渡す場合
fetch('https://api.example.com/data?api_key=your-api-key-here');

JWT（JSON Web Token）認証

ログイン後のAPIアクセスでよく使われます：

// ログインしてトークン取得
const loginResponse = await fetch('https://api.example.com/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'user@example.com', password: 'password' })
});
const { token } = await loginResponse.json();

// 取得したトークンをAuthorizationヘッダーに付ける
const userResponse = await fetch('https://api.example.com/users/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
  }
});

---

REST APIを使う開発の流れ

フロントエンドエンジニアとして、実際の開発ではこういう流れになります：

Step 1: APIドキュメントを確認する
  └─ エンドポイント・リクエスト形式・レスポンス形式を把握

Step 2: テストツールで動作確認
  └─ Postman / curl / ブラウザのfetch等で叩いてみる

Step 3: フロントエンドに実装
  └─ fetch / axios で組み込む

Step 4: エラーハンドリングを追加
  └─ ステータスコードで分岐、ユーザーへのフィードバック

Step 5: ローディング・再取得の実装
  └─ UX向上のため

TypeScriptを使っているなら、APIのレスポンス型を定義することで補完が効いて開発効率が上がります。TypeScriptの詳しい使い方はTypeScript入門の記事を参考にしてください。

また、Node.jsを使って自分でAPIサーバーを作ることもできます。バックエンド側も学ぶと、フルスタックで開発できるようになります。詳しくはNode.js入門の記事をどうぞ。

将来的にはREST APIの代替としてGraphQL vs REST API 徹底比較2026という選択肢も学んでおくと視野が広がります。RESTで詰まりを感じ始めたタイミングで読むのがおすすめです。

最近では軽量なAPIフレームワークとしてHono.jsが注目されています。Node.js・Deno・Cloudflare Workersで動く薄いフレームワークで、REST APIサーバーを素早く作るのに向いています。詳しくはHono.js入門FAQ 2026 — 初心者の疑問に全部答えますで解説しています。

---

まとめ

REST APIの要点をまとめます：

概念	ポイント
API	ソフトウェア同士の窓口
REST	URL×HTTPメソッドで操作を表すルール
HTTPメソッド	GET/POST/PUT/DELETE でCRUD操作
JSON	APIのデータ形式
ステータスコード	2xx成功 / 4xxクライアントエラー / 5xxサーバーエラー

大事なのは、まず触ってみることです。JSONPlaceholderのような公開APIで実際にデータを取得してみると、理解が一気に進みます。

僕も最初はAPIが怖くて後回しにしていましたが、触ってみたら「なんだ、思ったよりシンプルだ」と感じました。フロントエンドのスキルをさらに広げたい方は、独学ロードマップの記事も合わせてどうぞ。

まずは公開APIを1つ叩いてみることから始めてみてください。そこからすべてが始まります。

---

REST APIに関するよくある質問

Q: REST APIとGraphQLは何が違うの？

A: REST APIは「エンドポイントごとに返すデータが決まっている」のに対して、GraphQLは「クライアントが欲しいデータの形を指定できる」という違いがあります。REST APIは学習コストが低く標準的なCRUD操作に向いています。GraphQLは複数リソースを一度に取得したい場面や、モバイルアプリのように「無駄なデータを取得したくない」ケースで効果を発揮します。GraphQL vs REST API 徹底比較2026で詳しく比較しています。

Q: fetchとaxiosはどちらを使うべき？

A: ブラウザ・Node.js両方で動かすならaxiosが便利です。エラーハンドリングが簡潔に書けて、リクエストのインターセプターも使えます。一方、モダンなブラウザや最新Node.js（v18+）ならfetchで十分です。大きなプロジェクトでなければfetchを使い、axiosが必要になったらその時点で乗り換えるくらいの判断で良いです。

Q: REST APIの設計を学ぶにはどうすればいい？

A: まず実際にAPIを「使う」側から始めるのがおすすめです。JSONPlaceholderのような公開APIをfetchで叩いて、レスポンスの構造を見てみる。その後、Node.jsで簡単なAPIサーバーを自分で作ってみると、設計の「なぜ」が理解できます。Node.js入門の記事でAPIサーバーの作り方も触れています。

Q: APIのレスポンスにTypeScriptの型をつけるには？

A: interfaceかtypeでレスポンスの型を定義して、fetchの戻り値をキャストします。TypeScript入門の記事でAPIレスポンスへの型付け方法を解説しています。型をつけることでVSCodeの補完が効いてミスが激減します。

---

独学でのAPI実装に行き詰まりを感じた場合、プログラミングスクールという選択肢もあります。現役エンジニアにレビューしてもらいながら学ぶことで、独学の何倍もの速度で実力がつくケースがあります。スクール選びの参考にプログラミングスクール比較の記事も確認してみてください。

---

【2026年4月追記】REST APIとGraphQLの使い分け

最近チームの新メンバーから「GraphQLとREST APIはどう使い分けるの？」と聞かれる場面が増えました。簡潔に言うと、REST APIは「標準的なCRUD操作に向いていて学習コストが低い」、GraphQLは「複雑なデータ取得を柔軟にカスタマイズしたい場合に強い」です。GraphQL vs REST API 徹底比較2026で詳しくまとめています。REST APIをしっかり理解してからGraphQLに進む順番がおすすめです。

---

【2026年5月追記】tRPCとHonoの台頭 — 2026年のAPI設計トレンド

2026年現在、REST APIとGraphQLの「第3の選択肢」としてtRPCとHonoが現場で採用されるケースが増えています。

tRPCはTypeScriptのプロジェクトでフロントとバックエンドの型を自動で共有できるRPCフレームワークです。RESTのように「エンドポイントを設計する」作業が不要で、バックエンドの関数をフロントから直接呼び出すような感覚で使えます。Next.jsとの相性が良く、フルスタックTypeScriptプロジェクトで急速に採用が広がっています。

Honoは超軽量なWebフレームワークで、Cloudflare Workersをはじめ複数のランタイムで動作します。REST APIサーバーをシンプルに作りたい場合の選択肢として、Expressの後継ポジションに近い扱いを受けています。Hono.js入門FAQ 2026で詳しく解説しています。

ただし、REST APIの基礎知識がないとtRPCもHonoも使いこなせないです。まずこの記事で解説したHTTPメソッド・ステータスコード・JSONの基本を固めてから、興味に応じてこれらの新しいツールに進んでみてください。

---

あわせて読みたい

• CSS FlexboxとGrid完全ガイド｜レイアウトをマスターして脱・初心者【2026年版】
• Git・GitHub入門：バージョン管理の基本をコードで理解する（2026年版）
• Linuxコマンド入門｜エンジニアが最初に覚えるべき基本コマンド30選【2026年版】
• Astroを1ヶ月使ってみた – Next.js使いの正直な感想【2026】