プロジェクト内で React ハンズオンを企画した

もともと React をあまり触ったことのない方へ向けて教育用リポジトリを作成、とはいえ社内に限った活動でもなくこの知見を外部発信させていただいた。

詳細は下記 Web サイトを見ていただく。

そもそも React で Hooks を使って書くのが今の流行りで、コンポーネントを書く際、クラスコンポーネントと関数コンポーネントに分けられる。

今回扱った教材の Hooks API は後者の範疇に入る。

Hooks 導入以前まで、関数コンポーネントに state を持たせられなかった代わりに state を持たせるためクラスコンポーネントを実装する他なかった。

関数コンポーネントを使うべき理由

主な理由を下記の通り。クラスコンポーネントでは this を用いて state を参照しなければいけず、更新する際も state に this を用いて参照しなければいけない。

• this を使う必要が無くなる
• メソッドを bind する必要が無くなる
• 初期化する constructor を書く必要が無くなる

クラスコンポーネント

クラスコンポーネントの例。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleCount = this.handleCount.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

関数コンポーネント

関数コンポーネントの例。

const Example = () => {
  const [count, setCount] = React.useState<number>(0);

  function handleClick() {
    setCount(() => count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

今回のゴールである Pokemon API をフェッチして Vercel へのデプロイを果たした。

今回はフェッチと検索を扱う

目標を Hooks API をベースとした Web アプリケーションを作ることとした。今回のターゲットを考慮して、フレームワーク Next.js を一切使わない選択をとった。

その目標を達成するため複数の技術的なマイルストーンを合わせ準備している。

• useSWR を利用して API をフェッチする
• useState を利用した状態管理
• useMemo を利用した再描画の仕組み

今回は状態管理やユニットテストを扱っていない。次回以降、この辺りを中心にテーマを選定したい (ご気軽に Issue や PR ください)

状態管理で別の手段 useEffect も存在する

API のフェッチを useEffect で行い state を useState で管理する方法も存在する。

const [pokemonData, setPokemonData] = React.useState<Array<{ name: string; url: string }>>()
React.useEffect(() => {
    const data = fetch(`https://pokeapi.co/api/v2/pokemon?limit=200&offset=200`)
    setPokemonData(data.results)
}, [])

{/*読み込み中*/}
if (!pokemonData) return <div>Loading..</div>

{/*読み込みに成功した*/}
return (
    <React.Fragment>
        {pokemonData?.map((pokemon: { name: string; url: string }) => (
            <div key={pokemon.name}>
                {pokemon.name}
            </div>
        ))}
    </React.Fragment>
)

useSWR を使うか useEffect を使うのは各プロジェクトの設計方針により決定しましょう。