自由拡張

最後の1機能は自分で決める

ここまで、作るものはこちらが決めてきました。残り2回のうち、この回だけは自分で決めます。公開した fleama に足りないと思う機能を1つ選び、設計してから作り、もう一度 push して公開し直します。

迷ったら次の3つから選んでください。どれも fleama にまだ無く、このコースで習ったものだけで作れます。

• カテゴリ別の一覧 — /items/category/[name] を作り、shoes や bag だけを並べる
• 新着順の並び替え — /items に ?sort=new を付けたときだけ並び順を変える
• 出品者ページ — 出品した人ごとの一覧を /users/[id] に出す

いきなり書かずに、先に設計を書く

作り始める前に決めることは、毎回同じ4つです。

どこに置くか。 URL が決まればファイルの場所も決まります。Next.js ではここが一対一なので、URL を決めた時点で半分終わっています。

何を使うか。 動的ルート、searchParams、generateMetadata、route.ts、notFound のうち、どれが要るかを並べます。習ったものの組み合わせで足りるかどうかが、ここで分かります。

なぜ要るか。 使う人にとって何が良くなるのかを1行で書きます。書けない機能は、たいてい作っても使われません。

どの順で作るか。 3手くらいに割ります。一気に全部書くと、動かなくなったときにどこが原因か分からなくなります。

設計が書けていれば、手は動く

実務で新しい機能を任されたときにやるのも、ほとんどこれと同じです。新しい知識を仕入れる場面はそう多くなく、知っているものをどう組み合わせるかを決める時間のほうが長くなります。設計が1枚書けていれば、あとは前の章でやったことの繰り返しです。

書いた設計どおりに作り、手元で npm run build が通ることを確かめてから push します。

演習

足す機能を1つ選び、置き場所と使う仕組みと作る順番を設計表にまとめます。