本記事はアジアクエスト Advent Calendar 2025の記事です。
デジタルエンジニアリング部の岡本です。
新卒エンジニアとしてキャリアをスタートした際に直面したREST APIへの疑問を解消すべく、本記事では自身の知識を整理しながら、その基本と設計についてまとめていきます。
過去の私と同じようにAPIの仕組みを理解したいと考えている方の一助となれば幸いです。
エンジニアとして最初に携わったデモプロジェクトで、お天気APIを利用する機会がありました。
REST APIに触れたのはこの時が初めてで、
最低限の実装はクリアできたものの、その仕組みや設計について深く理解するには至りませんでした。
表面的な動作の理解のみで終わってしまったという感覚がずっと心に残っていたため、
APIを根本からしっかり理解したいという思いが強くなりました。
そこで今回、自身の知識を整理し、アウトプットする目的も兼ねて、REST APIの基本と設計について、改めてテックブログとしてまとめることにしました。
REST APIは、Web上のデータや機能にアクセスするためのルールとして定義されます。基本的な操作は、以下の要素を組み合わせることで実現できます。
URL（どこにアクセスするか）
HTTPメソッド（GET/POST/PUT/DELETEで何をするか）
例えば/usersというURLに対して：
GET→ユーザー一覧を取得
POST→新しいユーザーを作成
このように、URLが「アクセス先」を、HTTPメソッドが実行する操作を明確に示しています。
RESTの基本的な考え方は次の2点です。
データはURLで表す
操作の意味はHTTPメソッドで統一する
HTTPはブラウザに標準で備わっている仕組みのため、ReactやVueなどのフロントエンドからも簡単に扱うことができるのが大きな特徴です。
フロントエンドからのREST API利用は非常にシンプルで、基本はfetch()を使ってURLにアクセスするだけです。
例えば、データを取得するGETリクエストはこう書きます。
fetch(“https://example.com/api/todos”)
.then(res => res.json())
.then(console.log(data));
流れとしては、
fetch()でリクエストを送る
res.json()でJSONに変換
データを扱う（Reactのstateなどに保存）
別なセットアップは不要で、そのまま利用できます。
REST APIの導入は、基本的にバックエンド側の準備を指します。
フロントエンド側では特別なセットアップをすることなく、APIのURLさえあればそのままfetch()で利用できます。
一方、バックエンドでREST APIを構築する際は、サーバー側でURLと処理内容を定義する必要があります。例えばNode.jsとExpressを使えば、次のようにシンプルにAPIの作成が可能です。
const express = require("express");
const app = express();
app.get("/api/todos", (req, res) => {
res. json([{ id: 1, title: "Sample Todo" }]);
});
app.listen (3000):
このように、REST APIの導入とはサーバーが外部から呼び出せる窓口を作ることです。
フロント側は準備不要、バックエンドが必要な構築を行う形になります。
結論から言うと、REST APIはCDN上で単体では動作しません。
その理由は以下の通りです。
CDNは、HTML、CSS、JavaScript、画像などの静的ファイルを高速に配信するための仕組みです。
REST APIの処理にはサーバー側での動的な実行が必要であり、CDN上で単体で完結させることはできません。
つまり役割はこう分かれます。
静的コンテンツ（HTML/CSS/JSなど）：CDNに配置（◎）
APIによる動的処理：バックエンドサーバーで実行（◎）
APIの「利用」だけであれば不要です。
フロントエンド側でfetch()を記述するだけで通信が可能なため、ターミナル操作は必要ありません。APIを開発・構築する際は必要となります。
Node.jsやExpressといったバックエンドでAPIを構築する際には、ターミナル操作が必須です。具体的には、
npm installによるパッケージのインストール
ローカルサーバーの起動
追加パッケージの管理
といった作業でターミナルを使うことになります。
つまり、
APIの利用 → ターミナル不要
APIの開発 → ターミナル必須
フロントエンドでは、fetch()を利用することでREST APIと通信することが可能です。
ここでは、GET/POST/PUT/DELETEといった基本的な操作を、Reactでの実装例とともに紹介します。
主なREST APIは以下の4つです。
GET（取得）
POST（作成）
PUT（更新）
DELETE（削除）
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json())
.then(data => console.log("GET：", data));
fetch ("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify ({
title: "hello",
body: "world",
userId: 1
})
.then(res => res.json())
.then(data => console.log ("POST：", data));
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
title: "updated",
body: "content",
userid: 1
})
.then(res => res.json())
.then(data => console.log("PUT:", data));
fetch ("https://jsonplaceholder.typicode.com/posts/1", {
method: "DELETE"
})
.then(() => console.log ("DELETE：完了"));
これらを使って、自分でTODOアプリを作ってみると理解が一気に進みます。
REST APIの返り値はほぼJSONであり、レスポンスを受け取った後のres.json()による変換処理が必須となります。
REST APIとの通信には必ずネットワーク遅延が伴うため、画面のフリーズを防ぎ、スムーズな処理を実現する非同期処理（async/await）の習得は必須です。
これを自然に使いこなすことで、通信の流れやエラーハンドリングの理解が一気に深まるでしょう。
最初に出たエラーで混乱しがちですが、CORSはエラーではなく、許可されていない外部からのアクセスを防ぐためのブラウザの保護機能だと理解できました。
フロントエンドの役割は、バックエンドが定めた仕様に沿ってAPIを正しく実行することです。APIの設計自体はバックエンドが担っています。
REST APIは、Web上のデータを扱うための共通ルールです。この仕組みを構成する重要な要素は、次の3点に集約されます。
URL
HTTPメソッド
レスポンス（JSON）
これらの要素を深く理解することで、フロントエンド開発の視界が一気に開けるはずです。
表面的な操作で終わらせず、なぜ動くのかという根幹の仕組みから捉えられるようになり、Reactやバックエンドに関する学習効率も大きく向上するでしょう。