つくる - 部品の仕分け

一覧ページを、正しい配置で組み立てる

今日は新しいことを覚えません。第4章で決めた基準どおりに、fleama の商品一覧ページを最後まで組み立てます。

使う基準は1つだけです。state・イベント・ブラウザ API・フックのどれかがあればクライアント、無ければサーバー。 そして、クライアントにする範囲はできるだけ小さくします。

今日の配置

一覧ページは5つのファイルでできています。仕分けの答えは次のとおりです。

クライアントになるのはボタン2つだけです。商品名も価格も、サーバーで組み立てられた状態でブラウザに届きます。

進め方

上から順に手を入れると、途中で画面が壊れて原因が分かりにくくなります。末端から先に直すのが安全です。

1. LikeButton に "use client" と useState を入れて、単体で押せるようにする
2. CartButton にも同じことをする
3. ItemCard に価格と LikeButton を足す
4. 画面全体を見て、一覧が5件出て、両方のボタンが動くことを確かめる

出来たかどうかの見分け方

このプレビューは "use client" を書き忘れても動いてしまいます。画面が動いたことは、正しく仕分けできた証拠になりません。書いたコードの中身も採点していますので、サーバーに残す3つのファイルには "use client" を書かないことを最後に確かめてください。

演習

商品一覧ページを、正しい配置で完成させます。