【学習日記＃#15】React学習：リスト表示、フォーム、Hooks、コンポジション

こんにちは、Ryuseiです！

今回も引き続きReactの学習内容を備忘録としてまとめていきます。HTMLやCSS、Bootstrapに続いて、Reactの本格的な理解に取り組んでいます！

---

JSXの基本ルール

Reactのreturn文では、必ず一つの親要素で全ての子要素を括る必要があるというルールがあります。
そのため、<div>タグや、React独自の<>（Fragment）で囲む必要があります。
この点、うっかり忘れがちなので注意しておきたいです！

---

ファイル構成の理解

• public/index.htmlが、src/index.jsによってレンダリングされます。
• index.jsは、App.jsからコンポーネントを受け取って表示するだけのシンプルな役割。
• manifest.jsonはHTMLの<meta>タグのような役割を担っているようで、アプリの設定情報が書かれています。
• コンポーネント名は必ず大文字から始めるというのもReactのルールのひとつです。

---

リスト表示と.map()の活用

Reactでリストを表示する際は、配列の.map()を使って繰り返し処理を行います。
その際には必ず**key属性**をつけて、各要素を一意に識別できるようにします。

const numbers = [1, 2, 3];
const listItems = numbers.map((number) =>
  <li key={number}>{number}</li>
);

keyにはユニークな値（例：idやnumber）を使うのが理想。ない場合はindexも可ですが、要素の順番が変わる場合は注意が必要です。

書き方のバリエーション

• .map()の結果を変数に一旦格納する
• returnの中で直接.map()を使う
• 子コンポーネント化して、.map()で繰り返し呼び出す

いずれも正解なので、読みやすさと保守性を意識して選ぶのがポイントです。

---

フォーム操作と制御コンポーネント

フォームは「制御コンポーネント」として扱うのがReactの基本です。
stateを通して、フォームの値を完全にコントロールします

<input value={this.state.text} onChange={this.handleChange} />


handleChangeではイベントオブジェクトからevent.target.valueを取り出してstateを更新。

フォームの状態＝Reactのstateという意識を持つことが重要！

---

コンポジション（Composition）

props.childrenやJSXのpropsを活用して、再利用可能で柔軟なUIコンポーネント設計が可能です。

function Dialog(props) {
return (
<div className="dialog">
{props.children}
</div>
);
}


こんな風に、ダイアログやモーダルの外枠だけ定義して、中身は呼び出し側で差し替えることができます。

---

Hooksの基礎

useState

const [count, setCount] = useState(0);

クラスコンポーネントのthis.stateよりもシンプルに状態管理ができます。

この状態管理により、ユーザーのログインの有無や数値のカウントなど様々な状態によって実行するものを変えることができます。

useEffect

副作用処理（旧ライフサイクルメソッド）を扱えます。

useEffect(() => {
  // 初回のみ実行
}, []);

componentDidMount相当の処理などを記述できます！

この第二引数の[]がからなら初回だけ、実行され引数に値を入れた場合はその引数が実行されるたびにuseEffect内の関数が実行されるようになります。

---

復習ポイント

• event.target.value：イベントオブジェクトの扱い
• アロー関数の使い方
• 分割代入（オブジェクト・配列）
• JSX内でのprops/stateの扱い
• Reactコンポーネント（関数とクラス）の違い

---

📝 まとめ

今回もたくさんの新しい概念を学びました！
少しずつですが、「Reactでの開発の考え方」が掴めてきた気がします。
次回はもっと具体的にコンポーネントを組み合わせて、状態管理やルーティングなども学んでいけたらと思います！