コンテンツへスキップ

7

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

Reactが**state**と**イベントハンドラ**を使ってインタラクティブ性を追加するのにどのように役立つかを探ってみましょう。

例として、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>
  );
}

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

Stateとフック

Reactには、フックと呼ばれる一連の関数があります。フックを使用すると、**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フックは`useState()`と呼ばれます。

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

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

配列の最初の要素はstateのvalueで、好きな名前を付けられます。記述的な名前を付けることが推奨されます。

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

最後に、HomePageコンポーネントでstate更新関数setLikesを呼び出せます。以前に定義した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 state更新関数が呼び出されます。

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

Stateの管理

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

その他のリソース

章を完了しました7

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

次へ

8: ReactからNext.jsへ

コードを確認し、Reactの学習を続ける方法を見てみましょう。

第8章を開始