【ITニュース解説】USESTATE IN REACT

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリで、現代のウェブ開発において非常に重要な役割を果たしている。ウェブアプリケーションを構築する際、ユーザーの操作に応じて画面上の情報が変化するような動的な要素は欠かせない。このような「動的に変化するデータ」を管理する仕組みが「状態（state）」と呼ばれるものであり、Reactではこの状態を扱うための強力なツールとして「Hook」が導入された。その中でも最も基本的で広く使われるのが「useState」である。

useStateは、Reactが提供する「Hook」という特殊な関数の一つである。以前のReactでは、コンポーネントが状態を持つためには「クラスコンポーネント」という形式で記述する必要があった。しかし、useStateの導入により、「関数コンポーネント」というよりシンプルで直感的な形式のコンポーネントでも、内部で状態を管理し、それを更新できるようになっている。これは、React 16.8で導入された画期的な変更であり、開発者がより簡潔でメンテナンスしやすいコードを書くことを可能にした。

useStateの基本的な使い方を見てみよう。その構文は以下のようになる。

const [state, setState] = useState(initialValue);

この構文には三つの主要な要素がある。まず「state」は、私たちが管理したい現在の状態の値そのものを指す。例えば、クリック回数を数えるカウンターであれば現在の数字、テキスト入力欄であれば現在入力されている文字列がこのstateに該当する。次に「setState」は、そのstateの値を更新するために使う専用の関数である。Reactでは、状態を直接変更するのではなく、必ずこのsetState関数を呼び出して新しい値を渡す必要がある。setState関数を呼び出すことで、Reactは状態が変更されたことを認識し、それに応じてコンポーネントを再描画（再レンダリング）し、ウェブページの表示を最新の状態に更新するのだ。最後に「initialValue」は、このstateが最初に持つべき初期値を指定する部分である。カウンターであれば0、ユーザーの名前を保存する状態であれば空の文字列''などがよく使われる。

「Hook」という概念は、関数コンポーネントにReactの特別な機能（状態管理や副作用など）を「フックする（引っ掛ける）」ことを可能にする。これにより、クラスコンポーネント特有の複雑さ、例えばJavaScriptのthisキーワードの扱いや、コンポーネントのライフサイクルメソッドの理解が不要になり、より関数型プログラミングに近いシンプルで宣言的なコード記述が可能になった。Hookの導入は、コードの可読性を高め、テストを容易にし、さらには「カスタムHook」という形で特定の状態管理ロジックをコンポーネント間で再利用できるようになるなど、多くの利点をもたらした。

useState以外にも、Reactにはさまざまな目的のHookが存在する。例えば、「useEffect」は、コンポーネントが描画された後や特定の状態が変化した後などに、外部APIからのデータ取得やタイマーの設定、イベントリスナーの登録といった「副作用」の処理を実行したいときに利用する。「useContext」は、アプリケーション全体で共有されるデータ（例えば、テーマ設定や認証情報など）を、深い階層にあるコンポーネントにも簡単に渡すためのContext APIを使用する際に役立つ。「useReducer」は、useStateでは管理しきれないような、より複雑な状態遷移ロジックを持つ場合に利用される高度なHookである。また、「useRef」は、HTMLのDOM要素に直接アクセスしたり、コンポーネントの再レンダリングによって値がリセットされないように参照を保持したりするために使われる。これらのHookはそれぞれ異なる役割を持つが、どれも関数コンポーネントの能力を拡張するという点で共通している。

Hookを使用する際にはいくつかの重要なルールがある。最も基本的なルールは、Hookは「関数コンポーネントの内部」または「カスタムHookの内部」でのみ呼び出すことができるという点だ。通常のJavaScript関数やクラスコンポーネントの内部ではHookを使うことはできない。さらに、Hookはコンポーネントの「最上位レベル」で呼び出す必要がある。つまり、ループの中や条件分岐（if文）の中、あるいは別の関数の中にネストしてHookを呼び出してはいけない。これらのルールを守ることで、ReactはHookの呼び出し順序を常に一貫した状態で保ち、コンポーネントの状態を正確に管理できる。

具体的なuseStateの使用例として、ボタンクリックで数字が増えるシンプルなカウンターコンポーネントを見てみよう。

Copy
1import { useState } from 'react';
2
3function Counter() {
4  const [count, setCount] = useState(0); // countという状態変数と、それを更新するsetCount関数を定義し、初期値を0とする。
5
6  return (
7    <div>
8      <p>Count: {count}</p> {/* 現在のcountの値を表示する。 */}
9      <button onClick={() => setCount(count + 1)}>Increment</button> {/* ボタンをクリックすると、setCount関数が呼び出され、countの値が1増える。 */}
10    </div>
11  );
12}

このコードでは、まずReactからuseStateというHookをインポートしている。Counterという関数コンポーネントの内部で、useState(0)を呼び出すことで、countという名前の現在の状態の値と、setCountという名前のその値を更新するための関数を定義している。useState(0)と記述しているため、countの初期値は0となる。

コンポーネントが描画されると、<p>Count: {count}</p>の部分で現在のcountの値、つまり0が表示される。そして、Incrementというテキストが表示されたボタンが配置されている。このボタンのonClick属性には() => setCount(count + 1)という関数が設定されている。これは、ボタンがクリックされるたびにこの関数が実行され、現在のcountの値に1を加算した新しい値でsetCountが呼び出されることを意味する。setCountが呼び出されると、Reactはcountの状態が変更されたことを検知し、Counterコンポーネントを再実行する。その結果、<p>タグ内の{count}の部分が新しい値に更新され、画面上の表示も自動的にCount: 1、Count: 2と変化していく。

このように、useStateは関数コンポーネントに状態を保持し、ユーザーの操作や外部からのデータに基づいてウェブページの表示を動的に更新する能力をもたらす。現代のReact開発において、useStateとその他のHookを理解し、適切に利用することは、効率的で保守性の高いアプリケーションを構築するために不可欠なスキルとなる。