2025年12月13日

新卒エンジニアが整理するREST APIの基本

システム開発, レポート, 2025アドベントカレンダー, RESTAPI

author | ryoki.okamoto

本記事はアジアクエスト Advent Calendar 2025の記事です。

自己紹介

デジタルエンジニアリング部の岡本です。

新卒エンジニアとしてキャリアをスタートした際に直面したREST APIへの疑問を解消すべく、本記事では自身の知識を整理しながら、その基本と設計についてまとめていきます。

過去の私と同じようにAPIの仕組みを理解したいと考えている方の一助となれば幸いです。

学習しようと思ったきっかけ

エンジニアとして最初に携わったデモプロジェクトで、お天気APIを利用する機会がありました。

REST APIに触れたのはこの時が初めてで、
最低限の実装はクリアできたものの、その仕組みや設計について深く理解するには至りませんでした。

表面的な動作の理解のみで終わってしまったという感覚がずっと心に残っていたため、
APIを根本からしっかり理解したいという思いが強くなりました。

そこで今回、自身の知識を整理し、アウトプットする目的も兼ねて、REST 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をフロントエンドからどう使うのか？

フロントエンドからの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の導入方法とは？

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で動くの？

結論から言うと、REST APIはCDN上で単体では動作しません。

その理由は以下の通りです。

CDNは、HTML、CSS、JavaScript、画像などの静的ファイルを高速に配信するための仕組みです。
REST APIの処理にはサーバー側での動的な実行が必要であり、CDN上で単体で完結させることはできません。

つまり役割はこう分かれます。

静的コンテンツ（HTML/CSS/JSなど）：CDNに配置（◎）
APIによる動的処理：バックエンドサーバーで実行（◎）

REST APIを使うのにターミナル操作は必要？

APIの「利用」だけであれば不要です。

フロントエンド側でfetch()を記述するだけで通信が可能なため、ターミナル操作は必要ありません。APIを開発・構築する際は必要となります。

Node.jsやExpressといったバックエンドでAPIを構築する際には、ターミナル操作が必須です。具体的には、

npm installによるパッケージのインストール
ローカルサーバーの起動
追加パッケージの管理
といった作業でターミナルを使うことになります。

つまり、
APIの利用 → ターミナル不要
APIの開発 → ターミナル必須

ReactでREST 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：完了"));