← inaro.devAI駆動開発 学習ツール
中級

配列メソッド(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が生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。