React学習ログ No.11

React公式ドキュメント学習メモ：UI の記述

1. 初めてのコンポーネント

React UIの基本単位
マークアップ、CSS、JSを再利用可能な部品にまとめたもの

基本のルール

• JavaScript関数 (function) で作成
• 名前は必ず 大文字 (Profile など) で始める
• JSXマークアップを return する

作成フロー

1. export する
2. function を定義
3. return でマークアップ（JSX）を返す

export default function Profile() {
  return (
    <img
      src="..."
      alt="Katherine Johnson"
    />
  );
}

コンポーネントのインポートとエクスポート

種類	エクスポート (書き出し)	インポート (取り込み)
デフォルト	export default function ...	import Button from '...';
名前付き	export function ...	import { Button } from '...'; ← 波括弧が必要

---

2. JSX のルールとJSの埋め込み

JavaScript内でHTMLライクなマークアップを書くための構文

必須の3原則

1. 単一ルート要素: 必ず <> や <div> など、一つの親要素で囲むこと
2. タグを閉じる: <img />, <br /> のように、すべて閉じること
3. キャメルケース: HTML属性は className のように キャメルケース で書くこと

JSの埋め込み (波括弧 {})

JSX内で 変数やJSの式 を使いたい場合は 波括弧 {} を使う

• 文字列属性：引用符 ("" または '') で囲む
• JSの値：波括弧 {変数名} で囲む

// 変数の値を属性に渡す例
const avatar = '...';
return (
  <img
    src={avatar} // 変数参照
    alt={"文字列リテラル"} // 文字列リテラルを渡すためだけに{}を使うのは冗長
  />
);

---

3. Props によるデータ渡し

親コンポーネントから子コンポーネントへ情報を渡す仕組み
コンポーネントを呼び出す際の「属性」として渡す

受け渡し手順

1. 親: 子コンポーネントを呼び出す際に属性として渡す
   (<Avatar person={{...}} size={100} />)
2. 子: 関数の引数として受け取る
   分割代入 ({ person, size }) を使うのがベスト

// 子コンポーネントでの受け取り方 (ベストプラクティス)
function Avatar({ person, size = 100 /* デフォルト値も設定可能 */ }) {
  // ...
}

活用テクニック

• スプレッド構文: props オブジェクトをそのまま子に渡せる (<Avatar {...props} />)
• children プロパティ: <Card><Avatar /></Card> のようにネストした要素は、Card の children という特別な prop として受け取れる

---

4. 条件付きレンダーとリスト表示

条件付きレンダー

JSX内の 波括弧 {} の中でJSの分岐ロジックを使う

目的	構文	使い方
2択	三項演算子	{cond ? <A /> : <B />}
1択	論理積 (&&)	{cond && <A />} (偽なら null を返し、何も表示しない)
複雑な分岐	if 文	JSXの外側で if を使い、結果を変数に入れてJSX内で利用する

リストのレンダー

配列 (Array) データと map() 関数 を組み合わせて表示

1. 配列に対して map() を呼び出す
2. 各要素を JSX要素 (<li> など) に変換
3. <ul> や <ol> で囲んで return

export default function List() {
  const listItems = people
    .filter(person => person.profession === 'chemist') // フィルター処理も可能
    .map(person => (
      // 注意: 実際は key prop が必要
      <li>{person.name}</li>
    ));
  
  return <ul>{listItems}</ul>;
}

---

5. 純粋なコンポーネントの思想

Reactコンポーネントは 純粋関数（Pure Function） であるべきという重要な概念

純粋性の原則

1. 入力が同じなら出力も同じ: Propsが同じなら、必ず同じJSXを返す
2. 副作用がない: レンダー前に存在した 外部のオブジェクトや変数を書き換えない (データの変更はしない)

変更を行う場合

• コンポーネント内の値を変更したい場合は、Props ではなく State を使用し、state をセット することで画面を更新する
• データの変更や外部連携は、イベントハンドラ または useEffect で行う

---

6. UIをツリー構造で捉える

アプリ構造やパフォーマンスを理解するための考え方

• レンダーツリー: コンポーネントの親子関係/ネスト関係。パフォーマンスチューニングに役立つ
• 依存関係ツリー: モジュールのインポート/エクスポート関係。ビルドツールがバンドルサイズを最適化する際に使用する