State https://techgrowup.net エンジニアを強くする Sun, 27 Apr 2025 20:00:00 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://techgrowup.net/wp-content/uploads/2021/05/hp-icon-150x150.png State https://techgrowup.net 32 32 React.Component徹底ガイド──クラスコンポーネントの基本からライフサイクル・State管理・最適化まで https://techgrowup.net/react-class-component/ https://techgrowup.net/react-class-component/?noamp=mobile#respond Sun, 27 Apr 2025 20:00:00 +0000 https://techgrowup.net/?p=2824 はじめに

Reactのコンポーネントは関数コンポーネントが主流になっていますが、クラスベースのReact.Componentも依然として理解しておく価値があります。特に既存の大規模プロジェクトやError Boundary（エラーバウンダリ）実装にはクラスコンポーネントが欠かせません。提供する機能を１つずつ丁寧に見ていきましょう。

React.Componentとは

React.Component は、ユーザー定義のクラスコンポーネントが継承する基底クラスです。内部では以下を提供します。

  • props：親から渡される読み取り専用データ
  • state：コンポーネント内部で変化する値
  • render()：UIの描画を司る必須メソッド
  • ライフサイクルメソッド：マウント・更新・アンマウント時のフック
  • setState()：state更新と再レンダーのトリガー
  • エラーバウンダリ：static getDerivedStateFromError / componentDidCatch
import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <div>カウント: {this.state.count}</div>;
  }
}

propsの扱い

this.props には親から渡された全ての値が含まれています。コンポーネント内で変更してはいけません。

class Greeting extends React.Component {
  render() {
    return <h1>こんにちは、{this.props.name}さん！</h1>;
  }
}

// 呼び出し側
<Greeting name="太郎" />
  • 型注釈：PropTypes で型・必須チェックを行う例も多い
  • デフォルトProps：MyComponent.defaultProps = { count: 10 };

stateとsetState

state はコンポーネントの内部情報を保持し、setState で更新します。setState は非同期バッチ処理されるため注意が必要です。

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    // 複数回連続呼び出すと反映タイミングがずれる可能性あり
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}
  • 関数型更新：前回のstateを確実に利用したい場合
this.setState(prev => ({ count: prev.count + 1 }));
  • マージ：オブジェクトをマージする形で更新される

ライフサイクルメソッド一覧

クラスコンポーネントは以下のメソッドをオーバーライドできます。

フェーズメソッド説明
マウント前static getDerivedStateFromProps(props, state)Propsからstateを生成（副作用禁止）
マウント後componentDidMount()API呼び出しやDOM操作を実行
更新判定shouldComponentUpdate(nextProps, nextState)レンダーをスキップする判断
更新前getSnapshotBeforeUpdate(prevProps, prevState)更新前のDOM情報を取得（返却値は次のcomponentDidUpdateに渡る）
更新後componentDidUpdate(prevProps, prevState, snapshot)更新後に副作用を実行
アンマウント前componentWillUnmount()タイマー解除、購読解除などのクリーンアップ
エラー処理static getDerivedStateFromError(error)エラー発生時にstateを更新
componentDidCatch(error, info)UIエラーのログ送信など

例：データフェッチ

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch(this.props.url)
      .then(r => r.json())
      .then(json => this.setState({ data: json }));
  }

  render() {
    return this.state.data
      ? <div>{this.state.data.title}</div>
      : <p>読み込み中…</p>;
  }
}

Error Boundary（エラーバウンダリ）

クラスコンポーネントのみ実装可能な仕組みで、子コンポーネントでのレンダーエラーをキャッチできます。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>エラーが発生しました</h2>;
    }
    return this.props.children;
  }
}
  • 再起動：Error Boundaryをリセットするロジックを外部から制御可能
  • 注意：副作用フックの代替ではない

コンテキストとの連携

static contextType = MyContext をクラスに指定すると this.context で値を参照できます。

MyComponent.contextType = ThemeContext;
class MyComponent extends React.Component {
  render() {
    return <div style={{ color: this.context.primary }}>…</div>;
  }
}

パフォーマンス最適化

shouldComponentUpdate

再レンダーを制御し、不要なrender()呼び出しを抑えます。

class PureCounter extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }
  render() { /* … */ }
}

PureComponent

React.PureComponent を継承すると自動的に shallow 比較で shouldComponentUpdate を実装します。

メソッドのバインディング

this の参照を安定させるため、コンストラクタでバインディングするか、クラスフィールド構文を使います。

// コンストラクタ内で
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

// クラスフィールド
handleClick = () => { /* this が正しい */ }

デフォルトPropsとdisplayName

  • defaultProps
MyComponent.defaultProps = { text: 'デフォルトテキスト' };
  • displayName
    • デバッグ時の表示名を変更できます。
MyComponent.displayName = 'カスタム名';

まとめ

React.Component を理解すると、既存のクラスコンポーネントやError Boundaryが読み書きできるようになります。ライフサイクルメソッド、state / props、パフォーマンス最適化パターンなどを活用し、堅牢で読みやすいUIコンポーネントを実装しましょう。

]]> https://techgrowup.net/react-class-component/feed/ 0 Reactコンポーネント徹底ガイド──基本から応用パターンまでわかりやすく解説 https://techgrowup.net/react-component-basic/ https://techgrowup.net/react-component-basic/?noamp=mobile#respond Sun, 27 Apr 2025 18:00:00 +0000 https://techgrowup.net/?p=2817 はじめに

Reactを初めて学ぶ人が最初につまづきやすいのが「コンポーネント」の概念です。コンポーネントはUIを部品化し、再利用可能な塊として扱う手法。公式ドキュメント （https://react.dev/learn#components） では「コンポーネントは関数と同じ」と説明していますが、実際にコードを書くときにはPropsやState、Hooksと組み合わせるため、学習のハードルが高く感じられることもあります。本記事ではReact 18+最新情報を交え、関数コンポーネント、クラスコンポーネント、Props、State、Hooks、コンポジションや最適化パターンまで丁寧に解説します。

コンポーネントとは何か

コンポーネントは「UI部品」のようなもので、HTMLとJavaScriptを一体化して定義できます。例えば「ボタン」や「入力フォーム」のようなパーツを1つのファイルとして切り出し、 他の箇所から呼び出して使い回せるのが最大の利点です。

// Button.jsx
export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

上記のように、Button コンポーネントを定義し、label や onClick をPropsで受け取ることで、使う場所ごとに見た目や挙動を変えられます。

関数コンポーネントの基礎

宣言方法

関数コンポーネントはJavaScriptの関数として定義し、必ず1つのJSX要素を返します。

function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

ESLintやTypeScript環境では React.FC 型を使って型注釈を付けるケースもあります。

Propsの受け渡し

Propsはコンポーネントを呼び出す側で指定します。

<Greeting name="太郎" />
<Greeting name="花子" />

複数のPropsを使う場合はオブジェクト形式でまとめて受け取り、分割代入で取り出します。

function Profile({ avatarUrl, username, bio }) { /* … */ }

クラスコンポーネントとの違い

かつてReactはクラスコンポーネントが主流でした。2025年現在はHooksの登場で関数コンポーネントが主役ですが、既存コードやライフサイクルメソッドの学習に役立つため、基本を抑えておくと理解が深まります。

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>こんにちは、{this.props.name}さん！</h1>;
  }
}
  • State管理：クラスでは this.state と this.setState()
  • ライフサイクル：componentDidMount, componentDidUpdate, componentWillUnmount

Hooksを使えば同等の処理が関数コンポーネントで実現可能です。

Stateの扱い方

useStateフック

Stateは「変化する値」を保持し、再レンダーを引き起こす仕組みです。関数コンポーネントでは useState を使って簡単にStateを定義できます。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </>
  );
}
  • 初期値：useState(0) の 0 部分
  • 更新関数：setCount を呼ぶと再レンダーが発生

Stateの注意点

  • 不変性：Stateオブジェクトを直接変更せず、必ず更新関数を使う
  • 遅延初期化：複雑な計算が必要な場合は関数を渡して一度だけ実行
const [todos, setTodos] = useState(() => loadTodosFromLocalStorage());

Props vs State

項目PropsState
定義場所親コンポーネントが渡す自身のコンポーネント内で定義
役割親からの読み取り専用の値パーツ内部で変化する値
更新親が再レンダーされる必要あり更新関数を呼ぶだけで自動的に再レンダー

Propsを変更したい場合は「親コンポーネント」が再レンダーされて新しいPropsを渡す仕組みになります。

コンポーネントの合成（Composition）

Reactではコンポジションが主流で、親子や兄弟のようにコンポーネントを入れ子にして機能を組み立てます。

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>タイトル</h2>
      <p>内容テキスト</p>
    </Card>
  );
}
  • children：<Card>…</Card> の中身を受け取る特殊Props
  • 再利用性：見た目のフレームと中身を分離できるため、多用途に使える

ライフサイクルとuseEffect

useEffectの基本

副作用（データフェッチ、購読、手動DOM操作など）を扱う際に使うフック。

import { useEffect, useState } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(json => setData(json));
  }, [url]); // urlが変わったときだけ再実行
  return data ? <pre>{JSON.stringify(data)}</pre> : <p>読み込み中…</p>;
}
  • 第2引数：依存配列。空配列 [] ならマウント時のみ実行
  • クリーンアップ：関数を返すとアンマウント時に実行
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

クラスのライフサイクル対応

  • componentDidMount → useEffect(() => {...}, [])
  • componentDidUpdate → useEffect(() => {...}, [deps])
  • componentWillUnmount → useEffect(() => { return cleanup }, [])

パフォーマンス最適化

React.memo

関数コンポーネントをラップして、Propsが変わらない限り再レンダーを防ぐ。

const ExpensiveComponent = React.memo(function({ value }) {
  // 重い計算...
  return <span>{value}</span>;
});

useCallback / useMemo

  • useCallback：コールバック関数をメモ化
const handleClick = useCallback(() => { /* ... */ }, [deps]);
  • useMemo：計算結果をメモ化
const result = useMemo(() => expensiveCalculation(a, b), [a, b]);

Virtualized List

大量データをリスト表示する場合は react-window や react-virtualized を使って、可視領域のみDOM生成する。

コンポーネント設計パターン

Container / Presentational

  • Container：データ取得やState管理を担当
  • Presentational：UI描画のみを担当
function UserContainer() {
  const [user, setUser] = useState(null);
  useEffect(() => fetchUser().then(setUser), []);
  return user ? <UserProfile data={user} /> : <Loading />;
}
function UserProfile({ data }) { /* UIのみ */ }

Compound Components

親コンポーネントと子要素が連携して振る舞うパターン。

function Tabs({ children }) {
  const [active, setActive] = useState(0);
  return /* contextでactiveとsetActiveを渡す */;
}
Tabs.List = function({ children }) { /* タブ見出し */ };
Tabs.Panel = function({ index, children }) { /* コンテンツ */ };

テストと型安全

テスト例（React Testing Library）

import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('クリックで増加', () => {
  const { getByText } = render(<Counter />);
  const btn = getByText(/増やす/);
  fireEvent.click(btn);
  expect(getByText(/現在のカウント: 1/)).toBeInTheDocument();
});

TypeScriptとの併用

コンポーネントに型注釈を付けると、Propsのうっかりミスをコンパイル時に検出できます。

interface ButtonProps { label: string; onClick: () => void; }
export function Button({ label, onClick }: ButtonProps) { /* ... */ }

まとめ

Reactコンポーネントは「UIを部品化して組み合わせる」ための基本単位です。関数コンポーネントとクラスコンポーネントの違い、PropsとState、Hooks、コンポジション、最適化パターンをしっかり理解すれば、堅牢で再利用性の高いUIを効率的に開発できます。公式ドキュメントを自分のプロジェクトに落とし込む際には、ここで解説した多彩なパターンをぜひ試してみてください。

]]> https://techgrowup.net/react-component-basic/feed/ 0