Reactコンポーネントの基礎

Reactは、UIをコンポーネントという部品に分けて作るライブラリです。

コンポーネントとは？

コンポーネントは、UIの一部を表す再利用可能な部品です。

例えば、こんなWebページがあるとします：

┌─────────────────────────┐
│  Header（ヘッダー）      │
├─────────────────────────┤
│  Sidebar  │  Main       │
│  (サイド) │  (メイン)    │
├─────────────────────────┤
│  Footer（フッター）      │
└─────────────────────────┘

これを、Header、Sidebar、Main、Footerという4つのコンポーネントに分けて作れます。

コンポーネントの基本形

Reactでは、コンポーネントは「関数」として書きます。

シンプルな例

function Hello() {
  return <h1>Hello, React!</h1>;
}

ポイント：

関数名は大文字で始める（Helloの"H"は大文字）
JSXをreturnする
JSXは、HTMLのように見えるが実はJavaScript

コンポーネントを使う

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

結果：

Hello, React!
Hello, React!
Hello, React!

同じコンポーネントを何度でも使えます！

JSXとは？

JSXは、JavaScriptの中にHTMLのような記述ができる構文です。

基本ルール

1. 複数の要素を返す場合、1つの親要素で囲む

❌ ダメな例

function App() {
  return (
    <h1>タイトル</h1>
    <p>説明文</p>
  );
}

✅ 正しい例

function App() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>説明文</p>
    </div>
  );
}

2. JavaScriptの式を埋め込むには { } を使う

function App() {
  const name = "太郎";
  const age = 25;
  
  return (
    <div>
      <h1>私の名前は{name}です</h1>
      <p>年齢は{age}歳です</p>
      <p>来年は{age + 1}歳になります</p>
    </div>
  );
}

3. classNameを使う（classではない）

❌ ダメな例

<div class="container">...</div>

✅ 正しい例

<div className="container">...</div>

Props（プロパティ）

Propsは、コンポーネントにデータを渡す仕組みです。関数の引数のようなものです。

基本的な使い方

// Propsを受け取るコンポーネント
function Greeting(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

// Propsを渡す
export default function App() {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting name="花子" />
      <Greeting name="次郎" />
    </div>
  );
}

結果：

こんにちは、太郎さん！
こんにちは、花子さん！
こんにちは、次郎さん！

分割代入を使う（推奨）

// props.nameと書く代わりに、最初から分割代入
function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

TypeScriptで型をつける

// Propsの型を定義
function Greeting({ name }: { name: string }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

// または、インターフェースで定義
interface GreetingProps {
  name: string;
}

function Greeting({ name }: GreetingProps) {
  return <h1>こんにちは、{name}さん！</h1>;
}

複数のPropsを渡す

interface UserCardProps {
  name: string;
  age: number;
  email: string;
}

function UserCard({ name, age, email }: UserCardProps) {
  return (
    <div>
      <h2>{name}</h2>
      <p>年齢: {age}歳</p>
      <p>メール: {email}</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <UserCard 
        name="太郎" 
        age={25} 
        email="[email protected]" 
      />
    </div>
  );
}

条件付きレンダリング

条件によって表示内容を変える方法です。

if文を使う方法

function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
  if (isLoggedIn) {
    return <h1>おかえりなさい！</h1>;
  } else {
    return <h1>ログインしてください</h1>;
  }
}

三項演算子を使う方法（推奨）

function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
  return (
    <h1>
      {isLoggedIn ? "おかえりなさい！" : "ログインしてください"}
    </h1>
  );
}

&& を使う方法

function Notification({ hasUnread }: { hasUnread: boolean }) {
  return (
    <div>
      <h1>通知</h1>
      {hasUnread && <p>未読の通知があります</p>}
    </div>
  );
}

リストのレンダリング

配列をループして、複数の要素を表示する方法です。

function FruitList() {
  const fruits = ["りんご", "バナナ", "オレンジ"];
  
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

重要： key プロパティは必須です。Reactが要素を識別するために使います。

オブジェクトの配列をレンダリング

interface User {
  id: number;
  name: string;
  age: number;
}

function UserList() {
  const users: User[] = [
    { id: 1, name: "太郎", age: 25 },
    { id: 2, name: "花子", age: 23 },
    { id: 3, name: "次郎", age: 30 }
  ];
  
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>年齢: {user.age}歳</p>
        </div>
      ))}
    </div>
  );
}

まとめ

コンポーネント

UIを部品に分けて作る
関数として定義する
関数名は大文字で始める
JSXを返す

JSX

JavaScriptの中にHTMLのような記述ができる
{ } でJavaScriptの式を埋め込む
classではなくclassNameを使う

Props

コンポーネントにデータを渡す仕組み
関数の引数のようなもの
TypeScriptで型をつけると安全

レンダリング

条件付き: ? : や && を使う
リスト: map() を使う、key は必須

次は、状態（State）を扱うHooksを学びましょう！

React基礎 - コンポーネントとProps