目次

React 入門

仕組みから理解する React + TypeScript

この教材は、React を「なんとなく動くもの」ではなく「なぜそう動くのか」まで理解することを目的にしています。JavaScript がまだあやしくても大丈夫なように、Part 0 は JavaScript のおさらいから始まります。

解説のとなりには、そのとき説明しているコードが並びます。 読み進めるとコードが自動で切り替わり、話題になっている行が光ります。 自分でコードを書く必要はありません。読んで、動かして、理解してください。

いま読める章 · Part 3リストと key

Part 0

React の前に

React のコードは JavaScript でできている。ここが曖昧なままだと、この先ずっと「なんとなく」で読むことになる。

  • 変数と constなぜ React では let をほとんど使わないのか準備中
  • 関数を値として扱う「関数を渡す」が分かると onClick が読めるようになる準備中
  • 配列の mapリスト表示のすべてがここから始まる準備中
  • 分割代入とスプレッド構文props の正体を読み解くための前提知識準備中
  • truthy / falsy と && || ??条件によって出し分けるための土台準備中
  • TypeScript のさわり型があると、なぜ書くのが楽になるのか準備中

Part 1

React の世界観

React は「DOM を操作するライブラリ」ではない。ここの発想の切り替えが最初の山になる。

  • なぜ React を使うのか素の JavaScript で同じものを作って比べてみる準備中
  • 宣言的 UI「UI は状態の写像である」の意味準備中
  • JSX と TSXHTML に見えるが HTML ではない。その正体準備中

Part 2

コンポーネントと props

React で作るものは、突き詰めると「関数」と「その引数」でしかない。

  • コンポーネントは関数である画面の部品を関数として切り出す準備中
  • props と型のつけ方部品に情報を渡す。必須と任意の書き分け準備中
  • props は書き換えられない書き換えたら何が起きるのか、実際に壊してみる準備中
  • children の正体タグで囲んだ中身が、なぜ props として届くのか準備中
  • 合成という考え方継承ではなく組み合わせで作る理由準備中

Part 3

画面に動きをつける

クリックに反応する、条件で出し分ける、配列を並べる。この 3 つで大半の画面は作れる。

Part 4

状態 (state)

React でいちばん重要な概念。ここを丁寧にやると、この先が全部つながる。

  • useStateなぜ普通の変数ではダメなのか準備中
  • state は「その瞬間の写真」setState した直後に値が変わっていない理由準備中
  • state は最小限にする計算で求まる値を state にしてはいけない準備中
  • state のリフトアップ2 つの部品で同じ値を共有したくなったら準備中
  • オブジェクトと配列の更新push してはいけない。なぜ毎回新しく作るのか準備中

Part 5

フォーム

入力を受け取るという、アプリで最も頻繁に書く処理。

  • 制御コンポーネントinput の値を React が持つということ準備中
  • 入力チェック型と実行時チェックを両立させる準備中

Part 6

副作用 (useEffect)

いちばん誤用されるフック。まず「使わなくて済む方法」から学ぶ。

  • useEffect の役割React の外側と同期をとるための道具準備中
  • その useEffect は要らない書きがちなアンチパターンを 5 つ潰す準備中
  • クリーンアップ後片付けを書かないと何が漏れるのか準備中

Part 7

レンダリングの仕組み

「再レンダリング」が実際に何をしているのかを見る。ここから先は目に見えない話が増える。

  • 再レンダリングとは何か画面が描き直されるまでに起きていること準備中
  • 何が再レンダリングを起こすかprops が変わったから、ではない準備中

Part 8

パフォーマンス

遅くなってから使う道具たち。先回りして使うと、かえって読みにくくなる。

  • memo再レンダリングを止める準備中
  • useMemo重い計算を毎回やらせない準備中
  • useCallback関数を毎回作り直さない準備中
  • React Compiler上の 3 つが、そのうち要らなくなる話準備中

Part 9

state を共有する

アプリが大きくなったときに、どこに状態を置くか。

  • Contextバケツリレーをやめる準備中
  • Context と再レンダリング1 つの Context に詰め込むと何が起きるか準備中
  • URL に state を置くリロードしても消えない状態準備中
  • サーバーのデータ取得したデータは state とは別物として扱う準備中