4.Counter編

• カウンターアプリを作る

ゴール

• useStateを使った状態管理を覚える
• クリックを検知して処理を実行できるようになる

完成形

やること

• カウンターのレイアウトを作る
• ボタンクリックで処理を実行させる
• useStateで値を管理する

カウンターのレイアウトを作る

Counterコンポーネントを作る

• 現在のカウンターの値とプラス/マイナスボタンを表示する
• src/components/Counter.tsxを作成する

import React from 'react';

function Counter() {
  return (
    <div>
      <div>0</div>
      <button>ー</button>
      <button>＋</button>
    </div>
  )
}

export default Counter;

• Counterコンポーネントを表示するようにsrc/App.tsxを修正

import React from 'react';
import Counter from './components/Counter'; // importを追加

function App() {
  return <Counter />; // Counterコンポーネントを使う
}

export default App;

Styleの追加

• このままでは見た目が悪いのでsrc/styles/Counter.module.cssを作成してCSSを定義する

.counter {
  text-align: center;
}

.count {
  font-size: 64px;
}

• CSSを読み込むようにsrc/components/Counter.tsxを修正する

import React from 'react';
import styles from '../styles/Counter.module.css';

function Counter() {
  return (
    // className属性を追加
    <div className={styles.counter}>
      <div className={styles.count}>0</div>
      <button>ー</button>
      <button>＋</button>
    </div>
  );
}

export default Counter;

TIP

• ReactでCSSを書く方法はいろいろあるが、今回はCSS Modulesという方法を採用している

• 画像のように中央寄せになっていればOK

ボタンクリックで処理を実行させる

• 見た目はできたので機能を追加していく
• プラス/マイナスボタンを押した時に処理を実行できるようにする
  • まずはクリックしたことを検知するところまで

import React from 'react';
import styles from '../styles/Counter.module.css';

function Counter() {
  // ーを押した時の処理を追加
  const down = () => {
    alert('down');
  };

  // ＋を押した時の処理を追加
  const up = () => {
    alert('up');
  };

  return (
    <div className={styles.counter}>
      <div className={styles.count}>0</div>
      {/* onClick属性を追加 */}
      <button onClick={down}>ー</button>
      <button onClick={up}>＋</button>
    </div>
  );
}

export default Counter;

• onClick属性を使うことでクリック時の挙動を指定できる
• このコードを実行するとーボタンをクリックするとdown関数が呼ばれアラートにdownと表示される(＋も同様)

TIP

• ボタンをクリックして出てくるポップアップはalert()の実行によって表示されている
• 今回のように開発途中で関数が呼ばれていることだけ確認したいような時に使うと便利

TIP

const xxx = () => { ... }という書き方はアロー関数と呼ばれる記法で関数を定義している

useStateで値を管理する

• 最後に、ボタンをクリックした時にカウンターの値を増減できるようにする
• 今はカウンターの値が埋め込みになっているので、この値をコンポーネントで管理するように変更する

useStateでカウンターの値を管理する

• ReactコンポーネントはuseStateを使うことで値を管理できるようになる

TIP

• 値を管理するとは？
  • ユーザ操作等で変化し得る値を保持して変更を管理すること
  • 管理する値が更新されると自動的に最新の値で画面が再描画される
• コンポーネントが管理する値のことをStateと呼ぶ

• countというカウンターの値を表すStateを持つようにする

import React from 'react';
import styles from '../styles/Counter.module.css';

function Counter() {
  // countというStateを定義する
  const [count, setCount] = React.useState<number>(0);

  const down = () => {
    alert('down');
  };

  const up = () => {
    alert('up');
  };

  return (
    <div className={styles.counter}>
      {/* 変数countを使うように変更 */}
      <div className={styles.count}>{count}</div>
      <button onClick={down}>ー</button>
      <button onClick={up}>＋</button>
    </div>
  );
}

export default Counter;

• 状態(State)の定義
  • const [count, setCount] = React.useState<number>(0)でStateを定義している
    • countは現在の値
    • setCountはcountを更新するための関数
    • useStateの引数である0はcountの初期値
    • <number>は管理する値の型

TIP

• 今回は管理するのがカウンターの値だったのでcount、setCountという変数名をつけた
• 変数名は用途に応じて任意の名前をつけることができる

Stateを更新する

• countはsetCountを使って更新する

import React from 'react';
import styles from '../styles/Counter.module.css';

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

  const down = () => {
    // countの値を更新する処理を追加
    setCount(count - 1);
  };

  const up = () => {
    // countの値を更新する処理を追加
    setCount(count + 1);
  };

  return (
    <div className={styles.counter}>
      <div className={styles.count}>{count}</div>
      <button onClick={down}>ー</button>
      <button onClick={up}>＋</button>
    </div>
  );
}

export default Counter;

• setCountを使ってcountの値を更新すると、フレームワークの機能により自動的に再描画され画面が更新される
• ここまでで完成形と同じものが完成

課題

• ボタンを押すと、現在の値を2乗した値に更新されるボタンを作ってみよう

まとめ

• useStateを使うことでコンポーネントでStateを管理することができる
• useStateによって生成したsetXxxを使うことでStateを更新することができる
• Stateが更新されると自動的に再描画され画面が更新される

課題の回答例

• src/components/Counter.tsx

import React from 'react';
import styles from '../styles/Counter.module.css';

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

  const down = () => {
    setCount(count - 1);
  };

  const up = () => {
    setCount(count + 1);
  };

  const power = () => {
    setCount(count ** 2);
  };

  return (
    <div className={styles.counter}>
      <div className={styles.count}>{count}</div>
      <button onClick={down}>ー</button>
      <button onClick={up}>＋</button>
      <button onClick={power}>＊＊</button>
    </div>
  );
}

export default Counter;