【JavaScript】配列メソッド入門｜map・filter・reduceの使い方
この記事で分かること JavaScriptの配列メソッド map、filter、reduce の使い方が分かります。 「for文で書けるけど、もっとスマートに書きたい」という人向けです。 前提知識 配列（[1, 2, 3]）が何か分かる アロー関数（() => {}）を見たことがある 分からなくても、コード例を見れば雰囲気はつかめます。 手順 ステップ1: map — 全要素を変換する map は配列の各要素に処理を適用して、新しい配列を返します。 const prices = [100, 200, 300]; // 全商品を10%値上げ const newPrices = prices.map((price) => price * 1.1); console.log(newPrices); // [110, 220, 330] 元の配列 prices は変更されません。新しい配列が返ってくるのがポイントです。 for文で書くとこうなります： // for文バージョン（同じ結果） const newPrices = []; for (let i = 0; i < prices.length; i++) { newPrices.push(prices[i] * 1.1); } map の方がやりたいことが一目で分かりますよね。 ステップ2: filter — 条件に合う要素だけ取り出す filter は条件を満たす要素だけを集めた新しい配列を返します。 const scores = [45, 82, 67, 93, 31, 78]; // 60点以上だけ取り出す const passed = scores.filter((score) => score >= 60); console.log(passed); // [82, 67, 93, 78] コールバック関数が true を返した要素だけが残ります。 実務でよく使うパターン： ...