【React】クラスコンポーネント vs 関数コンポーネント【初心者に分かりやすく】 #JavaScript

Reactには、コンポーネントを構築する際に選択できるクラスコンポーネントと関数コンポーネントの2つの方法があります。この記事では、これらの違いを初心者向けに分かりやすく解説していきます。

クラスコンポーネント

クラスコンポーネントは、Reactの古典的な方法で、JavaScriptのクラスを使って定義されます。クラスコンポーネントでは、render()メソッドを用いてUIを返します。また、stateやlifecycleメソッドを利用できます。

例:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

関数コンポーネント

関数コンポーネントは、よりシンプルで簡潔な構文でコンポーネントを定義できます。通常、アロー関数を使って定義され、UIを直接返します。stateやlifecycleメソッドは利用できませんが、React Hooksを使って同様の機能を実現できます。

例:

import React from 'react';

const MyComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

export default MyComponent;

どちらを使うべきか

一般的に、関数コンポーネントが推奨されています。シンプルで簡潔な構文により、コードが読みやすくなります。また、React Hooksの導入により、以前はクラスコンポーネントでしかできなかったことが関数コンポーネントでも可能になりました。

ただし、既存のプロジェクトでクラスコンポーネントが多用されている場合や、特定の理由でクラスコンポーネントを使う必要がある場合は、クラスコンポーネントを選択することもあります。

まとめ

Reactには、コンポーネントを作成するための2つの方法があります。クラスコンポーネントは古典的で、stateやlifecycleメソッドを利用できます。一方、関数コンポーネントはよりシンプルで簡潔な構文を持ち、React Hooksの導入により、stateやlifecycleメソッドに相当する機能を持つことができます。

現在では、新しいコードを書く場合、関数コンポーネントを使うことが推奨されています。それは、簡潔で読みやすいコードを書くことができ、Hooksを通じて多くの機能を利用できるからです。

しかし、既存のプロジェクトではクラスコンポーネントもまだ広く使われています。そのため、クラスコンポーネントの理解と使用法も重要です。

最終的にどちらを使用するかは、プロジェクトの要件、チームの経験、そして既存のコードベースに大きく依存します。どちらの方式も理解していれば、最適な選択ができるでしょう。

この記事が、Reactのクラスコンポーネントと関数コンポーネントの理解に役立つことを願っています。