エラノート エラノート
プログラミング入門

JavaScript入門｜配列メソッドの使い方を解説

JavaScript 配列 メソッド 入門 基礎
広告スペース (article-top)

JavaScriptで配列のデータを加工・抽出・集計するとき、for文を毎回書くのは手間がかかります。配列メソッドを使えば、短く読みやすいコードでデータを処理できます。この記事では、実務でよく使うmap、filter、reduce、forEach、findの5つのメソッドを具体例とともに解説します。

forEachで要素を1つずつ処理する

forEach は、配列の全要素に対して順番に処理を行うメソッドです。for文の代わりに使えます。

forEachの基本

const fruits = ["りんご", "バナナ", "みかん"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});
// りんご
// バナナ
// みかん

アロー関数を使うとさらに短く書けます。

fruits.forEach((fruit) => {
  console.log(fruit);
});

インデックスも受け取る

forEach のコールバック関数は、第2引数でインデックスを受け取れます。

const tasks = ["メール確認", "報告書作成", "ミーティング"];

tasks.forEach((task, index) => {
  console.log(`${index + 1}. ${task}`);
});
// 1. メール確認
// 2. 報告書作成
// 3. ミーティング

forEachの注意点

forEach は戻り値を返しません。新しい配列を作りたい場合は map を使いましょう。また、forEach の中では break や continue が使えない点にも注意してください。

mapで新しい配列を作る

map は、配列の各要素を変換して新しい配列を作るメソッドです。元の配列は変更されません。

mapの基本

const prices = [100, 250, 500, 1200];

// 税込価格を計算（10%）
const withTax = prices.map((price) => {
  return Math.floor(price * 1.1);
});

console.log(withTax); // [110, 275, 550, 1320]
console.log(prices);  // [100, 250, 500, 1200]（元の配列は変わらない）

オブジェクトの配列を変換する

const users = [
  { name: "田中", age: 28 },
  { name: "佐藤", age: 35 },
  { name: "鈴木", age: 22 },
];

// 名前だけの配列を作る
const names = users.map((user) => user.name);
console.log(names); // ["田中", "佐藤", "鈴木"]

// 表示用の文字列を作る
const labels = users.map((user) => `${user.name}（${user.age}歳）`);
console.log(labels); // ["田中（28歳）", "佐藤（35歳）", "鈴木（22歳）"]

HTMLのリストを生成する

const items = ["HTML", "CSS", "JavaScript"];

const listItems = items.map((item) => `<li>${item}</li>`);
const html = `<ul>\n${listItems.join("\n")}\n</ul>`;

console.log(html);
// <ul>
// <li>HTML</li>
// <li>CSS</li>
// <li>JavaScript</li>
// </ul>

filterで条件に合う要素を抽出する

filter は、条件に合う要素だけを取り出して新しい配列を作るメソッドです。

filterの基本

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 偶数だけ抽出
const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// 5以上の数を抽出
const large = numbers.filter((n) => n >= 5);
console.log(large); // [5, 6, 7, 8, 9, 10]

商品データの絞り込み

const products = [
  { name: "ノートPC", price: 89000, category: "電子機器" },
  { name: "マウス", price: 2500, category: "電子機器" },
  { name: "デスク", price: 35000, category: "家具" },
  { name: "チェア", price: 48000, category: "家具" },
  { name: "モニター", price: 42000, category: "電子機器" },
];

// 電子機器だけ抽出
const electronics = products.filter((p) => p.category === "電子機器");
console.log(electronics.length); // 3

// 価格が30,000円以上の商品
const expensive = products.filter((p) => p.price >= 30000);
expensive.forEach((p) => {
  console.log(`${p.name}: ${p.price.toLocaleString()}円`);
});
// ノートPC: 89,000円
// デスク: 35,000円
// チェア: 48,000円
// モニター: 42,000円

複数条件での絞り込み

const products = [
  { name: "ノートPC", price: 89000, category: "電子機器" },
  { name: "マウス", price: 2500, category: "電子機器" },
  { name: "モニター", price: 42000, category: "電子機器" },
];

// 電子機器かつ価格が10,000円以上
const result = products.filter((p) => {
  return p.category === "電子機器" && p.price >= 10000;
});

console.log(result);
// [{ name: "ノートPC", ... }, { name: "モニター", ... }]

findで条件に合う最初の要素を取得する

find は、条件に合う最初の1つの要素を返すメソッドです。filter が配列を返すのに対し、find は要素そのもの（またはundefined）を返します。

findの基本

const users = [
  { id: 1, name: "田中", role: "管理者" },
  { id: 2, name: "佐藤", role: "一般" },
  { id: 3, name: "鈴木", role: "一般" },
];

// IDで検索
const user = users.find((u) => u.id === 2);
console.log(user); // { id: 2, name: "佐藤", role: "一般" }

// 見つからない場合
const notFound = users.find((u) => u.id === 99);
console.log(notFound); // undefined

findとfilterの使い分け

const scores = [72, 85, 90, 68, 95, 88];

// 最初の90点以上を1つだけ見つける → find
const firstHigh = scores.find((s) => s >= 90);
console.log(firstHigh); // 90

// 90点以上をすべて取得する → filter
const allHigh = scores.filter((s) => s >= 90);
console.log(allHigh); // [90, 95]

findの実践的な使い方

const inventory = [
  { code: "A001", name: "りんご", stock: 50 },
  { code: "A002", name: "バナナ", stock: 0 },
  { code: "A003", name: "みかん", stock: 30 },
];

function getProduct(code) {
  const product = inventory.find((item) => item.code === code);
  if (product) {
    return `${product.name}（在庫: ${product.stock}個）`;
  }
  return "商品が見つかりません";
}

console.log(getProduct("A001")); // りんご（在庫: 50個）
console.log(getProduct("A999")); // 商品が見つかりません

reduceで集計・変換する

reduce は、配列の全要素を1つの値にまとめるメソッドです。合計計算やデータの集約に使います。

reduceの基本: 合計計算

const prices = [500, 800, 1200, 300];

const total = prices.reduce((sum, price) => {
  return sum + price;
}, 0);

console.log(total); // 2800

reduce は2つの引数を取ります。

  • 第1引数: コールバック関数。sum（累積値）と price（現在の要素）を受け取る
  • 第2引数: 初期値。ここでは 0

カテゴリ別に集計する

const expenses = [
  { category: "食費", amount: 1200 },
  { category: "交通費", amount: 500 },
  { category: "食費", amount: 800 },
  { category: "日用品", amount: 2000 },
  { category: "食費", amount: 1500 },
  { category: "交通費", amount: 300 },
];

const summary = expenses.reduce((acc, item) => {
  if (acc[item.category]) {
    acc[item.category] += item.amount;
  } else {
    acc[item.category] = item.amount;
  }
  return acc;
}, {});

console.log(summary);
// { 食費: 3500, 交通費: 800, 日用品: 2000 }

最大値・最小値を求める

const scores = [72, 85, 90, 68, 95, 88];

const max = scores.reduce((a, b) => (a > b ? a : b));
const min = scores.reduce((a, b) => (a < b ? a : b));

console.log(`最高点: ${max}`); // 最高点: 95
console.log(`最低点: ${min}`); // 最低点: 68

Math.max() や Math.min() を使う方法もありますが、reduce は集計ロジックをカスタマイズしやすい点が利点です。

メソッドチェーンで複数の処理を組み合わせる

配列メソッドは戻り値が配列であるため、連続して呼び出す「メソッドチェーン」が可能です。

実践例: 注文データの集計

const orders = [
  { product: "コーヒー", price: 400, quantity: 2 },
  { product: "紅茶", price: 350, quantity: 1 },
  { product: "ケーキ", price: 600, quantity: 3 },
  { product: "クッキー", price: 200, quantity: 5 },
  { product: "サンドイッチ", price: 500, quantity: 2 },
];

// 小計が500円以上の注文の合計金額を求める
const result = orders
  .map((order) => ({
    ...order,
    subtotal: order.price * order.quantity,
  }))
  .filter((order) => order.subtotal >= 500)
  .reduce((total, order) => total + order.subtotal, 0);

console.log(`合計: ${result.toLocaleString()}円`); // 合計: 3,600円

この例では以下の流れで処理しています。

  1. map で各注文に小計（subtotal）を追加
  2. filter で小計が500円以上のものだけ抽出
  3. reduce で合計金額を計算

実践例: ToDoリストのフィルタリングと表示

const todos = [
  { id: 1, text: "買い物", done: true },
  { id: 2, text: "掃除", done: false },
  { id: 3, text: "料理", done: false },
  { id: 4, text: "洗濯", done: true },
  { id: 5, text: "勉強", done: false },
];

// 未完了タスクの一覧を作成
const pending = todos
  .filter((todo) => !todo.done)
  .map((todo) => `- [ ] ${todo.text}`);

console.log("未完了タスク:");
console.log(pending.join("\n"));
// 未完了タスク:
// - [ ] 掃除
// - [ ] 料理
// - [ ] 勉強

// 完了率を計算
const doneCount = todos.filter((todo) => todo.done).length;
const rate = Math.round((doneCount / todos.length) * 100);
console.log(`進捗: ${rate}%`); // 進捗: 40%

まとめ

この記事では、JavaScriptの主要な配列メソッドを解説しました。

  • forEach: 各要素に対して処理を実行する（戻り値なし）
  • map: 各要素を変換した新しい配列を作る
  • filter: 条件に合う要素だけを抽出した新しい配列を作る
  • find: 条件に合う最初の要素を1つ返す
  • reduce: 全要素を1つの値にまとめる（合計、集約など）

これらのメソッドは組み合わせることで、複雑なデータ処理も簡潔に書けるようになります。まずは map と filter から使い始め、慣れてきたら reduce やメソッドチェーンに挑戦してみてください。

広告スペース (article-bottom)

あわせて読みたい

プログラミング入門 Python入門｜変数と型の基礎をやさしく解説 プログラミング入門 Python入門｜for・whileループの使い方を解説 プログラミング入門 JavaScript入門｜はじめの一歩をわかりやすく解説 プログラミング入門 JavaScript DOM操作入門｜要素の取得と変更方法 概念・用語解説 データベースとは？種類と基本概念を初心者向けに解説 概念・用語解説 APIとは？仕組みと使い方を初心者向けに解説