はじめに
Reactでアプリケーションを開発する際、データの流れを理解することは非常に重要です。本記事では、Reactの基本的なデータフローの仕組みと、PropsとStateの使い分けについて解説します。
Reactのデータフローの基本原則
Reactでは、データの流れは親コンポーネントから子コンポーネントへの一方通行が基本です。この設計により、コンポーネントの動作が予測可能になり、アプリケーション全体の構造がシンプルになります。
データフローの特徴
| 特徴 | 説明 |
|---|---|
| 単一方向 | 親から子へのみデータが流れる |
| 予測可能 | データの変更箇所が明確 |
| デバッグ容易 | 問題の原因を特定しやすい |
| 再利用性 | コンポーネントの独立性が高い |
Propsとは
Propsは「Properties」の略で、親コンポーネントから子コンポーネントに渡されるデータです。読み取り専用であり、受け取ったコンポーネント内で変更してはいけません。
Propsの基本的な使い方
// 親コンポーネント
const ParentComponent: React.FC = () => {
const userData = { name: "山田太郎", age: 25 };
return <UserCard user={userData} />;
};
// 子コンポーネント
interface UserCardProps {
user: {
name: string;
age: number;
};
}
const UserCard: React.FC<UserCardProps> = ({ user }) => {
return (
<div>
<h3>{user.name}</h3>
<p>年齢: {user.age}</p>
</div>
);
};
Props検証とデフォルト値
TypeScriptを使用することで、型安全性を確保できます。
interface ButtonProps {
label: string;
onClick?: () => void;
disabled?: boolean;
}
const Button: React.FC<ButtonProps> = ({
label,
onClick,
disabled = false
}) => {
return (
<button onClick={onClick} disabled={disabled}>
{label}
</button>
);
};
Stateとは
Stateはコンポーネント内部で管理される状態です。時間の経過とともに変化する可能性があり、その変更によってコンポーネントの再レンダリングが発生します。
Stateの基本的な使い方
import { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>
増やす
</button>
</div>
);
};
Stateを使った表示制御の例
const Dropdown: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(!isOpen)}>
メニューを開く
</button>
{isOpen && (
<ul>
<li>オプション1</li>
<li>オプション2</li>
</ul>
)}
</div>
);
};
PropsとStateの使い分け
適切な使い分けがアプリケーションの保守性を大きく左右します。
使い分けの基準
| 項目 | Props | State |
|---|---|---|
| 変更可能性 | 不可（読み取り専用） | 可能 |
| データの所有者 | 親コンポーネント | 自身のコンポーネント |
| 用途 | コンポーネント間のデータ受け渡し | コンポーネント内部の状態管理 |
| 例 | ユーザー情報、設定値 | フォーム入力値、表示/非表示フラグ |
実践的な使用例
interface TodoItemProps {
text: string;
onDelete: (id: string) => void;
id: string;
}
const TodoItem: React.FC<TodoItemProps> = ({ text, onDelete, id }) => {
const [isCompleted, setIsCompleted] = useState(false);
return (
<div>
<input
type="checkbox"
checked={isCompleted}
onChange={() => setIsCompleted(!isCompleted)}
/>
<span style={{
textDecoration: isCompleted ? 'line-through' : 'none'
}}>
{text}
</span>
<button onClick={() => onDelete(id)}>削除</button>
</div>
);
};
ベストプラクティス
1. Stateは最小限に
Stateに格納するデータは必要最小限にしましょう。計算で求められる値はStateに含めません。
// 良い例
const [items, setItems] = useState<string[]>([]);
const itemCount = items.length; // 計算で求める
// 悪い例
const [items, setItems] = useState<string[]>([]);
const [itemCount, setItemCount] = useState(0); // 重複した情報
2. Propsのコピーを避ける
Propsの値をStateにコピーすることは避けましょう。
// 良い例
const UserProfile: React.FC<{ name: string }> = ({ name }) => {
return <h1>{name}</h1>;
};
// 悪い例
const UserProfile: React.FC<{ name: string }> = ({ name }) => {
const [userName, setUserName] = useState(name); // 不要なコピー
return <h1>{userName}</h1>;
};
3. イベントハンドラの適切な受け渡し
const ParentComponent: React.FC = () => {
const handleClick = (id: string) => {
console.log(`Item ${id} clicked`);
};
return <ChildComponent onItemClick={handleClick} />;
};
データフローの図解
親コンポーネント
↓ Props（データ）
↓ Props（イベントハンドラ）
子コンポーネント
↑ イベント発火
内部でStateを管理
まとめ
Reactのデータフローを理解することで、より効率的でメンテナンスしやすいアプリケーションを構築できます。
重要なポイント
- データは親から子へ一方通行で流れます
- Propsは読み取り専用、変更してはいけません
- Stateはコンポーネント内部で管理される変更可能なデータです
- Stateは最小限に、必要なデータのみを保持します
- PropsをStateにコピーしない、単一の情報源を保ちます
これらの原則を守ることで、Reactアプリケーションの品質と保守性が大幅に向上します。最初は複雑に感じるかもしれませんが、実際にコードを書きながら理解を深めていくことが大切です。
次のステップ
- Context APIを使った状態管理
- カスタムフックの作成
- Redux等の状態管理ライブラリの導入
Reactのデータフローをマスターして、より良いアプリケーション開発を目指しましょう。