JavaScriptの配列操作でよく使うメソッドは？完全ガイド

疑問

JavaScriptで配列を操作する際、どのようなメソッドがよく使われるのでしょうか？それぞれのメソッドの使い分けやベストプラクティスを一緒に学んでいきましょう。

導入

JavaScriptを学び始めたばかりの方にとって、配列の操作は最初の壁の一つかもしれません。配列はデータを効率的に扱うための重要なデータ構造で、JavaScriptには配列を操作するための便利なメソッドが多数用意されています。

ES6（ECMAScript 2015）以降、配列メソッドはさらに強化され、関数型プログラミングのパラダイムを取り入れた強力なツールとなりました。本記事では、実際の開発現場で頻繁に使用される配列メソッドを、実践的なコード例とともに詳しく解説していきます。

解説

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] (元の配列は変更されない)

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// 名前の配列を取得
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

// 年齢を1つ増やす
const agedUsers = users.map(user => ({
  ...user,
  age: user.age + 1
}));
console.log(agedUsers);

const items = ['a', 'b', 'c'];
const indexed = items.map((item, index) => `${index}: ${item}`);
console.log(indexed); // ['0: a', '1: b', '2: c']

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

const users = [
  { id: 1, name: 'Alice', age: 25, active: true },
  { id: 2, name: 'Bob', age: 30, active: false },
  { id: 3, name: 'Charlie', age: 35, active: true }
];

// アクティブなユーザーのみを取得
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);

// 30歳以上のユーザーのみを取得
const olderUsers = users.filter(user => user.age >= 30);
console.log(olderUsers);

const products = [
  { name: 'Laptop', price: 1000, category: 'Electronics' },
  { name: 'Book', price: 20, category: 'Education' },
  { name: 'Phone', price: 800, category: 'Electronics' }
];

// 価格が500以上でElectronicsカテゴリの商品
const expensiveElectronics = products.filter(
  product => product.price >= 500 && product.category === 'Electronics'
);
console.log(expensiveElectronics);

const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => {
  console.log(fruit);
});
// apple
// banana
// orange

const items = ['Item 1', 'Item 2', 'Item 3'];
const list = document.getElementById('myList');

items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  list.appendChild(li);
});

const numbers = [10, 20, 30];
numbers.forEach((num, index) => {
  console.log(`Index ${index}: ${num}`);
});
// Index 0: 10
// Index 1: 20
// Index 2: 30

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// 名前が'Bob'のユーザーを検索
const user = users.find(u => u.name === 'Bob');
console.log(user); // { id: 2, name: 'Bob', age: 30 }

// 30歳以上の最初のユーザーを検索
const olderUser = users.find(u => u.age >= 30);
console.log(olderUser); // { id: 2, name: 'Bob', age: 30 }

const numbers = [10, 20, 30, 40, 50];

// 30より大きい最初の要素のインデックス
const index = numbers.findIndex(num => num > 30);
console.log(index); // 3

// 条件に合う要素がない場合
const notFound = numbers.findIndex(num => num > 100);
console.log(notFound); // -1

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

function getUserById(id) {
  return users.find(user => user.id === id);
}

const user = getUserById(2);
console.log(user); // { id: 2, name: 'Bob' }

// 見つからない場合
const notFound = getUserById(99);
console.log(notFound); // undefined

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0);
console.log(sum); // 15

// より簡潔に
const sum2 = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum2); // 15

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// IDをキーとするオブジェクトに変換
const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(usersById);
// { 1: { id: 1, name: 'Alice' }, 2: { id: 2, name: 'Bob' }, ... }

const nested = [[1, 2], [3, 4], [5, 6]];
const flattened = nested.reduce((acc, curr) => {
  return acc.concat(curr);
}, []);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

// またはスプレッド演算子を使用
const flattened2 = nested.reduce((acc, curr) => [...acc, ...curr], []);
console.log(flattened2); // [1, 2, 3, 4, 5, 6]

const numbers = [10, 5, 20, 15, 8];

// 最大値
const max = numbers.reduce((acc, curr) => {
  return curr > acc ? curr : acc;
});
console.log(max); // 20

// 最小値
const min = numbers.reduce((acc, curr) => {
  return curr < acc ? curr : acc;
});
console.log(min); // 5

const numbers = [1, 2, 3, 4, 5];

// 偶数の要素が存在するか
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

// 10より大きい要素が存在するか
const hasLarge = numbers.some(num => num > 10);
console.log(hasLarge); // false

// ユーザーに管理者がいるか
const users = [
  { name: 'Alice', role: 'user' },
  { name: 'Bob', role: 'admin' },
  { name: 'Charlie', role: 'user' }
];
const hasAdmin = users.some(user => user.role === 'admin');
console.log(hasAdmin); // true

const numbers = [2, 4, 6, 8, 10];

// すべての要素が偶数か
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

// すべての要素が10より大きいか
const allLarge = numbers.every(num => num > 10);
console.log(allLarge); // false

// すべてのユーザーがアクティブか
const users = [
  { name: 'Alice', active: true },
  { name: 'Bob', active: true },
  { name: 'Charlie', active: true }
];
const allActive = users.every(user => user.active);
console.log(allActive); // true

const formData = {
  email: 'user@example.com',
  age: 25,
  password: 'secure123'
};

// すべてのフィールドが入力されているか
const allFieldsFilled = Object.values(formData).every(
  value => value !== '' && value !== null && value !== undefined
);
console.log(allFieldsFilled); // true

// 少なくとも1つのフィールドが空か
const hasEmptyField = Object.values(formData).some(
  value => value === '' || value === null || value === undefined
);
console.log(hasEmptyField); // false

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

// 偶数のみを抽出して2倍にする
const doubledEvens = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2);
console.log(doubledEvens); // [4, 8, 12, 16, 20]

const users = [
  { id: 1, name: 'Alice', age: 25, active: true },
  { id: 2, name: 'Bob', age: 30, active: false },
  { id: 3, name: 'Charlie', age: 35, active: true },
  { id: 4, name: 'David', age: 20, active: true }
];

// アクティブなユーザーの名前を年齢順に取得
const activeUserNames = users
  .filter(user => user.active)
  .sort((a, b) => a.age - b.age)
  .map(user => user.name);
console.log(activeUserNames); // ['David', 'Alice', 'Charlie']

const products = [
  { name: 'Laptop', price: 1000, category: 'Electronics', stock: 5 },
  { name: 'Book', price: 20, category: 'Education', stock: 0 },
  { name: 'Phone', price: 800, category: 'Electronics', stock: 10 },
  { name: 'Tablet', price: 600, category: 'Electronics', stock: 3 }
];

// 在庫があり、価格が500以上のElectronics商品の名前と価格
const expensiveElectronics = products
  .filter(p => p.category === 'Electronics')
  .filter(p => p.stock > 0)
  .filter(p => p.price >= 500)
  .map(p => ({ name: p.name, price: p.price }));
console.log(expensiveElectronics);

const largeArray = Array.from({ length: 1000000 }, (_, i) => i);

// 配列メソッドを使用
console.time('Array methods');
const result1 = largeArray
  .filter(num => num % 2 === 0)
  .map(num => num * 2);
console.timeEnd('Array methods');

// forループを使用
console.time('For loop');
const result2 = [];
for (let i = 0; i < largeArray.length; i++) {
  if (largeArray[i] % 2 === 0) {
    result2.push(largeArray[i] * 2);
  }
}
console.timeEnd('For loop');

// 非効率的: すべての要素を変換してからフィルタリング
const inefficient = numbers
  .map(num => num * 2)
  .filter(num => num > 10);

// 効率的: フィルタリングを先に行う
const efficient = numbers
  .filter(num => num > 5)  // 先にフィルタリング
  .map(num => num * 2);   // 必要な要素だけを変換

// 間違い: forEach()で新しい配列を作成しようとする
const numbers = [1, 2, 3];
const doubled = [];
numbers.forEach(num => {
  doubled.push(num * 2);  // 動作するが、map()を使うべき
});

// 正しい: map()を使用
const doubled2 = numbers.map(num => num * 2);

// 間違い: map()の戻り値を無視する
numbers.map(num => num * 2);  // 結果を使用していない

// 間違い: reduce()の初期値を忘れる（数値の合計などでは問題ないが、オブジェクトの場合は必要）
const items = [{ value: 1 }, { value: 2 }];
const sum = items.reduce((acc, item) => acc + item.value);  // 動作する

// しかし、オブジェクトを返す場合は初期値が必要
const grouped = items.reduce((acc, item) => {
  acc[item.value] = item;
  return acc;
}, {});  // 初期値{}が必要

// 1. 適切なメソッドを選択
// 変換が必要: map()
// フィルタリング: filter()
// 検索: find()
// 集約: reduce()
// 副作用のみ: forEach()

// 2. メソッドチェーンを適度に使用（3-4個までが目安）
const result = users
  .filter(user => user.active)
  .map(user => user.name)
  .sort();

// 3. 可読性を優先
// 長いチェーンは分割する
const activeUsers = users.filter(user => user.active);
const names = activeUsers.map(user => user.name);
const sortedNames = names.sort();

// 4. コールバック関数に名前を付ける（複雑な場合）
const isActive = user => user.active;
const getName = user => user.name;
const activeUserNames = users
  .filter(isActive)
  .map(getName);

まとめ

JavaScriptの配列操作では、map()、filter()、forEach()、find()、reduce()などのメソッドが頻繁に使用されます。それぞれのメソッドには特徴があり、適切に使い分けることで、コードの可読性と効率性が向上します。

メソッドチェーンを活用することで、複雑なデータ処理も簡潔に記述できますが、パフォーマンスが重要な場面では、従来のforループとの使い分けも検討しましょう。

これらのメソッドをマスターすることで、より高度で保守性の高いJavaScriptコードを書くことができます。実践的なプロジェクトで積極的に使用し、経験を積むことが上達への近道です。