つくる - ツリー整理｜基礎を学ぶ

章の総仕上げ

第8章で学んだことを、1枚のページにまとめて当てます。使うのは次の4つです。

画面を箱で囲み、部品ツリーを先に決める
2つ以上の部品が見る値は、共通の親へ持ち上げる
値は親から子へ、一段ずつ props で渡す
部品は components/、データは data/ へ置く

作るもののツリー

プロフィールサイトの完成形は、こういう形になります。

App                     選ばれている種類を state で持つ
├─ Header
├─ ProfileCard
└─ WorkList             種類でしぼり込んで並べる
   ├─ FilterButtons
   └─ WorkCard × 3

FilterButtons と作品の並びはどちらも「選ばれている種類」を見ます。共通の親は App なので、state は App に置きます。

手を動かす前に決めること

分け始める前に、紙でもコメントでもいいので次の2つを書き出してください。

どのファイルに何を入れるか
どの値が、どこからどこへ渡るか

この2つが決まっていれば、あとは移すだけの作業になります。決めずに書き始めると、途中で「この値はどっちが持つんだったか」で止まります。設計の章でいちばん伝えたいのは、書く前に決めておくと書くのが速いということです。

移すときの順番

安全な順番があります。データ、いちばん下の部品、その親、と下から積み上げます。

import { useState } from "react";

// App.jsx の完成形
export default function App() {
  const [category, setCategory] = useState("all");

  return (
    <div>
      <Header />
      <ProfileCard />
      <WorkList category={category} onChange={setCategory} />
    </div>
  );
}

一度に全部を切り出そうとせず、1ファイル移すたびに画面を見ます。壊れたときに、直前に触った1ファイルだけを見れば済みます。

つまずきどころ

移したあとに props を渡し忘れて、画面から一部が消えることがよくあります。真っ白ではなく「一部だけ空」のときは、たいてい渡し忘れです。ツリーの上から順に、値がどこまで届いているかを確かめてください。

演習

1枚のページを、ツリーどおりに分けてフィルタを動くようにします。実務ではツリーを決めた人がファイルも作りますが、この演習では上のツリーと同じ形の空ファイルを先に用意してあります。中身を下から順に埋めていってください。

つくる - ツリー整理

章の総仕上げ

作るもののツリー

手を動かす前に決めること

移すときの順番

つまずきどころ

演習

ヒント