先生と生徒の会話形式で理解しよう

生徒

「Reactの『コンポーネント』ってよく聞くけど、どういう意味なんですか？」

先生

「Reactでは、ユーザーインターフェースを小さな部品に分けて、それぞれを『コンポーネント』として作ります。」

生徒

「えっと…部品ってたとえば何ですか？」

先生

「たとえば、ボタンや見出し、入力フォームなどです。それぞれが独立して動く部品なんですよ。」

生徒

「なるほど、それを組み合わせて画面を作るんですね！」

先生

「そうです。じゃあ、Reactのコンポーネントの基本を見ていきましょう。」

1. Reactにおけるコンポーネントとは？

React（リアクト）は、ユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。このReactでは、コンポーネント（component）という考え方がとても大切です。コンポーネントとは、簡単に言えば「画面のパーツ（部品）」のことです。

たとえば、Webサイトの中にある「見出し」「ボタン」「入力欄」「一覧表」などのパーツは、Reactではすべて独立した部品として作ることができます。このように部品を分けて作ることで、プログラムを整理しやすくし、再利用もしやすくなります。

このようなやり方を「コンポーネントベースの設計」と言います。Reactではこの考え方が基本となっており、大きな画面も小さな部品の組み合わせで作られています。

2. コンポーネントはどうやって作るの？

Reactでコンポーネントを作るには、JavaScriptの関数を使って定義します。これを関数コンポーネントと呼びます。以下は、とてもシンプルなコンポーネントの例です。


import React from "react";

function Hello() {
  return (
    <h1>こんにちは、React！</h1>
  );
}

export default Hello;

このHelloという関数コンポーネントは、「こんにちは、React！」という見出しを表示するだけの部品です。とてもシンプルですね。

（画面に「こんにちは、React！」と表示されます）

3. コンポーネントを組み合わせるとは？

Reactでは、作ったコンポーネントを他のコンポーネントの中で使うことができます。これをネスト（入れ子）と言います。

たとえば、先ほどのHelloコンポーネントをAppという別のコンポーネントに組み込むと、次のようになります。


import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
      <p>これはAppコンポーネントの中身です。</p>
    </div>
  );
}

export default App;

（画面に「こんにちは、React！」と「これはAppコンポーネントの中身です。」が表示されます）

このように、1つの画面をたくさんの部品で構成するのがReactの特徴です。

4. コンポーネントにはルールがある

Reactのコンポーネントには、いくつかのルールがあります。ここでは初心者の方が知っておくべきルールを紹介します。

最初の1文字は大文字で書く：たとえばfunction Hello()のように書きます。
必ず何かを返す（return）必要がある：return (...)のようにHTMLっぽいコードを返します。
タグは1つの親要素で囲む：複数のタグを返すときは<div>...</div>のように囲みます。

これらを守れば、エラーが出にくくなります。

5. 状態を持たせることもできる

Reactのコンポーネントには、状態（state）という仕組みがあります。これは、画面の内容を変えるときに使います。

たとえば、ボタンを押すとメッセージが変わるコンポーネントを作ることもできます。


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリックしてみよう
      </button>
    </div>
  );
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

useStateは、コンポーネントの中で状態を持たせるための仕組みです。「ユーズステート」と読みます。

6. Reactのコンポーネントは再利用できる

Reactのコンポーネントは、一度作ると何度でも使い回すことができるのが大きな特徴です。

たとえば、Buttonというボタンの部品を作っておけば、違う画面でも、何回でも呼び出せます。同じ見た目や動きを何回も書かなくて済むので、効率よく画面を作ることができます。

また、見た目だけでなく、中の処理やボタンの動きも再利用できるので、プログラムの管理がとても楽になります。

まとめ

Reactにおけるコンポーネントの基本を振り返ると、まずコンポーネントとは「画面を構成する部品」のことです。ボタンや見出し、入力フォームなど、独立したUI要素をコンポーネントとして作成し、それを組み合わせて画面全体を構築します。関数コンポーネントやクラスコンポーネントを使うことで、状態（state）やイベント処理を持たせ、動的なUIを作成できます。また、コンポーネントを再利用することで、コードの効率化や保守性の向上にもつながります。

コンポーネントを作る際には、いくつかのルールが重要です。まず、コンポーネント名の最初は大文字で書くこと、必ずreturnでJSXを返すこと、複数のタグを返す場合は1つの親要素で囲むことなどです。さらに、useStateを使うことでコンポーネントに状態を持たせることができ、ユーザーの操作に応じて表示内容を変化させることが可能です。例えばボタンを押すとテキストが変わるようなインタラクティブなUIも簡単に実装できます。

また、コンポーネントを他のコンポーネント内でネストさせることで、複雑な画面も小さな部品の組み合わせで構成できます。ネストやpropsを活用することで、親コンポーネントから子コンポーネントにデータを渡し、動的な表示や条件分岐を実現できます。これにより、画面全体のロジックを整理しやすく、複数の開発者での作業もスムーズになります。

サンプルプログラムまとめ


import React, { useState } from "react";

// 再利用可能なButtonコンポーネント
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// メインコンポーネント
function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <Button label="ボタンA" onClick={() => setMessage("ボタンAがクリックされました！")} />
      <Button label="ボタンB" onClick={() => setMessage("ボタンBがクリックされました！")} />
    </div>
  );
}

export default App;

（再利用可能なButtonコンポーネントを使って、ボタンAまたはボタンBを押すと対応するメッセージが表示されます）

先生と生徒の振り返り会話

生徒

「Reactのコンポーネントって、ただのHTMLタグよりもずっと便利なんですね。」

先生

「そうです。部品ごとに分けられるので、再利用性が高く、状態やイベントも簡単に管理できます。」

生徒

「propsやstateを使えば、コンポーネント間で情報を渡したり、動的に画面を変えたりできるんですね。」

先生

「その通りです。小さな部品の組み合わせで複雑な画面も簡単に作れるのがReactの強みです。」

生徒

「関数コンポーネントでstateを持たせて、ボタンで表示を切り替える例も理解できました！」