1. UIライブラリ的な共通コンポーネントとは

UIライブラリとは、画面の部品をまとめたセットのことです。ボタンや入力欄、カード表示など、よく使う見た目と動きを部品として用意します。 Reactでは、これらをコンポーネントとして作ります。市販の家具を使う感覚で、画面を組み立てられるのが特徴です。初心者のうちは、まず自分用の小さな部品集を作るのがおすすめです。

2. 共通コンポーネントを作るメリット

共通コンポーネントを作る最大の利点は、同じコードを何度も書かなくてよい点です。見た目を変更したい場合も、一か所直すだけで全画面に反映されます。これは、学校の制服を全員で着るようなイメージです。デザインが統一され、画面全体が整って見えます。バグも減り、管理がとても楽になります。

3. まずはシンプルなButtonコンポーネントを作る

最初に作りやすいのが、ボタンの共通コンポーネントです。表示する文字と、クリック時の処理を外から受け取る形にします。これにより、どの画面でも同じボタンを使い回せます。 Reactのpropsという仕組みを使って、外から情報を渡します。


function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

export default Button;

4. 共通Buttonを画面で使ってみる

作成したButtonコンポーネントは、他のコンポーネントから呼び出します。表示する文字だけを変えれば、同じ見た目のボタンが簡単に増やせます。これは、同じ型のスタンプで文字だけ変えるような感覚です。 UIライブラリ的な使い方の第一歩です。


import Button from "./Button";

function App() {
  return (
    <div>
      <Button label="送信" onClick={() => alert("送信しました")} />
      <Button label="キャンセル" onClick={() => alert("中止しました")} />
    </div>
  );
}

export default App;

（同じ見た目のボタンが2つ表示され、それぞれクリックするとメッセージが変わります）

5. CardやBoxなど見た目用コンポーネントを作る

次に、枠や背景を持つコンポーネントを作ります。中身を自由に入れられるようにするのがポイントです。 Reactではchildrenという仕組みを使うことで、箱の中に好きな要素を入れられます。これは、お弁当箱の中におかずを詰めるイメージです。


function Card({ children }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "16px" }}>
      {children}
    </div>
  );
}

export default Card;