自由拡張
最後は自分で決める
ここまで、作るものはこちらが決めてきました。最後の1つは自分で決めます。fleama に足りないと思う機能を、1つ選んで作ります。
迷ったら次の3つから選んでください。どれも fleama にまだ無いものです。
- いいね — 気になる商品に印を付け、印の付いたものだけを表示する
- 並び替え — 価格の安い順と、出品された順を切り替える
- 表示の切り替え — 一覧をカードで見るか、1行ずつで見るかを切り替える
何を作っても形は同じ
作るものは違っても、中身の形は同じです。状態が1つあり、押すと状態が変わり、変わった状態で表示が変わる。このコースで何度も書いてきた形です。
TypeScript (JSX)
const [cheapFirst, setCheapFirst] = useState(false);
const shown = cheapFirst ? [...items].sort((a, b) => a.price - b.price) : items;並び替えで [...items] と写しを作っているのは、sort が元の配列を並べ替えてしまうからです。state に入っている配列を直に並べ替えると、React から見て中身が変わったことにならず、画面が更新されないことがあります。
新しい知識は要りません。今日やるのは「自分で決めたものを、知っている形に当てはめる」練習です。実務で新しい機能を任されたときにやるのも、だいたいこれです。
自動判定が見るところ
自由に作ったものを機械が採点するので、判定は切り替えが本当に効いているかだけを見ます。何を作るかは自由ですが、次の入れ物は共通で使ってください。
extra-titleに、作った機能の名前を出すextra-buttonを押すと状態が変わるextra-stateに、いまオンかオフかを出す- もう一度押すと、オフに戻る
押しっぱなしで戻らないもの、たとえば一度きりの並び替えは通りません。戻せないということは、状態を持っていないということだからです。一覧の見え方をどう変えるかは自由です。
演習
機能を1つ選び、オンとオフを切り替えられるようにします。