【Webアプリ開発】REST API入門②　REST APIって何？

本記事は下記の記事の続きです。

前回の記事でSPAについてざっと解説しましたが、SPAではREST APIがよく使われています。

本記事ではREST APIについて簡単に紹介します。

RESTとは

RESTとはRepresentational State Transferの略です。

RESTについては「Roy Thomas Fielding」さんの論文「Architectural　Styles and the Design of Network-based　Software Architectures」の中で詳しく説明されています。

下記に論文のリンクを貼っておきます。

Architectural Styles and the Design of Network-based Software Architectures

RESTについてはネット上の多数の記事で詳しく説明されていますので、興味のある方はネットで検索してみてください。

例えば下記の記事ではRESTの基礎知識についてわかりやすく説明されています。

いまさら聞けないRESTの基礎知識、JAX-RSを使ったREST APIの作り方と使い方

REST APIとは

RESTにおいて最も重要なのはリソースという概念で、データベースなどに保存されているデータのことを指します。

リソースはUniform Resource Identifier（URI）で表される一意的なアドレスを持っており、クライアントはHTTPメソッド（POST/GET/PUT/DELETEなど）とURIを使ってリソースに対してCRUD（Create/Read/Update/Delete）操作を行います。

CRUDとHTTPメソッドとURIの関係は次のようになります。

リソースに対してCRUD操作を行えるようにしたものを「REST API」と呼んだりします。

REST APIについては具体例を示した方がわかりやすいと思いますので、次の２つを紹介します。

JSONPlaceholderのREST API
RealWorldのREST API

JSONPlaceholderのREST API

JSONPlaceholderは擬似的なREST APIを提供しているサイトで、REST APIの練習に最適なサイトです。

下図はJSONPlaceholderの公式サイトです。

下記にリンクを貼っておきます。

JSONPlaceholder - Free Fake REST API

JSONPlaceholderには下図のように６つのリソースが存在します。

下図ではJSONPlaceholderのリソースに対してCRUD操作を行うためのHTTPメソッドとURIが紹介されています。

例えば、ブラウザに「https://jsonplaceholder.typicode.com/posts」を入力してENTERキーを押す（GET操作）と「posts」というリソースの全データが表示されます。

また、「https://jsonplaceholder.typicode.com/posts/1」を入力してENTERキーを押す（GET操作）と「posts」リソースの中のidが1のデータのみ表示されます。

RealWorldのREST API

下図がRealWorldのGitHubリポジトリです。

上図の青線箇所ではフロントエンド側がReact、バックエンド側がDjangoとなっていますが、様々なフレームワークの組み合わせで赤線箇所のようなBlogアプリ（Conduitと呼ばれる）を実現したものがRealWorldというGitHubリポジトリにまとめられています。

下記にリンクを貼っておきます。

GitHub - gothinkster/realworld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

RealWorldでは下図のように「RealWorld API」の仕様を決めています。

下図の赤線箇所は「ログイン認証」と「ユーザー登録」のAPIのHTTPメソッドとURIを示しています。

RealWorldのBlogアプリで使われているHTTPメソッドとURIをまとめると下記のようになります。

POST /api/users/login
POST /api/users

GET /api/user
PUT /api/user

GET /api/profiles/:username
POST /api/profiles/:username/follow
DELETE /api/profiles/:username/follow

GET /api/articles
GET /api/articles/feed
GET /api/articles/:slug
POST /api/articles
PUT /api/articles/:slug
DELETE /api/articles/:slug

POST /api/articles/:slug/comments
GET /api/articles/:slug/comments
DELETE /api/articles/:slug/comments/:id

POST /api/articles/:slug/favorite
DELETE /api/articles/:slug/favorite

GET /api/tags

例えば、下図のBlogアプリのホーム画面で使用されているAPIについて簡単に紹介します。

上図の画面を表示するために、ブラウザはサーバーに対して次のリクエストを投げて必要なJSONデータを取得しています。

GET http://localhost:3000/api/articles
GET http://localhost:3000/api/tags

試しに、ブラウザに「http://localhost:3000/api/articles」を入力してENTERキーを押す（GET操作）と「articles」というリソースの全データが表示されます。

また、「http://localhost:3000/api/tags」を入力してENTERキーを押す（GET操作）と「tags」というリソースの全データが表示されます。

以上のように、RealWorldのBlogアプリはフロントエンドとバックエンドがREST APIでやりとりを行うことで実現されています。

参考記事の紹介

本記事ではRealWorldのBlogアプリのAPIについて簡単に紹介しましたが、過去の記事でこのアプリの動かし方を紹介しています。

RealWorldのBlogアプリを自分のパソコンで動かしてみたいという方は下記の記事をご確認ください。

本記事ではREST APIについて簡単に紹介しましたが、次回以降の記事ではもう少し詳しくREST APIについてみていこうと思います。