ReactでDB操作(概要編)

こんにちは、なかにしです。

今回は　React × DBです！

ついにReactくんがただのView表示野郎から、
DB連携できるスーパースターになるときが来ました。

本当はLaravelに突っ込んで動かしたいところですが、
時間の都合上モックサーバーで動かしていきます。

モックサーバーはローカルで簡単に通信できる簡易サーバーです。
バックエンド側がまだできてないときとかに仮のDBとして使用したりします。

いってみよう！

前提
モックサーバーを立てる
Reactとサーバーをつなぐ
さいごに

前提

・React
・TypeScript　が使える環境

モックサーバーを立てる

今回は「json server」を使用します。
謳い文句は「コーディングなしで完全な偽の REST API を30 秒以内に入手する」です。

その名の通り、めっちゃ早くモックアップができます。

▽インストール

npm install json-server --dev

▽package.jsonと同じ階層に「db.json(名前はなんでもいい)」を作ります。

▽db.jsonの中身に仮のデータを入れていきます。

{
  "Member": [
    {
      "id": 1,
      "name": "Tanaka",
      "age": 12
    },
    {
      "id": 2,
      "name": "Nakanishi",
      "age": 24
    },
    {
      "id": 3,
      "name": "Akiyama",
      "age": 45
    },
    {
      "id": 4,
      "name": "Takayama",
      "age": 22
    },
    {
      "id": 5,
      "name": "Nishi",
      "age": 8
    }
  ]
}

はい、完成です。
早すぎですね 🙂

早速サーバーを起動して見てみましょう！

▽ターミナルで以下コマンド

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

▽サーバーが起動しました。
\{^_^}/hi! かわいい。

http://localhost:3100/memberにアクセスすると…

▽じゃん！でました！
これが簡易DBの中身です。

これをDBとして、GETやPOST、PUTなどを使用して操作します。

ちなみに…
「json-server.json」というファイルを作り、
中身にちょこっと書くとサーバーの起動が楽になります。

▽json-server.json の中身

{
  "watch": true,
  "port": 3100
}

▽起動がこれだけでOK!!

npx json-server db.json

Reactとサーバーをつなぐ

サーバーに繋いで非同期通信をしたい場合は「fetch」を使用するのがメジャーだと思いますが、
今回は使ってみて良さみが深かった「axios」を使用していきます。

※非同期通信の説明は100番煎じくらいになるので、ここでは省きます。
個人的にはyoutubeが分かりやすくておすすめです。

ざっくりの違いとしては
・fetch → インストール不要。ちょっとコードが長い。
・axios → インストール必要。コードが短い。

また、axiosは「.get」でGET、「.post」でPOSTのように
書き方が直感的に分かりやすいので気に入っています。

▽早速インストール

npm install axios

▽GETの構文

axios.get(URL)

▽GETの例

const URL = 'members';

// getで取ってきたデータをconsole.logで表示
axios.get(URL)
  .then(function (response) {
    console.log(response.data);
  })

▽POSTメソッドの構文

axios.post('データがあるURL', Jsonデータ);

▽POSTの例

// 「'members'」にjsonを新規追加したい！

const URL = 'members';
const json = {
   id: 10
   name: 'Nakayama'
   age: 25
};

axios.post(URL , jdon);

▽PUTの構文

axios.post(URL + '/' + 更新したいデータのid , jsonデータ);

私はここで結構躓いたので詳しく説明します。
例えば、以下のJsonをモックアップとして使用していた場合、

{
  "Member": [
    {
      "id": 1,
      "name": "Tanaka",
      "age": 12
    },
    {
      "id": 2,
      "name": "Nakanishi",
      "age": 24
    },
    {
      "id": 3,
      "name": "Akiyama",
      "age": 45
    },
    {
      "id": 4,
      "name": "Takayama",
      "age": 22
    },
    {
      "id": 5,
      "name": "Nishi",
      "age": 8
    }
  ]
}

localhost:3100/member でjson全体が取得でき、
localhost:3100/member/1を指定したらidが1のjsonが取れます。▽

PUTでやろうとしているのは、/idで開いた↑のようなデータを修正するよ！ってことです。

▽PUTの例：

// 「'members'」の中、idが2のjsonを更新したい！

const URL = 'members';
const json = {
   id: 2
   name: 'Tanaka-Kun'
   age: 18
};

// 「members/2」 でidが2のデータを取ってきて、jsonに更新する。
axios.post(URL + '/' + json.id , json);