React 基礎: ステートを使ったインタラクティブ性の追加

Reactがどのようにステートとイベントハンドラーを使ってインタラクティブ性を追加するのかを見ていきましょう。

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

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>
  );
}

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

ステートとフック

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

ステートの2つの異なる例: 1. 選択または選択解除できるトグルボタン 2. 複数回クリックできるいいねボタン

_ステート_を使用して、ユーザーが「いいね」ボタンをクリックした回数を保存および増加させることができます。実際、ステートを管理するために使用されるReactフックはuseState()と呼ばれます。

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

index.html

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

配列の最初の項目はステートの値で、任意の名前を付けることができます。説明的な名前を付けることが推奨されます:

index.html

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

配列の2番目の項目は、値を更新する関数です。更新関数には任意の名前を付けられますが、更新するステート変数の名前にsetを接頭辞として付けるのが一般的です:

index.html

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

また、likesステートの初期値を0に設定する機会もあります:

index.html

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

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

index.html

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

最後に、ステート更新関数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関数が呼び出され、現在のいいね数+1を引数としてsetLikesステート更新関数が呼び出されます。

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

ステートの管理

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

追加リソース:

ステート: コンポーネントのメモリ

最初のフックとの出会い

イベントへの応答

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

イベントの監視

イベントの処理

ステートとフック

ステートの管理

On this page