C
React 一覧
前へ3 / 22次へ
React/コンポーネント/Lesson 03

コンポーネントの基礎

30分·theory
このチャプター
1/4
JavaScript

コンポーネントの基礎

💡 なぜ学ぶ必要があるのか？

🎯 Reactの最も核心的な概念であり、すべての基礎となります。
💼 大きな画面を小さな部品に分割して管理できます。
⚡ 同じUIを複数の場所で再利用することで、開発速度を向上させます。
🏢 실무에서는
実務では、Header、Footer、Sidebar、ProductCardといったコンポーネントを作成して組み合わせます。例えば、ECサイトで商品カードコンポーネントを一度作れば、数百件の商品一覧で再利用できます。

コンポーネント — レゴブロックのように組み立てるUI

身近な例え: レゴブロック

レゴで家を作るとき、壁・窓・屋根のブロックを組み合わせます。
Reactのコンポーネントも、Button・Card・Headerのような
小さなUIのかけらを組み合わせて画面を作ります。

なぜ学ぶのか？

  • ▸再利用性: 一度作ったButtonを何百箇所でも使える
  • ▸分離: 各コンポーネントが独立している → メンテナンスが容易
  • ▸テスト: 小さな単位でテストが可能

コンポーネントのルール

1. 名前は必ず大文字で始める (Button ✅, button ❌)

2. JSXを返す必要がある

3. ルート要素を1つ返す (またはFragment <> )

関数コンポーネントの基本形

jsx
function Button() {
  return <button>クリック</button>;
}
💻 Button、Card、UserProfileコンポーネント 
// ===== 再利用可能な Button コンポーネント =====
function Button({ label, onClick, color = "blue" }) {
  // 入力: label(テキスト), onClick(関数), color(色)
  // 処理: スタイル適用
  // 出力: ボタン JSX
  return (
    <button
      onClick={onClick}
      style={{ backgroundColor: color, color: "white", padding: "8px 16px" }}
    >
      {label}
    </button>
  );
}

// ===== カード コンポーネント =====
function Card({ title, description, imageUrl }) {
  return (
    <div className="card">
      {imageUrl && <img src={imageUrl} alt={title} />}
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

// ===== ユーザープロフィール コンポーネント (Button 再利用) =====
function UserProfile({ name, email, avatar }) {
  const handleFollow = () => alert(`${name}さんをフォローしました！`);

  return (
    <div className="profile">
      <img src={avatar} alt={name} width={60} />
      <h2>{name}</h2>
      <p>{email}</p>
      {/* Button コンポーネントを再利用 */}
      <Button label="フォロー" onClick={handleFollow} color="green" />
    </div>
  );
}

// ===== Appで組み立て =====
export default function App() {
  return (
    <div>
      <UserProfile name="山田太郎" email="[email protected]" avatar="/avatar.png" />
      <Card title="React 学習" description="コンポーネントベースのUI開発" />
    </div>
  );
}

💡 💡 コンポーネント設計のヒント

  • ▸小さく保つ: 100行以下が理想的
  • ▸Propsの型定義: TypeScriptのinterfaceは必須
  • ▸デフォルト値: デフォルトパラメータを活用する
  • ▸Compositionパターン: Card.Headerのようなサブコンポーネント

この概念はReactコンポーネント開発の核心です。Reactの宣言的UIパラダイムを理解し、propsとstateの違いを明確に区別しましょう。コンポーネントは、入力(props)に対して常に同じ出力(JSX)を返す純粋関数のように振る舞う必要があります。

⚛️ Reactパターン — コンポーネントの基礎

コンポーネントの基礎をReactでどのように使うか、コードとともにステップバイステップで学んでいきましょう。
1 🧩 1. コンポーネントの定義
関数そのものがコンポーネントになる
function Greeting({ name }) {
  return <h1>こんにちは、{name}！</h1>;
}
↓
2 📤 2. Propsの受け渡し
親 → 子への単方向データフロー
<Greeting name="山田太郎" />
↓
3 🔁 3. 再利用
同じコンポーネントを、異なるpropsで何度でも使う
<Greeting name="Alice" />
<Greeting name="Bob" />
↓
4 💡 4. 単方向データフロー
子が親のstateを変更するには、コールバック関数をpropsとして受け取る

🧩 コンポーネントの合成

コードを直接編集すると、0.7秒後に自動で反映されます。React 18 + Babelを使ってブラウザ上で即時実行されます。
🖥️ 実行結果 — レンダリングされたReactコンポーネント
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — まず結果を確認し、エディタで自由に編集できます。

確認クイズ

Reactコンポーネントの命名規則とは？
💡 Reactコンポーネントは必ず大文字で始めなければなりません。`<button>`はHTMLタグとして、`<Button>`はReactコンポーネントとして区別されます。小文字で始めると、ReactはそれをHTMLタグとして認識します！
先に読むとよい概念: JSX 構文
次のおすすめ: Props
前へ一覧次へ
コンポーネントの基礎 - React