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

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

React を学び始めると必ず出てくるのが、「クラスコンポーネント」と「関数コンポーネント」 という 2 つの書き方です。
最近の React では「関数コンポーネント + Hooks」が主流ですが、既存のコードや古い記事を読むとクラスコンポーネントが登場することもあります。この記事では両者の違いや使い分けについてわかりやすく解説していきます。

コンポーネントとは？

React におけるコンポーネントとは、画面を構成する部品のことです。ボタン、入力フォーム、カードなどを独立した単位として切り出すことで、再利用性が高く、保守しやすいコードになります。

React のコンポーネントには大きく分けて次の 2 種類があります。

1. クラスコンポーネント
2. 関数コンポーネント

クラスコンポーネント

クラスコンポーネントは、React が誕生した当初から使われてきたスタイルです。JavaScript の class を使って定義します。

サンプルコード（カウンター）

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // stateを定義
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 }); // state更新
  };

  render() {
    return (
      <div>
        <p>カウント: {this.state.count}</p>
        <button onClick={this.increment}>＋1</button>
      </div>
    );
  }
}

export default Counter;

特徴

• this.state で状態を持つ
• 状態の更新は this.setState()
• ライフサイクルメソッド（componentDidMount など）が用意されている

一方で、this の扱いが複雑になりやすく、コードが冗長になりがちという課題もあります。

関数コンポーネント

関数コンポーネントは、よりシンプルな書き方です。もともとは「ただの見た目専用コンポーネント」として使われていましたが、React v16.8 で Hooks が導入されてからは、状態管理やライフサイクル処理も扱えるようになり、現在はこちらが主流となっています。

サンプルコード（カウンター）

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // stateをHooksで管理

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>＋1</button>
    </div>
  );
}

export default Counter;

特徴

• useState で状態を管理
• useEffect で副作用処理（ライフサイクル相当）を扱える
• this を使わないので直感的でシンプル

ライフサイクルと Hooks の対応

クラスコンポーネントではライフサイクルメソッドを使って処理を記述しましたが、関数コンポーネントでは useEffect を使います。

例：時計コンポーネント（関数版）

import { useState, useEffect } from "react";

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer); // クリーンアップ
  }, []);

  return <p>現在時刻: {time.toLocaleTimeString()}</p>;
}

クラスと関数の違いまとめ

現在どちらを使うべき？

• 新しいプロジェクトを作るなら → 関数コンポーネント
  Hooks のおかげでシンプルに書け、可読性も高いためおすすめです。

• 既存のプロジェクトを読むとき → クラスコンポーネント
  過去のコードやライブラリではまだ多く使われているため、基本的な読み方は理解しておく必要があります。

まとめ

• React のコンポーネントには「クラス」と「関数」の 2 種類がある
• クラスコンポーネントは古くから使われてきたが、コードが冗長になりやすい
• 関数コンポーネントは Hooks により強力になり、現在の標準スタイル
• 新規開発では関数コンポーネントを使うのが基本