FizzBuzzボタンを作りながらReact Hooksを学ぶ 第1回

FizzBuzz ボタンを作りながら React Hooks を学んでいきます。
目次はこちら。

クラスコンポーネントで FizzBuzz ボタンを作る

ここで作成する FizzBuzz ボタンは

1. 「+1」を押すと、表示されている数値が1ずつ増加する。
2. 数値に応じてメッセージが変わる。3の倍数のときには「Fizz」と表示され、5の倍数のときには「Buzz」と表示される。
3. 「clear」ボタンを押すと数値が0に戻る。
   というシンプルなものです。

表示する数値が変化しますので、これを状態として管理する必要があります。
まずは React Hooks を使わずに、従来の「クラスコンポーネント内の state で状態を管理する」方法で FizzBuzz ボタンを作ります。

App.tsx

import React from 'react';

const App: React.FC = () => {
  return <FizzBuzz initialCount={0} />;
};

type Props = {
  // props で count の初期値を受け取る
  initialCount: number;
};

type State = {
  // 状態として count を持つ
  count: number;
};

// count の値に応じて fizzBuzz メッセージを返す
const fizzBuzz = (count: number) => {
  if (count === 0) {
    return '';
  }
  if (count % 3 === 0 && count % 5 === 0) {
    return 'FizzBuzz';
  }
  if (count % 3 === 0) {
    return 'Fizz';
  }
  if (count % 5 === 0) {
    return 'Buzz';
  }
  return '';
};

// クラスコンポーネントで FizzBuzz ボタンを作る
class FizzBuzz extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  // マウントされたときの処理
  componentDidMount() {
    console.log('mount');
  }

  // アンマウントされたときの処理
  componentWillUnmount() {
    console.log('unmount');
  }

  // +1 ボタンを押すと count をインクリメントする
  plus1 = () => this.setState(({ count }) => ({ count: count + 1 }));

  // clear ボタンを押すと count をリセットする
  clear = () => {
    const { initialCount } = this.props;
    this.setState({ count: initialCount });
  };

  render() {
    console.log('render');
    const { count } = this.state;
    const { plus1, clear } = this;
    const message = fizzBuzz(count);

    return (
      <div>
        <div>{`${count} ${message}`}</div>
        <div>
          <button type="button" onClick={plus1}>
            +1
          </button>
          <button type="button" onClick={clear}>
            clear
          </button>
        </div>
      </div>
    );
  }
}

export default App;

今回作成したソースコードはこちら。
次回は今回作成したコードを整理して、ファイルを分割します。