React + React Hooksを使う

fetchでデータを取得し、ランキングを作成する

前提

以前作成した下記の環境からスタートします。

親

src > app.tsx

import React, { FC } from "react";

const App: FC = () => {
return <h1>Hello World</h1>;
};
export default App;

子

componentフォルダ > content.tsx
※このコンポーネントにデータを流すので、後で使う

import React, { FC } from "react";

export const Content: FC = () => {
return <h1>Hello Hello</h1>;
};

ここまでで確認①

yarn start：(npx webpack serve --config webpack.config.js)でブラウザにアクセスするとHello Worldが表示されていたらOK!

dummyDataの作成

APIを使ってデータが流れてくる想定でjson-serverを使用し、ダミーデータを作成します。
yarn add -D json-serverコマンドを実行

mockフォルダ　>　dummyData.json

dummyData.json

{
"ranking": [
    { "word": "テスト", "count": 10 },
    { "word": "テスト1", "count": 5 },
    { "word": "テスト2", "count": 1 }
  ]
}

型の作成

src > typesフォルダ > type.d.ts

export interface Ranking {
word: string;
count: number;
}

トップレベルのapp.tsxでデータ管理

app.tsx

import React, { FC, useEffect, useState } from "react";
import { Content } from "./component/content";
import { Ranking } from "./types/type";

const App: FC = () => {
  const [ranking, setRanking] = useState<Ranking[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:3000/ranking");
      const rankingData = await response.json();
      setRanking(rankingData);
      //今回はブラウザ上でデータが入ってきているか確認するためconsoleを記載
      console.log(rankingData);
    };
    fetchData();
  }, []);
  return (
    <>
      <Content />
    </>
  );
};
export default App;

• Appコンポーネント内でuseStateを使う
• rankingは初期値(今回はuseState<RankingData[]>([])となっているので空配列が初期値)
• setRankingはデータが更新した値(今回はfetchして取得したデータを入れる)
• useEffect(副作用)：関数コンポーネントのレンダリングに関係ない処理
• useEffectの第二引数である[]に値を入れることで依存関係が作れる

ここまでで確認②

1. ターミナルでnpx json-server --watch ./mock/dummyData.jsonコマンドを実行(\{^_^}/ hi!このマークが出ていればOK！)
2. 別ターミナルでyarn startを実行
3. 今回はブラウザ上でlocalhost:8111にアクセス
4. 検証のコンソールでダミーデータを同じ値があることを確認

これでデータを流す準備は完了！

コンポーネントにデータを流す

app.tsx

<Content ranking={ranking}/>

• useStateのrankingを子に流す

※content.tsxで何も書き換えてないのでrankingでエラー出ている

content.tsx

import React, { FC } from "react";
import { RankingData } from "../types/type";

export const Content: FC<RankingData> = (props) => {
const { ranking } = props;
return (
    <>
   　　<h1>Hello Hello</h1>
    <table>
        <tr>
        {ranking.map(({ word }) => {
            return (
            <tr>
                <td key={word}>{word}</td>
            </tr>
            );
        })}
        </tr>
    </table>
    </>
  );
};

• 親から流れてきたranking= props
• rankingを分割代入で展開する
• rankingのデータを全てテーブルに入れるためmapを使う
• ダミーデータのcountは使わないのでwordだけ
• 新しい型RankingDataを作成(下記)

tyoes > type.d.ts

export interface RankingData {
ranking: Ranking[];
}

最後に

1. ターミナルでnpx json-server --watch ./mock/dummyData.jsonコマンドを実行(scriptsでmockとしてまとめました。yarn mock)
2. 別ターミナルでyarn startを実行
3. ブラウザ上でlocalhost:8111にアクセス

Hello Helloに続いてテスト、テスト1、テスト2が表示されていればOK！

あとはコンポーネントを増やして横展開していくだけです。

参考文献