自由拡張
今度は自分で決める
ここまでの65回は、作るものがこちらで決まっていました。この回は違います。何を足すかを自分で決めて、自分で作ります。 教材を離れて自分の判断でコンポーネントを設計する練習が、次の一歩になります。
何を作るか決めるコツ
はじめての自由制作でつまずくのは、思いついたものが大きすぎるときです。目安は次の2つです。
- state が1つか2つで表せる
- 15分くらいで形になる
この条件に当てはまる機能は、たとえば次のようなものです。
- 「今日のひとこと」を押すと開く折りたたみ
- 好きな技術タグを入力して並べるタグ一覧
- 作品を新しい順と古い順で並べ替えるボタン
- 訪問者が自分の名前を入れると挨拶が変わる欄
もちろん、ここに無いものでもかまいません。自分が「作ってみたい」と思ったほうが手が動きます。
作る順番
いきなり state から書かず、次の順で進めると迷いにくくなります。
- 動かない状態の見た目を先に JSX で書く
- その画面で「変わる値」がどれかを探す
- 変わる値を useState にする
- 変える操作を onClick や onChange でつなぐ
これはこのコース全体でやってきた順番と同じです。第8章でやったとおり、部品が大きくなってきたら別ファイルに切り出します。
たとえば折りたたみを作るなら、次の形が出発点になります。開いているかどうかの真偽値が1つあれば足ります。
const [open, setOpen] = useState(false);あとは、ボタンで setOpen(!open) を呼び、中身を {open && <p>...</p>} で出し分けます。並べ替えなら、昇順か降順かを真偽値で持って sort の向きを変えます。タグ一覧なら、入力欄の文字と追加された配列の2つを state にします。どれも、このコースで一度は書いた形の組み合わせです。
つまずきどころ
state を足す場所を間違えると動きません。その値を使う要素と、その値を変えるボタンの両方から見える場所に置きます。同じコンポーネントの中に両方があるなら、そのコンポーネントの中で持てば足ります。離れているときは、共通の親に持ち上げます。第8章のリフトアップの話です。
もう1つは、完璧に作ろうとしないことです。動くところまで作ってから見た目を整えます。
演習
土台のプロフィールサイトに、自分で決めた機能を1つ足します。別ファイルに切り出したくなったとき用に、空のファイルを1つ添えてあります。実務なら自分で好きな名前のファイルを作るところなので、名前は気にせず、使うか使わないかも自由に決めてください。