1. Reactでスタイルを考える理由

Reactでは、画面を小さな部品で組み立てていきます。そのため、見た目のスタイルも部品ごとに考える必要があります。何も考えずに書くと、同じ色や余白の指定を何度も書くことになり、修正したいときにすべて探して直さなければなりません。

スタイルを切り出すとは、よく使う見た目のルールをまとめて管理することです。これにより、Reactのコンポーネント再利用と分割がより効果的になります。

2. スタイルを直接書いた場合の問題点

まずは、スタイルをそのまま書いた例を見てみましょう。初心者が最初にやりがちな書き方です。


function App() {
  return (
    <div style={{ padding: "16px", border: "1px solid #ccc" }}>
      <h2 style={{ color: "#333" }}>タイトル</h2>
      <p>内容が入ります</p>
    </div>
  );
}

export default App;

（枠線付きのエリアにタイトルと文章が表示されます）

この方法は簡単ですが、同じデザインを別の場所でも使いたくなると、まったく同じスタイルを書く必要が出てきます。

3. 共通スタイルをコンポーネントにする

再利用性を高める基本は、見た目そのものをコンポーネントにすることです。カードや枠のような見た目は、部品として切り出すと使い回しやすくなります。


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

export default Card;

childrenとは、コンポーネントの中に入れた内容を受け取る仕組みです。難しく考えず、「中身を差し替えられる箱」と覚えると理解しやすくなります。

4. 作成したスタイル付きコンポーネントを使う

切り出したCardコンポーネントを使うと、見た目の再利用がとても簡単になります。


import Card from "./Card";

function App() {
  return (
    <Card>
      <h2>お知らせ</h2>
      <p>これは共通デザインのカードです。</p>
    </Card>
  );
}

export default App;

（同じ枠デザインで内容だけが変わった表示になります）

このように、スタイルを持った部品を作ることで、デザインの統一とコードの整理を同時に行えます。

5. propsでスタイルを少しだけ変える

すべて同じ見た目では困ることもあります。そんなときは、propsを使ってスタイルの一部だけ変えられるようにします。


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

export default Card;

色などの変化しやすい部分だけを外から指定することで、再利用性と柔軟性のバランスが取れます。