![見出し画像](https://assets.st-note.com/production/uploads/images/58197789/rectangle_large_type_2_00f6aba026a516e6c0a9c60c1ccdfe9a.jpeg?width=1200)
【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」の中で詳しく説明されています。
下記に論文のリンクを貼っておきます。
RESTについてはネット上の多数の記事で詳しく説明されていますので、興味のある方はネットで検索してみてください。
例えば下記の記事ではRESTの基礎知識についてわかりやすく説明されています。
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については具体例を示した方がわかりやすいと思いますので、次の2つを紹介します。
JSONPlaceholderのREST API
RealWorldのREST API
JSONPlaceholderのREST API
JSONPlaceholderは擬似的なREST APIを提供しているサイトで、REST APIの練習に最適なサイトです。
下図はJSONPlaceholderの公式サイトです。
下記にリンクを貼っておきます。
JSONPlaceholderには下図のように6つのリソースが存在します。
下図では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リポジトリにまとめられています。
下記にリンクを貼っておきます。
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についてみていこうと思います。