React初心者向け｜コンポーネントとは？役割・作成方法・使い回しまで徹底解説

Reactを学び始めると、必ず耳にするのが「コンポーネント（Component）」という言葉です。

Reactでは、このコンポーネントという考え方がアプリケーション開発の中心となっています。

「コンポーネントって何？」「なぜ分ける必要があるの？」「どうやって作るの？」と疑問に感じる方も多いでしょう。

この記事では、Reactにおけるコンポーネントの役割から作成方法、利用方法までを初心者向けにわかりやすく解説します。

---

この記事でわかること

---

コンポーネントとは？

コンポーネント（Component）は、日本語では「部品」や「構成要素」という意味があります。

Reactでは、画面全体を一つひとつの部品に分割し、それらを組み合わせてページを構築します。

例えば、以下のようなものはすべてコンポーネントです。

• ボタン
• 入力フォーム
• ヘッダー
• フッター
• メニュー
• 検索バー

小さな部品だけでなく、大きな部品もすべてコンポーネントとして扱います。

---

Reactはコンポーネントの組み合わせでできている

Reactアプリケーションは、複数のコンポーネントを組み合わせて構成されています。

App
├── Header
├── Main
│   ├── Form
│   ├── Button
│   └── List
└── Footer

また、同じコンポーネントを複数回利用することもできます。

<Button />

<Button />

<Button />

このように、一度作成したコンポーネントは必要な数だけ再利用できます。

コンポーネントを利用するメリット

Reactでコンポーネントを利用する最大のメリットは、再利用（使い回し）ができることです。

例えば、同じデザインのボタンを10か所に配置したい場合でも、毎回HTMLを書く必要はありません。

<Button />

と記述するだけで利用できます。

コンポーネント化することで、次のようなメリットがあります。

• コード量を減らせる
• 保守しやすくなる
• デザインを統一できる
• チーム開発しやすくなる

---

関数コンポーネント

Reactでは現在、関数コンポーネントが標準的な書き方です。

const Button = () => {
  return (
    <button>ボタン</button>
  );
};

export default Button;

---

コンポーネントを作成してみよう

コンポーネントは、.tsxファイルとして作成します。

今回は次のようなディレクトリ構成にします。

src
├── components
│   └── Button.tsx
├── styles
└── App.tsx

Buttonコンポーネントを作成する

最もシンプルなボタンコンポーネントを作成してみましょう。

const Button = () => {
  return (
    <button>ボタン</button>
  );
};

export default Button;

基本的な書き方はApp.tsxとほとんど同じです。

異なるのは、コンポーネント名と表示するUIだけです。

---

Appコンポーネントから利用する

作成したコンポーネントは、importして利用します。

import Button from "./components/Button";

そして、HTMLタグを書くように利用できます。

function App() {
  return (
    <>
      <h1>Reactコース</h1>

      <Button />
      <Button />

    </>
  );
}

<Button />を複数記述すれば、その数だけボタンが表示されます。

これがReactにおけるコンポーネントの再利用です。

---

クラスコンポーネントについて

Reactにはクラスコンポーネントという書き方もあります。

しかし現在では、React公式でも関数コンポーネントを中心とした開発が推奨されています。

これからReactを学ぶ場合は、まず関数コンポーネントを習得すれば十分です。

まとめ

Reactでは、「コンポーネント化する」という考え方が非常に重要です。

最初は「なぜファイルを分けるのだろう？」と感じるかもしれませんが、アプリケーションが大きくなるほど、コンポーネント化のメリットを実感できるようになります。

まずはボタンのような小さなコンポーネントから作成し、少しずつ部品を組み合わせながらReactらしい開発スタイルに慣れていきましょう。