学んだ知識を別の問題へ転用する練習

教材のTodoアプリを同じ見た目で作れても、別のデータでは手が止まることがあります。表面の手順ではなく、共通する構造を言葉にすると転用しやすくなります。

既知の構造から条件を一つ変え自分で適用して共通点と差を確認する流れ

一条件だけ変える

最初から別の大作を作らず、次のどれか一つだけを変えます。

Todoの完了済み表示と商品検索は、どちらも「配列から条件に合う要素を選ぶ」処理です。

const visibleItems = items.filter((item) => item.category === selectedCategory);

変わるのはデータ名と条件で、filter が担う役割は変わりません。このように「何を入力にし、何を選び、何を表示するか」を説明します。

動かない時は、元の例との違いを一つずつ比べます。配列かオブジェクトか、文字列か数値か、空のときにどうするかを確認します。元のコードをそのまま貼り替えるより、入出力を小さく書き出す方が原因を見つけやすくなります。

Todoの「未完了だけを表示」を、次のどちらかへ変えてみます。

完成後に「元の例と共通する処理」「変えた条件」「空のデータでの結果」を一文ずつ説明できれば、転用の確認になります。

応用は、知っているコードをたくさん暗記することではありません。入力や条件を一つ変え、共通の役割を説明し、違いを確かめる小さな練習を重ねます。