●目次
Reactのコンポーネントは、アプリケーションのUI（ユーザーインターフェース）を作成するための重要な単位です。
Reactを使うと、アプリを小さなパーツに分けて組み合わせることができ、再利用やメンテナンスが簡単になります。
コンポーネントとは？
Reactでは、UIをコンポーネントという「パーツ」に分割して作成します。
コンポーネントは、ボタンやナビゲーションバー、ヘッダーなどのように、アプリ内の特定の部分を担当します。
コンポーネントを使うことで、アプリを小さな単位で作成し、それらを組み合わせてアプリ全体を構築できます。
コンポーネントの種類
Reactには「関数コンポーネント」と「クラスコンポーネント」の2種類のコンポーネントがありますが、近年は「関数コンポーネント」が主流となっています。
関数コンポーネント
関数コンポーネントは、JavaScriptの関数として定義されたシンプルな構造のコンポーネントです。
入力（Props）を受け取り、JSXを返すのが基本的な仕組みです。
関数コンポーネントは、状態管理やライフサイクルメソッドを使うためにフック（Hooks）を利用します。
function Greeting() {
return <h1>Hello, world!</h1>;
}クラスコンポーネント
クラスコンポーネントは、ReactのComponentクラスを継承して作られるもので、state（状態）やライフサイクルメソッドを持ち、複雑なUIロジックを実装する際に便利です。
ですが、近年のReact開発では関数コンポーネントが主流になっています。
class Greeting extends React.Component {
render() {
return <h1>Hello, world!</h1>;
}
}コンポーネントの役割
コンポーネントは、UIの一部を表現するだけでなく、アプリのデータや状態を管理し、処理を実行する役割も担います。
コンポーネントは次のような場面で活用されます。
- UIの再利用
同じUIのパーツをアプリの異なる場所で何度も使いたい場合に役立ちます。
ボタンやフォーム、ナビゲーションバーなどの要素は、再利用性が高いためコンポーネント化すると便利です。 - 状態管理とUI更新
Reactでは、コンポーネントに状態（State）を持たせることで、動的なUIを構築できます。
状態が変更されると、自動的にUIも再レンダリングされるため、ユーザーの操作やデータの変化に応じてリアルタイムに画面を更新できます。 - データのカプセル化
各コンポーネントが独立しているため、データやロジックを内部でカプセル化し、外部から影響されないように保つことができます。
これにより、管理が簡単でバグの発生しにくい構造を実現できます。
コンポーネントの構成
コンポーネントを作成する際には、以下の構成要素がよく使用されます。
- コンポーネント名：
コンポーネント名は大文字で始めます。
Reactでは、コンポーネントがHTMLタグと区別できるように、PascalCase（例：MyComponent）で命名するのが一般的です。 - JSX構文：
JSXは、HTMLのような構文でUIを構築する方法です。
通常のJavaScriptコード内でUIを記述するため、コードの読みやすさが向上します。 - PropsとState：
- Props（プロパティ）は、コンポーネント間でデータをやり取りするための手段です。
- Stateは、コンポーネント内部で持つデータで、ユーザーの操作に応じて変更されるものを管理します。
- イベントハンドラ：
イベントハンドラを使って、ユーザーの操作に反応する処理を記述できます。例えば、ボタンがクリックされたときに特定の関数を実行する場合などに使います。
コンポーネントの組み合わせ
Reactでは、親子関係や兄弟関係を作ってコンポーネント同士を組み合わせ、階層的なUIを構築することが可能です。これにより、各コンポーネントが独自の役割を持ち、全体としてまとまりのあるUIを作ることができます。
- 親コンポーネントと子コンポーネント：
親コンポーネントが子コンポーネントを含み、子コンポーネントにデータを渡したり、子からのイベントを受け取ったりします。
function ParentComponent() {
return (
<div>
<ChildComponent />
</div>
);
}
function ChildComponent() {
return <p>I am a child component!</p>;
}- コンポーネントの入れ子構造：
コンポーネントは、別のコンポーネントの中で使うことができるため、複雑なUIもシンプルに記述できます。例えば、ナビゲーションバーに含まれるリンクやロゴをそれぞれコンポーネントとして分割し、メインのナビゲーションバーコンポーネントに組み込むことが可能です。
コンポーネント設計のポイント
Reactのコンポーネント設計では、次のポイントを押さえると効率的です。
- シンプルな構造に分割：
1つのコンポーネントで多くの機能を持たせると管理が難しくなるため、可能な限り小さなコンポーネントに分けます。各コンポーネントが1つの明確な役割を持つようにすると、保守性が向上します。 - 再利用性の確保：
汎用的なコンポーネント（例：ボタンやフォーム）は、複数の場所で使えるようにデザインします。 - プレゼンテーショナルとコンテナの分離：
プレゼンテーショナルコンポーネントは、UIの見た目や表示に関する部分を担当し、コンテナコンポーネントはデータの取得や状態管理など、アプリのロジックを担当します。これにより、UIとロジックの分離が容易になります。
まとめ
Reactのコンポーネントは、再利用性が高く、シンプルかつ柔軟なアプリケーション構築を可能にする非常に重要な機能です。コンポーネントは次の特徴を持っています。
- UIを独立した部品として構築できる
- 状態管理やデータのやり取りに便利
- 親子関係で構成し、階層的なUIを実現
- 複雑なアプリもシンプルな構造で作成可能
これらのポイントを理解し、コンポーネントを活用することで、効率的かつ再利用性の高いReactアプリを作成できます。次は、PropsとJSXについて詳しく学んでいきましょう。