React コンポーネント

Volardev 編集部 April 28, 2026

コンポーネント（Components）は、HTML 要素を返す関数（Functions）のようなものです。

1. React コンポーネントとは

コンポーネントは、独立した再利用可能なコードの断片です。JavaScript の関数と同じ目的を果たしますが、独立して動作し、最終的に HTML を返すという特徴があります。

コンポーネントには「クラスコンポーネント（Class components）」と「関数コンポーネント（Function components）」の 2 種類がありますが、本チュートリアルでは関数コンポーネントに焦点を当てます。

古い React のコードベースではクラスコンポーネントが主に使われているのを目にするかもしれませんが、現在はクラスコンポーネントの代わりに関数コンポーネントと フック（Hooks） を組み合わせて使用することが推奨されています。

1.1 初めてのコンポーネント作成

React コンポーネントを作成する際、コンポーネント名は必ず大文字で始める必要があります。また、コンポーネントは HTML コードを返します。

例：Car という名前の関数コンポーネントを作成する

function Car() {
  return (
    <h2>こんにちは、私は車です！</h2>
  );
}

2. コンポーネントのレンダリング

これで、<h2> 要素を返す Car というコンポーネントが作成できました。
このコンポーネントをアプリケーションで使用するには、<Car /> のように記述して参照します。

例：root 要素に Car コンポーネントを表示する

createRoot(document.getElementById('root')).render(
  <Car />
);

3. プロップス (Props)

コンポーネントには、プロップス（Props）として引数を渡すことができます。Props は「Properties（プロパティ）」の略です。

引数は HTML の属性（Attributes）と同じ形式でコンポーネントに送られます。Props の詳細は、後の「React Props」の章で詳しく学習します。

例：属性を使用して Car コンポーネントに色を渡し、レンダリング関数内でそれを使用する

function Car(props) {
  return (
    <h2>私は {props.color} の車です！</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car color="赤"/>
);

4. コンポーネントのネスト

コンポーネントの中で他のコンポーネントを参照（ネスト）させることができます。

例：Garage コンポーネントの中で Car コンポーネントを使用する

function Car() {
  return (
    <h2>私は車です！</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>私のガレージには誰が住んでいる？</h1>
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

5. コンポーネントの再利用

1 つのコンポーネントを複数回レンダリングすることも可能です。

例：Garage コンポーネント内で Car コンポーネントを 2 回使用する

function Car() {
  return (
    <h2>私は車です！</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>私のガレージには誰が住んでいる？</h1>
      <Car />
      <Car />
    </>
  );
}

上記の例はあまり実用的ではありませんが、引数（Props）を使って Car コンポーネントの内容を変化させれば、その利便性がより明確になります。

例：Car コンポーネントを使用して、2 つの異なるブランドを表示する

function Car(props) {
  return (
    <h2>私は {props.brand} です！</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>私のガレージには誰が住んでいる？</h1>
      <Car brand="フォード" />
      <Car brand="BMW" />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

6. ファイルの分割管理

React の真髄は「コードの再利用」にあります。コンポーネントを個別のファイルに分割することは、プロジェクトの管理において非常に優れた手法です。

これを行うには、src フォルダ内に拡張子 .jsx の新しいファイルを作成し、その中にコードを記述します。
※ファイル名も必ず大文字で始める必要があります。

例：新しいファイル Vehicle.jsx を作成する

// Vehicle.jsx
function Car() {
  return (
    <h2>こんにちは、私は車です！</h2>
  );
}

export default Car;

作成した Car コンポーネントを使用するには、アプリケーション内で Vehicle.jsx ファイルをインポート（Import）する必要があります。

例：Vehicle.jsx をインポートして使用する

// main.jsx
import { createRoot } from 'react-dom/client'
import Car from './Vehicle.jsx';

createRoot(document.getElementById('root')).render(
  <Car />
);

これで、別ファイルで定義した Car コンポーネントを、まるでその場で作成したかのように利用できるようになりました。