コンテンツにスキップ

7

State を使ったインタラクティブ性の追加

React が State とイベントハンドラを使ってインタラクティブ性を追加する方法を学びましょう。

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

index.html
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 イベントを使用できます。

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

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

イベントの処理

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

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

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

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

ブラウザでこれを実行してみてください。開発者ツールでログ出力がどのように増加するかに注目してください。

State と Hooks

React には Hooks と呼ばれる一連の関数があります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 を使用して、ユーザーが「いいね」ボタンをクリックした回数を保存して増やすことができます。実際、 State を管理するために使用される React Hook は useState() と呼ばれます。

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

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

配列の最初の項目は State の `値` で、任意の名前を付けることができます。説明的な名前を付けることをお勧めします。

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

配列の 2 番目の項目は、値を `更新` する関数です。更新関数には任意の名前を付けることができますが、`set` の後に更新する State 変数の名前を付けるのが一般的です。

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

また、この機会に、`likes` State の初期値を `0` に追加することもできます。

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

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

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

最後に、 State アップデーター関数 `setLikes` を `HomePage` コンポーネントで呼び出すことができます。前に定義した `handleClick()` 関数の中に追加しましょう。

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

これで、ボタンをクリックすると `handleClick` 関数が呼び出され、`setLikes` State アップデーター関数が現在のいいね数 + 1 の単一の引数で呼び出されます。

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

状態の管理

これは State の導入にすぎず、React アプリケーションでの State とデータフローの管理についてさらに学ぶことができます。詳細については、React ドキュメントのインタラクティブ性の追加セクションと状態の管理セクションを参照することをお勧めします。

追加リソース

チャプター完了7

State とイベントリスナーを使用して、アプリケーションに基本的なインタラクティブ性を追加しました。

次へ

8: React から Next.js へ

コードを確認し、React の学習を続ける方法をご覧ください。

チャプター 8 を開始