チャプター7

Stateによるインタラクティブ性の追加

Reactがstateとevent handlersを使用してインタラクティブ性を追加する方法を見ていきましょう。

例として、HomePageコンポーネント内に「いいね！」ボタンを作成しましょう。まず、return()ステートメント内にボタン要素を追加してください。

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

イベントのリスニング

ボタンをクリックしたときに何らかの動作をさせるには、onClickイベントを使用できます。

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

Reactでは、イベント名はキャメルケースです。onClickイベントは、ユーザーの操作に応答するために使用できる多数のイベントの1つです。たとえば、入力フィールドにはonChange、フォームにはonSubmitを使用できます。

イベントの処理

トリガーされるたびにイベントを「処理」する関数を定義できます。handleClick()という名前で、returnステートメントの前に関数を作成します。

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("increment like count")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

次に、onClickイベントがトリガーされたときにhandleClick関数を呼び出すことができます。

function HomePage() {
  // 	...
  function handleClick() {
    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

これをブラウザで実行してみてください。開発者ツールで、ログ出力が増加していく様子を確認してください。

StateとHooks

Reactにはhooksと呼ばれる関数のセットがあります。Hooksを使用すると、コンポーネントにstateなどの追加のロジックを組み込むことができます。Stateとは、通常、ユーザーの操作によってトリガーされ、時間とともに変化するUIのあらゆる情報と考えることができます。

Two different examples of state: 1. A toggle button that can be selected or unselected. 2. A like button that can be clicked multiple times.

Stateを使用して、ユーザーが「いいね！」ボタンをクリックした回数を保存してインクリメントできます。実際、Reactでstateを管理するために使用されるHookは、useState()と呼ばれます。

プロジェクトにuseState()を追加します。これは配列を返します。配列の分割代入を使用して、コンポーネント内でこれらの配列の値にアクセスして使用できます。

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

配列の最初の項目はstateのvalueであり、これは任意の名前を付けることができます。説明的な名前にすることが推奨されます。

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

配列の2番目の項目は、値をupdateするための関数です。更新関数には任意の名前を付けることができますが、state変数の更新に使用する名前の前にsetを付けてプレフィックスを付けるのが一般的です。

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

また、likes stateの初期値を0に設定することもできます。

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

次に、コンポーネント内でstate変数を使用して、初期stateが機能していることを確認できます。

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

最後に、state更新関数であるsetLikesをHomePageコンポーネント内で呼び出すことができます。以前に定義したhandleClick()関数内にこれを追加しましょう。

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

ボタンをクリックするとhandleClick関数が呼び出され、これは現在のいいねの数+1を単一の引数としてsetLikes state更新関数を呼び出します。

注意: propsはコンポーネントに最初の関数パラメータとして渡されますが、stateはコンポーネント内で初期化および保存されます。state情報はpropsとして子コンポーネントに渡すことができますが、stateを更新するためのロジックは、stateが最初に作成されたコンポーネント内に保持する必要があります。

Stateの管理

これはstateの入門にすぎません。Reactアプリケーションでのstateとデータフローの管理については、さらに学習することができます。詳細については、ReactドキュメントのAdding InteractivityとManaging Stateセクションを参照することをお勧めします。

追加リソース

State：コンポーネントのメモリ

最初のHookに会う

イベントへの応答