命令的vs宣言的
2つの書き方を並べて見る
このコースは最初のレッスンから「宣言的 UI」という言葉を使ってきました。最後に、同じ機能を2通りで書いて、違いをはっきりさせます。題材は作品一覧の絞り込みです。ボタンを押すと、公開中の作品だけが残ります。
命令的な書き方
命令的な書き方は、画面をどう変えるかの手順を書きます。JavaScript 入門でやったのはこちらです。
JavaScript
button.addEventListener("click", () => {
const items = list.querySelectorAll("li");
items.forEach((item) => {
if (item.dataset.published === "false") {
item.style.display = "none";
}
});
});やっていることは「非公開の li を探して隠す」です。指示としては正しく、実際に動きます。
命令的な書き方が抱える問題
問題は、画面に出ているものが増えたときに現れます。この一覧の上に「3 件を表示中」という件数の表示があったとします。命令的な書き方では、隠す処理を書いた人が件数の書き換えも自分で足さなければいけません。忘れると、3件と出たまま2件しか並んでいない画面になります。
さらに「もう一度押したら全部に戻す」を足すと、今どちらの状態なのかを自分で覚えておく必要があります。ボタンの文言も自分で書き換えます。画面の要素が増えるほど、直し忘れる場所が増えていくのが命令的な書き方の弱点です。
宣言的な書き方
宣言的な書き方は、手順ではなく今の状態のときに画面がどう見えるかを書きます。
JavaScript (JSX)
const [onlyPublished, setOnlyPublished] = useState(false);
const shown = onlyPublished ? works.filter((work) => work.published) : works;あとは shown から一覧も件数もボタンの文言も作ります。state が変われば、そこから作られるものは全部いっしょに変わります。件数の書き換えを忘れることが、そもそも起こりません。
つまり違いは、次のように言えます。命令的は「差分の当て方」を人が書き、宣言的は「あるべき姿」を人が書いて差分は React が計算します。
つまずきどころ
React のコンポーネントの中で document.querySelector を使って画面を直接いじると、次の再レンダリングでその変更は消えます。React は自分が持っているデータから画面を描き直すので、外から手で加えた変更は知らないからです。React を使いはじめた人が最初にはまるのがここです。画面を変えたくなったら、まず「どの state を変えれば、その画面になるか」を考えます。
演習
命令的に書かれた絞り込みを、宣言的な書き方に直します。