React コンポーネントを理解しよう！【基本】

●目次

コンポーネントとは？

Reactでは、UI（ユーザーインターフェース）を小さな部品＝コンポーネントとして分割・設計します。

例えば下記等の、UIのすべての部分がコンポーネントとして扱われます。
- フォーム
- ヘッダー
- ボタン
- ナビゲーション

コンポーネントのメリット

再利用できる：同じ見た目・機能を何度も使える
分かりやすい構造になる：1ファイル1役割で管理しやすい
保守性が高い：修正が局所的で済む

コンポーネントの種類

Reactには「関数コンポーネント」と「クラスコンポーネント」の2種類のコンポーネントがありますが、近年は「関数コンポーネント」が主流となっています。

関数コンポーネント

関数コンポーネントは、JavaScriptの関数として定義されたシンプルな構造のコンポーネントです。

入力（Props）を受け取り、JSXを返すのが基本的な仕組みです。

関数コンポーネントは、状態管理やライフサイクルメソッドを使うためにフック（Hooks）を利用します。

JS

function Greeting() {
  return <h1>Hello, world!</h1>;
}

クラスコンポーネント

クラスコンポーネントは、ReactのComponentクラスを継承して作られるもので、state（状態）やライフサイクルメソッドを持ち、複雑なUIロジックを実装する際に便利です。
ですが、近年のReact開発では関数コンポーネントが主流になっています。

JS

class Greeting extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

コンポーネントの役割

コンポーネントは、UIの一部を表現するだけでなく、アプリのデータや状態を管理し、処理を実行する役割も担います。

UIの再利用

同じUIのパーツをアプリの異なる場所で何度も使いたい場合に役立ちます。
ボタンやフォーム、ナビゲーションバーなどの要素は、再利用性が高いためコンポーネント化すると便利です。

状態管理とUI更新

Reactでは、コンポーネントに状態（State）を持たせることで、動的なUIを構築できます。
状態が変更されると、自動的にUIも再レンダリングされるため、ユーザーの操作やデータの変化に応じてリアルタイムに画面を更新できます。

データのカプセル化

各コンポーネントが独立しているため、データやロジックを内部でカプセル化し、外部から影響されないように保つことができます。
管理が簡単でバグの発生しにくい構造を実現できます。

コンポーネントを構成する要素

JSX（UI構築構文）

JSXは、HTMLのような構文でUIを構築する方法です。
通常のJavaScriptコード内でUIを記述するため、コードの読みやすさが向上します。

JS

return <button>Click me!</button>;

Props

Props（プロパティ）は、コンポーネント間でデータをやり取りするための手段です。
親 → 子へデータを渡す手段

JS

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

State

Stateは、コンポーネント内部で持つデータで、ユーザーの操作に応じて変更されるものを管理します。
状態を保持して、変化に応じてUIを再描画

JS

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

イベントハンドラ

イベントハンドラを使って、ユーザーの操作に反応する処理を記述できます。
例えば、ボタンがクリックされたときに特定の関数を実行する場合などに使います。

JS

<button onClick={() => alert('Clicked!')}>Click Me</button>

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

Reactでは、画面を小さな部品（コンポーネント）で作り、それを組み合わせて大きなページを完成させます。
まるで「レゴブロック」を組み立てるようなイメージです！

親コンポーネントと子コンポーネントってなに？

親コンポーネント：全体をまとめるコンポーネント（例：ページ全体）
子コンポーネント：親に含まれる小さなパーツ（例：ボタン、タイトルなど）

JS

// 子コンポーネント
function Child() {
  return <p>I am a child!</p>;
}

// 親コンポーネント
function Parent() {
  return (
    <div>
      <h1>I'm the parent</h1>
      <Child />  {/* 子を中に入れる */}
    </div>
  );
}

ブラウザ結果

I'm the parent

I am a child!

親から子にデータを渡す（props）

props とは → 「プロップス」と読みます。親から子にデータを渡すための道具です。

JS

function Hello(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return <Hello name="Taro" />;
}

コンポーネント設計のコツ

Reactのコンポーネント設計では、次のポイントを押さえると効率的です。

小さく分けよう！【1つのコンポーネント＝1つの役割】

1つのコンポーネントの中にたくさんの要素や機能を詰め込みすぎると、コードが読みにくくなったり、修正が大変になります。
そのため、できるだけ1つのコンポーネントには1つの役割だけを持たせるようにしましょう。

たとえば、ヘッダーの中にロゴとナビゲーションがある場合は、それぞれ別のコンポーネントに分けるのがおすすめです。

悪い例（全部1つのコンポーネントに）

JS

function Header() {
  return (
    <div>
      <img src="logo.png" />
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
      </nav>
    </div>
  );
}

良い例（役割ごとに分ける）

JS

function Logo() {
  return <img src="logo.png" />;
}

function Nav() {
  return (
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  );
}

function Header() {
  return (
    <div>
      <Logo />
      <Nav />
    </div>
  );
}

よく使うパーツは再利用できるように作ろう！

Reactの大きな強みは、同じ部品を何度でも使えることです。
そのためには、特定の場所だけでしか使えないような書き方ではなく、汎用的に使えるようにコンポーネントを設計することが大事です。

JS

function MyButton(props) {
  return <button>{props.label}</button>;
}

// どこでも使える！
<MyButton label="ログイン" />
<MyButton label="登録する" />

「見た目」と「中身の処理」を分けよう！

Reactでは、表示だけを担当するパーツ（プレゼンテーション）と、
データを扱うパーツ（ロジック・コンテナ）を分けて書くと整理しやすいよ。

JS

// 表示だけのボタン（中の処理は持たない）
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// 実際の動きは別のところで管理
function App() {
  const handleClick = () => {
    alert("ボタンが押されました！");
  };

  return <Button label="クリック！" onClick={handleClick} />;
}

まとめ

Reactのコンポーネントは、再利用性が高く、シンプルかつ柔軟なアプリケーション構築を可能にする非常に重要な機能です。コンポーネントは次の特徴を持っています。

UIを独立した部品として構築できる
状態管理やデータのやり取りに便利
親子関係で構成し、階層的なUIを実現
複雑なアプリもシンプルな構造で作成可能

これらのポイントを理解し、コンポーネントを活用することで、効率的かつ再利用性の高いReactアプリを作成できます。次は、PropsとJSXについて詳しく学んでいきましょう。