ローカルサーバーを簡単に作れるNode.jsのライブラリ「JSON Serve」

ローカルサーバーのセッティング

Node.jsのライブラリJSON Serverを使います。

yarn add json-server --dev

package.jsonと同じ階層にdb.jsonを作成します。

db.json

{
  "todos":[
    {
      "id": 1,
      "content": "ローカルで使えるサーバーを用意する",
      "done": true
    },
    {
      "id": 2,
      "content": "サーバーで利用するデータを作成する",
      "done": false
    },
    {
      "id": 3,
      "content": "用意したデータの表示を確認する",
      "done": false
    }
  ]
}

データができたらyarn startで起動させます。
次にサーバーを起動させます。

npx json-server --watch db.json --port 3100

--watchをつけるとdb.jsonの更新を監視してくれます。
--port 3100で任意のポート番号を指定できます。

http://localhost:3100/todosに接続することでdb.jsonに作成したJSONデータがブラウザに表示されると思います。

サーバーと通信できるようにする

HTTP通信を行うためのNode.jsのライブラリaxiosをインストールします。
GETやPOSTのHTTPリクエストを使ってデータの取得や更新ができます。

yarn add axios

インストールが終わったあと下記のように記述することで利用できます。
定義したtodoDataUrlを利用してデータの取得や更新追加を行います。

App.js

import axios from 'axios';

const todoDataUrl = 'http://localhost:3100/todos';