コンポーネント

コンポーネントとは？

コンポーネントは、ReactにおけるUIの基本単位です。 ボタン、ヘッダー、カード、フォームなど、UIの各パーツをコンポーネントとして定義し、 それらを組み合わせてアプリケーション全体を構築します。

Reactでは主に関数コンポーネントを使います。 これはJSXを返す関数で、名前は必ず大文字で始めるのがルールです。

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

最もシンプルなコンポーネントは、JSXを返す関数です。

// シンプルなコンポーネント
function Welcome() {
  return <h1>ようこそ！</h1>;
}

// アロー関数でも書ける
const Goodbye = () => {
  return <h1>さようなら！</h1>;
};

// 複数の要素を返す場合
function Header() {
  return (
    <header>
      <h1>マイアプリ</h1>
      <nav>
        <a href="/">ホーム</a>
        <a href="/about">概要</a>
      </nav>
    </header>
  );
}

// 他のコンポーネントから使う
function App() {
  return (
    <div>
      <Header />
      <Welcome />
      <Goodbye />
    </div>
  );
}

コンポーネント名は必ず大文字で始めます。小文字だとHTMLの標準タグとして扱われます。

コンポーネントの組み合わせ（コンポジション）

小さなコンポーネントを組み合わせて、大きなUIを作るのがReactの基本思想です。

// 小さなコンポーネント
function Avatar() {
  return <img src="/avatar.png" alt="アバター" className="avatar" />;
}

function UserName() {
  return <span className="username">田中太郎</span>;
}

function UserBio() {
  return <p>Webエンジニア。React大好き。</p>;
}

// 小さなコンポーネントを組み合わせる
function UserCard() {
  return (
    <div className="user-card">
      <Avatar />
      <UserName />
      <UserBio />
    </div>
  );
}

// さらに組み合わせてページを作る
function ProfilePage() {
  return (
    <div className="profile-page">
      <h1>プロフィール</h1>
      <UserCard />
      <UserCard />  {/* 同じコンポーネントを何度でも使える */}
    </div>
  );
}

childrenプロパティ

コンポーネントのタグの間に書いた内容は、children として 受け取ることができます。これにより、汎用的なレイアウトコンポーネントを作れます。

// childrenを受け取るコンポーネント
function Card({ children }) {
  return (
    <div style={{
      border: "1px solid #ddd",
      borderRadius: "8px",
      padding: "16px",
      margin: "8px 0",
    }}>
      {children}
    </div>
  );
}

// レイアウトコンポーネント
function PageLayout({ children }) {
  return (
    <div className="page">
      <header>
        <h1>マイサイト</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>&copy; 2025 マイサイト</p>
      </footer>
    </div>
  );
}

// 使い方
function App() {
  return (
    <PageLayout>
      <Card>
        <h2>お知らせ</h2>
        <p>新機能がリリースされました。</p>
      </Card>
      <Card>
        <h2>メンテナンス</h2>
        <p>明日10時からメンテナンスを行います。</p>
      </Card>
    </PageLayout>
  );
}

ファイル分割とインポート

実際の開発では、コンポーネントをファイルごとに分割して管理します。

// --- Button.jsx ---
export default function Button({ label }) {
  return (
    <button className="btn">{label}</button>
  );
}

// --- Header.jsx ---
import Button from "./Button";

export default function Header() {
  return (
    <header>
      <h1>マイアプリ</h1>
      <Button label="ログイン" />
    </header>
  );
}

// --- App.jsx ---
import Header from "./Header";
import Button from "./Button";

export default function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>ようこそ！</h2>
        <Button label="始める" />
      </main>
    </div>
  );
}

// 名前付きエクスポートも可能
// export function Button() { ... }
// import { Button } from "./Button";

まとめ

• コンポーネントはJSXを返す関数（名前は大文字始まり）
• 小さなコンポーネントを組み合わせてUIを構築する
• children で汎用的なラッパーコンポーネントを作れる
• ファイルを分割して import / export で管理する