React公式ドキュメントを読む〜スタートガイド編〜

Reactの新版公式ドキュメントを読んで気づきや学び、疑問点などを雑多にメモしていく
https://ja.react.dev/

クイックスタート

• なぜclassではなくclassNameを使うのか
  • JSXではJavaScriptにHTML/CSSの記法を組みこんでいるが、classというキーワードは既にJavaScriptで使用されているため、classNameになった考えられる
• map関数の使い方
  • リスト内の各項目にはそれを一意に識別するためのkey属性(文字列または数値)が必要
  • 通常、key はデータから来るはずで、データベース上のIDなどが該当する

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}> // 一意なキーを指定
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

• イベントハンドラについて
  • onClick={handleClick} の末尾に括弧がないことに注意
    • そこでイベントハンドラ関数を呼び出すわけではなく、渡すだけ
    • ユーザがボタンをクリックしたときにReactがイベントハンドラを呼び出す
    • JavaScriptにおいては関数の末尾に括弧があるとその関数が実行されてしまう。括弧をつけずに記述するとその関数への参照を渡すことができる
      • 参考：【JavaScript】関数に括弧をつけるつけないで何が違うのか
      • 参考：[JavaScriptって括弧のお化け]
    • ただし、アロー関数で書く際は括弧が必要
      • イベントリスナーでは値としての関数（アロー関数含む）を登録する
        • {}内が関数式(=値)になるようにする
        • 参考：
          • （補遺）なぜコールバック関数をカッコ () 付きで渡すとダメなのか？
          • JavaScriptって括弧のお化け

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}> // handleClickの末尾に括弧がない
      Click me
    </button>
  );

// return (
//  <button onClick={() => handleClick()}> // アロー関数はhandleClickの末尾に括弧をつける
//    Click me
//  </button>
//  );

• 同じコンポーネントを複数の場所でレンダーした場合、それぞれが独自の state を持つ
  • 予期しない動作を防ぐため?
  • コンポーネント間で状態を共有する必要がある場合は、その状態を共有するための親コンポーネントで管理するか、ReactのContext APIやReduxなどの状態管理ライブラリを使用する
• フックはコンポーネントのトップレベル(または他のフック内)でのみ呼び出せる。条件分岐やループの中で useState を使いたい場合は、新しいコンポーネントを抽出してそこに配置する
  • 「コンポーネントがレンダーされる際に毎回同じ順番で呼び出されるということが保証される」(?)
    • stateが初期化されるより前に更新の処理が走ったりするなどを防ぐため？
  • 参考：Hooksをトップレベル以外で呼んではいけない理由をReactのソースコードから読み解く
• state のリフトアップ（持ち上げ)
  • 親コンポーネント側でstateや更新関数を定義し、それを子コンポーネントにpropsとして渡すことでstateを複数の子コンポーネント間で共有できる

チュートリアル：三目並べ

• JavaScript はクロージャをサポートしているため、内側の関数は外側の関数で定義されている変数や関数にアクセスできる
  • クロージャとは？
    • 組み合わされた(囲まれた)関数と、その周囲の状態(レキシカル環境)への参照の組み合わせ。言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供する
    • JavaScriptのクロージャについて世界一わかりやすく解説してみます【プログラミング言語/クロージャとは】
    • JavaScriptのクロージャの具体的な使い方を解説します【プログラミング言語/何に使う/イベント駆動/コールバック関数】
      • JavaScriptは関数の中に関数を定義できる(実はすべての言語でできるわけではない。JavaやC言語はできない)
      • JavaScriptの関数は変数として持ち運べる(第一級関数)
      • JavaScriptの関数は親の関数の変数を扱える
      • JavaScritptの関数の親とは生みの親 (レキシカルスコープ)
        • 実行時の親を親とみなすのがダイナミックスコープ
      • クロージャのいちばんの使い所はコールバック関数
        • イベント駆動(ユーザからの入力に対して応答する)でプログラミングするときによく用いられ
        • イベント発生した際の処理を事前に定義しておく
• handleClick 内で既存の squares 配列を直接変更するのではなく、.slice() を使ってコピーを作成しているのはなぜか。
  • 直接的なデータの書き換えを避けることで、データの過去のバージョンを壊すことなく保持し、後で再利用することができる(巻き戻し機能の実装など)
  • コンポーネントがデータが変更されたかどうかを非常に安価に比較することができる(?)
• 動的なリストを作成する際には、適切な key を割り当てることを強くお勧めする。適切な key がない場合は、key を含めるようデータ構造の再設計を検討するべき

Reactの流儀

• state はインタラクティビティ、つまり時間とともに変化するデータのためにあるもの。静的なアプリでは使用しない。
• トップダウンで高い階層にあるコンポーネントから構築を始めることも、ボトムアップで低い階層にあるコンポーネントから構築を始めることもできる。通常、単純な例ではトップダウンで作業する方が簡単であり、大規模なプロジェクトではボトムアップで進める方が簡単
  • stateとは、アプリが記憶する必要のある、変化するデータの最小限のセット。stateの構造を考える上で最も重要な原則は、DRY（Don’t Repeat Yourself; 繰り返しを避ける）。
    • アプリケーションが必要とする状態に関する必要最小限の表現を見つけ出し、他のすべてのものは必要になったらその場で計算する
  • 関連：あなたはDRY原則を誤認している？
• colspan属性
  • 表の複数のセルを横方向に結合するための属性
  • 属性値に数値を指定することで、横方向に結合するセルの数を設定することができる「
• trタグ
  • ”table row”の略
  • 表の行部分を指定する要素

    <tr> // このタグ内が1行
      <th colSpan="2">　// 2列を結合し1列にする
        {category} 
      </th>
    </tr>