部品ツリーで考える
画面を箱で囲むところから始める
ここまでは「必要になったら部品を作る」やり方で進めてきました。第8章では逆に、先に画面を眺めて、どこで切るかを決めてから作るやり方を練習します。
やることは単純です。出来上がりの画面を思い浮かべて、意味のまとまりごとに箱で囲みます。プロフィールサイトなら、上から順に見出しの帯、自己紹介、作品一覧、ページの足元、という4つの箱が見つかります。
箱の入れ子がそのままツリーになる
囲んだ箱は、たいてい入れ子になります。作品一覧という箱の中には、作品カードという小さい箱が3つ入っています。この入れ子を線で書き出したものが部品ツリーです。
プレーンテキスト
App
├─ Header
├─ ProfileCard
├─ WorkList
│ ├─ WorkCard
│ ├─ WorkCard
│ └─ WorkCard
└─ Footerこのツリーは、そのままファイルの構成になります。Header という箱があるなら Header.jsx を作り、App.jsx から読み込みます。設計と実装が1対1で対応するのが React の気持ちよさです。
どこで切るかの見つけ方
切れ目に迷ったら、次の3つを手がかりにします。
- 見出しや枠線で、見た目がはっきり区切れているところ
- 同じ形が繰り返されているところ。繰り返しは必ず部品になる
- 「これは何を表示する箱ですか」と聞かれて、一言で答えられるところ
逆に、一言で答えられないなら箱が大きすぎます。「自己紹介と作品一覧を出す箱」と答えたくなったら、そこは2つに分かれます。
ファイルの分け方
部品を別ファイルにするときは、export default で外に出し、使う側で読み込みます。
JavaScript (JSX)
// Header.jsx
export default function Header() {
return (
<header>
<h1>あおいのプロフィール</h1>
</header>
);
}JavaScript (JSX)
// App.jsx
import Header from "./Header.jsx";
export default function App() {
return (
<div>
<Header />
</div>
);
}./ は「同じ場所にあるファイル」という意味です。書き忘れると、React 本体のような外部のものを探しに行って見つからず、エラーになります。
つまずきどころ
最初から細かく分けすぎると、ファイルを行き来するだけで疲れます。目安は「1ファイルが画面ひとまとまりぶん」です。3行しかない部品をわざわざ切り出す必要はありません。分けるのは、繰り返しが出たときと、説明が「〜と〜」になったときで十分です。
演習
1枚に詰め込まれたプロフィールページを、ツリーどおりのファイルに分けます。実務ではツリーを決めたあと自分でファイルを作りますが、この演習では中身が空のファイルをこちらで用意してあります。どの箱をどのファイルへ移すか、という判断のほうに集中してください。