部品ツリーで考える｜基礎を学ぶ

画面を箱で囲むところから始める

ここまでは「必要になったら部品を作る」やり方で進めてきました。第8章では逆に、先に画面を眺めて、どこで切るかを決めてから作るやり方を練習します。

やることは単純です。出来上がりの画面を思い浮かべて、意味のまとまりごとに箱で囲みます。プロフィールサイトなら、上から順に見出しの帯、自己紹介、作品一覧、ページの足元、という4つの箱が見つかります。

囲んだ箱は、たいてい入れ子になります。作品一覧という箱の中には、作品カードという小さい箱が3つ入っています。この入れ子を線で書き出したものが部品ツリーです。

App
├─ Header
├─ ProfileCard
├─ WorkList
│  ├─ WorkCard
│  ├─ WorkCard
│  └─ WorkCard
└─ Footer

このツリーは、そのままファイルの構成になります。Header という箱があるなら Header.jsx を作り、App.jsx から読み込みます。設計と実装が1対1で対応するのが React の気持ちよさです。

切れ目に迷ったら、次の3つを手がかりにします。

逆に、一言で答えられないなら箱が大きすぎます。「自己紹介と作品一覧を出す箱」と答えたくなったら、そこは2つに分かれます。

部品を別ファイルにするときは、export default で外に出し、使う側で読み込みます。

// Header.jsx
export default function Header() {
  return (
    <header>
      <h1>あおいのプロフィール</h1>
    </header>
  );
}

// App.jsx
import Header from "./Header.jsx";

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

./ は「同じ場所にあるファイル」という意味です。書き忘れると、React 本体のような外部のものを探しに行って見つからず、エラーになります。

最初から細かく分けすぎると、ファイルを行き来するだけで疲れます。目安は「1ファイルが画面ひとまとまりぶん」です。3行しかない部品をわざわざ切り出す必要はありません。分けるのは、繰り返しが出たときと、説明が「〜と〜」になったときで十分です。

1枚に詰め込まれたプロフィールページを、ツリーどおりのファイルに分けます。実務ではツリーを決めたあと自分でファイルを作りますが、この演習では中身が空のファイルをこちらで用意してあります。どの箱をどのファイルへ移すか、という判断のほうに集中してください。