[React] Reactの学習をします（2-2）Node.js による API サーバー開発

Reactの学習をします（2-2）

引き続き、Reactの学習をしています。

前回の記事　：　[React] Reactの学習をします（2-1）レビューサイトを作ろう

教材

Reactチュートリアル2：レビューサイトを作ろう

引き続き、likr さんが公開している「Reactチュートリアル2：レビューサイトを作ろう」という記事を教材に学習させて頂きます。

素晴らしい教材をありがとうございます。

成果物

このチュートリアル2につきましては、チュートリアルの通りに作成し既にNetlifyに公開させて頂いております。

こちらです　→　日大文理ラーメンレビュー

学習日記

既に作成済ですが、少しずつチュートリアルの内容を読み返してみたいと思います。

※ 教材から箇条書き的に抜粋させて頂きます。

Node.js による API サーバー開発

・Node.js 用の人気のある Web フレームワークとして Express があります。ここでは Express を使って API サーバーを実装していきます。

・本チュートリアルでは、Node.js のバージョン 14 を前提に説明を行います。

私のローカル環境では nodist がインストールされてあり、古いバージョンのNode.jsを入れてありました。

チュートリアルと同じ環境にするため バージョン14 をさらにインスールしました。

・Express では app.get(path, handler) のように書くことで、path に対する GET リクエストを handler の関数で処理することができます。

・POST リクエストであれば、app.post 、PUT と DELETE もそれぞれ app.putとapp.delete で同じように書くことができます。

・実際にエンドポイント /restaurants に対する処理を書くと以下のようになります。

app.get("/restaurants", async (req, res) => {
  const limit = +req.query.limit || 5;
  const offset = +req.query.offset || 0;
  const restaurants = data.restaurants;
  res.json({
    rows: restaurants.slice(offset, offset + limit),
    count: data.restaurants.length,
  });
});

・handler の関数の第 1 引数にはリクエストの情報を含んだ Request オブジェクトが、第 2 引数にはレスポンスを返すための Response オブジェクトが渡されます。

・クエリ文字列に含まれるパラメータは req.query から取り出すことができます。

・レスポンスを JSON 形式で返すためには res.json にオブジェクトを渡します。

このような形で、まず /restaurants , /restaurants/:restaurantId , /restaurants/:restaurantId/reviews の３つの get について処理を書いていきます。

JavaScript リファレンス

・Array.prototype.slice()

・Array.prototype.find()

・Array.prototype.filter()

（つづく）