フロントエンドエンジニアは、WebAPIの「使う側」であります。
ですが、API、DataBaseも自分で手を動かして構築し、RESTサービスを包括的に経験する事で視野を広げようと思います。
本編は入門編なので、まずは概要をまとめました。
実際の開発はNode.js, Express, React, SQLite3を使い、続編で紹介します。
RESTとは：
REST（REpresentational State Transfer）は、HTTPプロトコル作成者の一人であるRoy Fieldingによって2000年頃に提案されたWebのアーキテクチャスタイル（設計思想）。
ネットワークシステムの代表的なアーキテクチャスタイルであるクライアント/サーバから派生したもの、複数のソフトウェアを連携させるのに適しています。
RESTful APIは、次の4つのRESTの原則に従って設計されたAPIとなります。
1. アドレス可能性
そのアプリケーションが提供する情報やデータを全て「リソース」という考え方で表現する。
そのリソースはURIによって一意に指し示す事ができると言う事。
GET: https://api.hoge.com/v5/tickets/12345
ticketID=12345のデータをGETメソッドで取得できると言う事がこのURIで読み取れる。
2. ステートレス性
ステートレス性はセッション等のクライアントの「アプリケーション状態」をサーバー側が持たないと言う事。
フロントからHTTPリクエストを送る時にログインの時にサーバーからもらったtokenなどをheaderに毎回付けて送る事でAPIとの認証を行っている。また、リクエスト毎に必要な情報を毎回全てリクエストに載せているのはすべてのHTTPリクエストを完全に分離させる、つまり、リクエストを受けてレスポンスを返したら完結させる為です（それによりサーバー負荷が減らせる）
有名なハンバーガーの注文がわかりやすいです。要は、リクエストの度に「はじめまして、僕はXXXと申します。このリクエストをお願いできますか？」と毎回最初に自己紹介が必要になる感じですね。
3. 接続性
ある情報に「別の情報へのリンク」を含めることができること。そして、リンクを含めることで「別の情報に接続すること」ができること。
これはレスポンスの中にURLなどを含む事を指します。
4. 統一インターフェース
情報の取得、作成、更新、削除といったリソースの操作は、すべてHTTPメソッドを利用すること。この場合のHTTPメソッドとは、取得「GET」、作成「POST」、更新「PUT」、削除「DELETE」を使用することで統一と認識のしやすさを図ることが出来ます。
RESTの大きな特長はHTTPの技術を効果的に活用したものであり、Web技術との親和性が高いからWebサービスやWebアプリケーションの開発に活用されている。
クライアントとサーバーの分離
前述の通り、RESTサービスはクライアント・サーバーから派生しました。両者を分離させて開発し、お互いのことを関与しないでよくなります。双方で疎通の決まりごと（リクエスト・レスポンスのインターフェース）を守っていれば、クライアントとサーバー個々で開発・改修が可能になります。
このクライアントサーバーモデルの利点はPC、スマホアプリと複数のプラットフォームから同じAPIを使う事が可能になる。
REST APIの設計：
①エンドポイント定義
エンドポイントはHTTPメソッドとURLの組み合わせです。
HTTPメソッドはこの４つが基本です
GET 取得
POST 追加
PUT 更新
DELETE 削除
基本的に、この4つの処理でほとんどのシステム処理を完結させることができます。
URLをリソースと見なします。
HTTPメソッドとURLの組み合わせを、
何＝リソース(URL) をどうする ＝HTTPメソッド
と言う形式で定義します。
例を出しましょう。
GET: http://hogehoge.com/api/tickets
何を＝チケット情報 どうする＝GET / 取得
POST: http://hogehoge.com/api/tickets
何を＝チケット情報 どうする＝POST / 登録
URL設計で意識すべき点
・URLにapiを含めてAPIとわかる様にする
http\://hogehoge.com/api
http\://api.hogehoge.com
・URLにAPIのバージョンを含める
http\://api.hogehoge.com/v1.0/users/
・URLに動詞は使わず、名詞の複数形だけで構成する
user一覧
http\://api.hogehoge.com/v1.0/users
user ID：1の情報を取得
http\://api.hogehoge.com/v1.0/users/1
users ID:1のphoto一覧取得
http\://api.hogehoge.com/v1.0/users/1/photos
・アプリケーションや言語に依存する拡張子は含めない
URL内に.phpや.plなど言語に関係した拡張子を付けないようにする。悪意あるユーザーから脆弱性を突かれる要因にもなります。
・リソースの構造が分かるようにする
URLを見ただけで、リソースがどこに属しているか、どんなでーたをもってるかのデータ構造が分かるようにする。
このURLを見ると、userは写真のデータを持っている事がわかります。
http\://api.hogehoge.com/v1.0/users/1/photos
②リクエストおよびレスポンスのJSONの定義
これらは開発において、まずUIと仕様が決まり、それを基にどういうデータが必要か、ユーザーがどう使うのかも踏まえて、定義する必要があると思います（この作業は想像力が必要）
例えば、ログインページのAPIに何が必要なのか？を考えると。
POSTメソッドで、URLは/loginとし、emailとpasswordをサーバー側の認証に使うので、フロントはこれらをリクエストボディに含める必要があります。
リクエストにAPI側で必要なデータを渡し、レスポンスにはフロント側で欲しいデータを返してもらう。（場合によってはフェッチし直して、取り直すケースもある）
まとめ
次は実際にNode.js, Express, React, SQLite3を使って簡単なRESTサービスを構築した時の学びを紹介したいと思います。