SEの部屋

コンポーネントの基礎について

Reactのコンポーネントについて

Reactの最も中心的な概念のひとつが「コンポーネント」です。コンポーネントはUIの再利用可能な部品として考えられ、Reactアプリケーションはこれらのコンポーネントの集合体として構築されます。

コンポーネントの基本

コンポーネントは、独自のpropsとstateを持つことができ、それに基づいてUIを描画します。コンポーネントは主に2つの種類があります。

Functional Components（関数型コンポーネント）

関数型コンポーネント（Functional Components）はReact 16.8以降、React Hooksの導入により、クラスコンポーネントと同様の機能を持つようになりました。それ以前は、関数型コンポーネントは状態やライフサイクルメソッドを持つことができませんでした。

基本構文

関数型コンポーネントは、JavaScriptの関数として定義されます。以下はその基本的な構文です。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

もしくはアロー関数を用いることもできます。

const Welcome = props => <h1>Hello, {props.name}</h1>;
関数型コンポーネントのメリット
  1. シンプルさ: クラスのthisに関する複雑さを排除でき、コードが読みやすくなります。
  2. パフォーマンス: 一般的に、関数型コンポーネントはクラスコンポーネントよりも軽量です。
  3. Hooksの利用: 状態やライフサイクル、コンテキストなど、多くの機能にアクセスできるようになりました。

関数型コンポーネントは、Reactの進化の中で非常に重要な位置を占めるようになってきました。Hooksの導入により、多くの開発者が関数型コンポーネントの使用を好むようになり、現代のReact開発の主流となっています。

Class Components（クラス型コンポーネント）

クラス型コンポーネントは、Reactが初めて公開されたときから存在しています。これらのコンポーネントはES6クラスを使用して定義され、ReactのComponentクラスを継承します。

基本構文

以下は、クラス型コンポーネントの基本的な構文です。

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
コンポーネントの状態（state）

クラス型コンポーネントは、状態をstateとして持つことができます。このstateはコンポーネント内で変更可能です。

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

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleIncrement}>
          Click me
        </button>
      </div>
    );
  }
}
ライフサイクルメソッド

クラス型コンポーネントの大きな特徴の一つは、ライフサイクルメソッドを持つことです。これは、コンポーネントのマウント、アンマウント、更新のさまざまな段階で特定の処理を実行するためのものです。
主なライフサイクルメソッド

  • componentDidMount(): コンポーネントがマウントされた直後に呼び出されます。
  • componentDidUpdate(prevProps, prevState): コンポーネントが更新されるたびに呼び出されます。
  • componentWillUnmount(): コンポーネントがアンマウントされる直前に呼び出されます。


クラス型コンポーネントのメリット
  1. 完全性: 長い間、クラス型コンポーネントはReactの主要な機能をフルに活用する唯一の方法でした。
  2. ライフサイクルメソッド: 特定のタイミングで処理を実行するための明確なメソッドが提供されています。


クラス型コンポーネントのデメリット
  1. 冗長性: 関数型コンポーネントと比較して、クラス型コンポーネントはより多くのボイラープレートコードが必要です。
  2. thisの複雑さ: クラスのメソッド内でthisを正しく扱うには、バインドやアロー関数を用いる必要があります。

Hooksの導入により、多くの開発者は関数型コンポーネントの使用を好むようになりました。しかし、多くの既存のプロジェクトやライブラリではまだクラス型コンポーネントが使用されており、その知識は必要です。

propsとは

propsは「プロパティ」の略で、コンポーネントにデータを渡すためのものです。これは不変であり、コンポーネント内でpropsの値を変更することはできません。

コンポーネントの組み合わせ

Reactの美しさは、小さなコンポーネントを組み合わせて大きなUIを構築できる点にあります。

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

このように、既存のWelcomeコンポーネントを3回再利用して、異なるpropsを渡すことで、異なる振る舞いをさせています。

Reactのコンポーネントは、アプリケーションの再利用可能なビルディングブロックです。それぞれのコンポーネントは自身のデータとロジックをカプセル化し、UIを描画する責任を持っています。これにより、大規模なアプリケーションでもその構造を綺麗に保つことができ、開発の効率も大きく向上します。

前の記事へ
次の記事へ

TypeScript

    もっと見る

    Next.js

      もっと見る

      React

        もっと見る

        C++ ライブラリ

          もっと見る