プログラミング

Reactコンポーネントの基本

最終更新： 28/03/2025
1 分の読み

Reactは、ユーザーインターフェース（UI）を構築するための非常に人気のあるJavaScriptライブラリであり、その中心にあるのが「コンポーネント」です。コンポーネントは、Reactアプリケーションを構成する基本的な構成要素であり、UIの再利用可能な部分を作成するためのものです。この記事では、Reactコンポーネントの基本的な概念、種類、そして実装方法について詳しく説明します。

Reactコンポーネントとは？

Reactコンポーネントは、UIの一部を表現する独立したブロックです。コンポーネントは、状態（state）やプロパティ（props）を管理し、ユーザーがインタラクションするたびに動的に変化するUIを作成するための役割を果たします。コンポーネントは、他のコンポーネントを親子関係で組み合わせて、複雑なインターフェースを構築することができます。

関連記事

コンポーネントは、JavaScriptの関数またはクラスとして実装され、HTMLのようなJSX（JavaScript XML）記法を使ってUIを定義します。

コンポーネントの種類

Reactコンポーネントには主に2つのタイプがあります。それぞれの違いと用途を理解することは、React開発の基本です。

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

関数型コンポーネントは、JavaScriptの関数として定義され、UIを返すためにJSXを使用します。最もシンプルな形式のコンポーネントであり、状態管理やライフサイクルメソッドを使用しない場合に最適です。

javascript
function Greeting(props) {
  return <h1>Hello, {props.name}!h1>;
}

上記の例では、Greetingという関数型コンポーネントがnameというプロパティを受け取り、それを表示します。関数型コンポーネントは、状態や副作用の管理が必要ない単純なUIを作成するために広く使われます。

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

クラス型コンポーネントは、ES6のクラス構文を使用して定義されます。状態（state）やライフサイクルメソッドを使いたい場合に必要です。React 16.8以降、関数型コンポーネントでも状態管理や副作用の処理ができるようになったため、クラス型コンポーネントは徐々に使われなくなっていますが、既存のコードベースや複雑なロジックが必要な場合には引き続き使用されます。

javascript
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!h1>;
  }
}

クラス型コンポーネントは、renderメソッド内でJSXを返す点が特徴です。また、this.stateを使用して状態を管理し、componentDidMountやcomponentDidUpdateなどのライフサイクルメソッドを使用できます。

コンポーネントのプロパティ（Props）

Reactコンポーネントには「プロパティ（props）」が渡されます。プロパティは、コンポーネントの外部から渡されるデータであり、コンポーネントの表示を変更するために使用されます。propsは読み取り専用であり、コンポーネント内で直接変更することはできません。これにより、コンポーネントの再利用性が高まり、データフローが予測可能になります。

javascript
function WelcomeMessage(props) {
  return <h1>Welcome, {props.username}!h1>;
}

<WelcomeMessage username="Alice" />

上記の例では、usernameというプロパティがWelcomeMessageコンポーネントに渡され、その値が表示されます。

コンポーネントの状態（State）

状態（state）は、コンポーネント内部で保持されるデータであり、ユーザーのインタラクションや非同期処理によって変更される可能性があります。状態が変更されると、Reactは自動的にコンポーネントを再レンダリングし、UIを更新します。

状態は、クラス型コンポーネントではthis.stateを使って管理し、関数型コンポーネントではReact Hooksを使用して管理します。

クラス型コンポーネントでの状態管理

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}p>
        <button onClick={this.increment}>Incrementbutton>
      div>
    );
  }
}

関数型コンポーネントでの状態管理（React Hooks）

javascript
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}p>
      <button onClick={increment}>Incrementbutton>
    div>
  );
}

React Hooksを使うことで、関数型コンポーネントでも状態管理が可能になりました。useStateフックを使って状態を定義し、setCount関数を使って状態を更新します。

コンポーネントのライフサイクル

Reactコンポーネントは、特定のタイミングで呼ばれる一連のメソッドを持っています。これを「ライフサイクルメソッド」と呼び、コンポーネントがマウント（DOMに追加）される時や更新される時、アンマウント（DOMから削除）される時などに特定の処理を実行できます。

クラス型コンポーネントでのライフサイクルメソッド

javascript
class MyComponent extends React.Component {
  componentDidMount() {
    console.log('コンポーネントがマウントされました');
  }

  componentWillUnmount() {
    console.log('コンポーネントがアンマウントされます');
  }

  render() {
    return <div>Hello, World!div>;
  }
}

関数型コンポーネントでのライフサイクル管理（React Hooks）

React Hooksを使うことで、関数型コンポーネントでもライフサイクルメソッドを管理することができます。useEffectフックは、コンポーネントのマウント時、更新時、アンマウント時に副作用を実行するために使用されます。

javascript
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('コンポーネントがマウントされました');

    return () => {
      console.log('コンポーネントがアンマウントされます');
    };
  }, []);

  return <div>Hello, World!div>;
}

コンポーネントの再利用

Reactコンポーネントの最大の利点の一つは、その再利用性です。1度作成したコンポーネントは、アプリケーション内の複数の場所で使い回すことができ、コードの重複を避けることができます。再利用性の高いコンポーネントを作成することは、効率的な開発の鍵となります。

結論

Reactコンポーネントは、アプリケーションの構築において非常に重要な役割を果たします。状態管理、プロパティの受け渡し、ライフサイクル管理、再利用性の確保など、Reactコンポーネントを効果的に活用することで、スケーラブルで効率的なアプリケーションを作成することができます。コンポーネントの理解は、Reactを使いこなすための第一歩であり、これらの基本を抑えることが、React開発をスムーズに進めるために不可欠です。

最終更新： 28/03/2025
1 分の読み
Back to top button