配列メソッド(map・filter・find)
なぜ学ぶか: AIのコードではforループをほとんど見ません。代わりにmap・filter・findが並びます。英単語の意味そのままなので、例で一度見れば読めるようになります。
まずはこの例を見てみましょう
const users = [
{ name: "Ada", age: 36 },
{ name: "Grace", age: 45 },
{ name: "Linus", age: 17 },
];
users.filter((u) => u.age >= 20); // 絞る → Ada と Grace の配列
users.map((u) => u.name); // 変換 → ["Ada", "Grace", "Linus"]
users.find((u) => u.name === "Ada"); // 探す → Ada の1件だけfilter=絞る/ map=変換/ find=探す。この3語で、AIのデータ加工コードの大半が読めます。
map=全部を変換する
例のusers.map((u) => u.name)は「各ユーザーを名前に変換した新しい配列」。画面の一覧表示もこれで作ります。
filter=条件で絞り込む
カッコの中は「残す条件」。例では20歳以上だけの新しい配列ができます。
find=最初の1件を探す
条件に合う最初の1件だけを返します(見つからなければundefined)。
元の配列は変わらない
3つとも新しい配列や値を返すだけで、users自体はそのまま。前にやった「元を変えずに新しく作る」と同じ考え方です。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。