[TypeScript 入門] React でステートを操る：初心者でも安心のガイド
React with TypeScript でのステート管理
ステートとは
ステートは、コンポーネントのデータ属性であり、時間経過とともに変化します。例えば、ボタンクリックでカウント数を増減するような機能では、カウント数がステートとして管理されます。
useState フック
React では、useState フックを使用してステートを管理します。このフックは、ステート変数とその更新用関数を含むタプルを返します。
const [state, setState] = useState(initialState);
state: ステート変数。初期値としてinitialStateが設定されます。setState: ステートを更新するための関数。新しいステート値を引数として渡します。
ステートの更新
setState 関数を使用して、ステートを更新できます。この関数は非同期に処理されるため、ステートの更新後、コンポーネントは再レンダリングされます。
setState(newState);
引数として渡された newState は、新しいステート値を表します。
ステートの型定義
TypeScript では、ステート変数と setState 関数の型を定義することができます。これにより、コンポーネント内でステートを安全に使用することができます。
const [count, setCount] = useState<number>(0);
この例では、count ステート変数が数値型であることを TypeScript に伝えています。
例：カウンターアプリ
以下は、useState フックと TypeScript を使って作成したシンプルなカウンターアプリの例です。
import React from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={increment}>増やす</button>
<button onClick={decrement}>減らす</button>
</div>
);
};
export default Counter;
import React from 'react';
interface CounterState {
count: number;
}
const Counter: React.FC = () => {
const [state, setState] = React.useState<CounterState>({ count: 0 });
const increment = () => {
setState((prevState) => ({
...prevState,
count: prevState.count + 1,
}));
};
const decrement = () => {
setState((prevState) => ({
...prevState,
count: prevState.count - 1,
}));
};
return (
<div>
<h1>カウント: {state.count}</h1>
<button onClick={increment}>増やす</button>
<button onClick={decrement}>減らす</button>
</div>
);
};
export default Counter;
このコードの説明
CounterStateインターフェースは、countプロパティを持つオブジェクトを定義します。このプロパティは、カウンターアプリの現在のカウント数を表します。useStateフックを使用して、stateステート変数を作成します。この変数は、CounterStateインターフェースで定義された初期値{ count: 0 }を持ちます。increment関数は、setState関数を使用してcountプロパティを 1 増やします。- コンポーネントのレンダリングでは、
state.countプロパティを使用して現在のカウント数を表示します。
このコードを実行するには
- Node.js と npm をインストールします。
- プロジェクトディレクトリを作成し、以下のコマンドを実行します。
npm init -y
npm install react react-dom typescript @types/react @types/react-dom
App.tsxファイルを作成し、上記のコードを貼り付けます。- 以下のコマンドを実行して、アプリを起動します。
npx tsc && node index.js
これで、ブラウザで http://localhost:3000 にアクセスすると、カウンターアプリが表示されます。ボタンをクリックして、カウント数を増減してみてください。
- TypeScript を使用して、ステート変数と
setState関数の型を定義しています。これにより、コードの型安全性が高まります。 useStateフックを使用して、ステートを簡単に管理しています。- 関数コンポーネントを使用して、コンポーネントを記述しています。
useContext
useContext フックは、コンポーネント間でステートを共有するためのフックです。コンポーネントツリー全体でステートを共有する必要がある場合に便利です。
利点
- コンポーネネントツリー全体でステートを簡単に共有できる
- グローバルステート管理ライブラリと併用できる
欠点
- ステートの参照元がわかりにくい場合がある
- 誤ってステートを更新してしまう可能性がある
Redux
Redux は、単一方向データフローアーキテクチャに基づく、人気のあるステート管理ライブラリです。複雑なアプリケーションでステートを管理する必要がある場合に便利です。
- 予測可能なステート管理
- タイムトラベルデバッギングなどの高度な機能
- 多くのサードパーティ製ライブラリとミドルウェア
- 導入と学習に時間がかかる
- 複雑なアプリケーションでのみ真価を発揮
MobX
MobX は、オブザーバブルベースのステート管理ライブラリです。自動的にステートの変更を追跡し、関連するコンポーネントを再レンダリングします。
- シンプルで使いやすい
- 自動的にステートの変更を追跡する
- 軽量でパフォーマンスが良い
- Redux ほど強力ではない
- スケーラビリティに問題がある場合がある
Zustand
Zustand は、MobX に似たオブザーバブルベースのステート管理ライブラリです。シンプルで使いやすい API を備えています。
- TypeScript との互換性が高い
- MobX ほど強力ではない
- コミュニティが小さい
useReducerフック: 複雑なステートロジックを管理する場合に役立ちます。- カスタムステート管理ライブラリ: 上記で紹介したライブラリ以外にも、様々なカスタムステート管理ライブラリが存在します。
どの方法を選択すべきか
どの方法を選択すべきかは、アプリケーションのニーズによって異なります。
- シンプルなアプリケーションの場合は、
useStateフックで十分でしょう。 - コンポーネントツリー全体でステートを共有する必要がある場合は、
useContextまたは Redux を検討しましょう。 - 複雑なアプリケーションで高度なステート管理機能が必要な場合は、Redux を検討しましょう。
- シンプルで使いやすいステート管理ライブラリが必要な場合は、MobX または Zustand を検討しましょう。
javascript reactjs typescript
