配列の便利なメソッド入門ガイド
はじめに
JavaScriptの配列は、複数のデータをまとめて扱える便利な仕組みです。さらに、配列には「メソッド」と呼ばれる便利な機能がたくさん用意されています。
この記事では、初心者がまず覚えておくと役立つ配列メソッドを紹介します。
1. forEach
配列の要素を順番に処理するときに使います。
let fruits = ["apple", "banana", "orange"];
fruits.forEach(function(fruit, index) {
console.log(index + ": " + fruit);
});
ポイント
- 配列の全要素を順番に処理できる。for 文の代わりに使うとコードがすっきりする
- 要素（値）とインデックス（番号）を同時に扱えるので、リスト表示や番号付き出力に便利
- 例：商品リストを画面に表示する、ログを順番に出力する
2. map
配列の各要素を変換して、新しい配列を作ります。
let names = ["Taro", "Hanako"];
let greetings = names.map(name => name + "さん");
console.log(greetings); // ["Taroさん", "Hanakoさん"]
ポイント
- 各要素を変換して新しい配列を作る。元の配列はそのまま残るので安全
- データを加工するときに非常に便利（例：数値を2倍にする、文字列を大文字にする）
- 例：ユーザー名の配列から「さん」を付けた新しい配列を作る
3. filter
条件に合う要素だけを取り出して、新しい配列を作ります。
let scores = [80, 45, 90, 60];
let passed = scores.filter(score => score >= 60);
console.log(passed); // [80, 90, 60]
ポイント
- 条件に合う要素だけを抽出して新しい配列を作る
- データの絞り込みに最適。検索機能や「合格者だけ表示」などに使える
- 例：点数が60点以上の人だけを取り出す
4. reduce
配列の要素を「1つの値」にまとめます。
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10
ポイント
- 配列を「1つの値」にまとめる。
- 合計・平均・最大値などの計算に使える
- acc（累積値）と num（現在の要素）を使って処理を進める
- 例：売上データの合計を求める、文字列を連結する
5. find
条件に合う最初の要素を返します。
let users = [
{ name: "Taro", age: 20 },
{ name: "Hanako", age: 25 },
{ name: "Jiro", age: 18 }
];
let adult = users.find(user => user.age >= 20);
console.log(adult); // { name: "Taro", age: 20 }
ポイント
- 条件に合う「最初の1つ」だけを返す
- 見つからなければ undefined
6. some / every
配列の要素が条件を満たすかどうかを判定します。
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(num => num > 3)); // true（3より大きい要素がある）
console.log(numbers.every(num => num > 0)); // true（すべての要素が0より大きい）
ポイント
- some は「1つでも条件を満たすか」
- every は「すべてが条件を満たすか」
7. まとめ
Webページでは「クリックされた」「文字が入力された」「ページが読み込まれた」などのイベントが発生します。JavaScriptでは、このイベントに応じて処理を実行できます。
この記事では、配列の便利なメソッドを紹介しました。
- forEach：全要素を順番に処理
- map：要素を変換して新しい配列を作る
- filter：条件に合う要素だけを抽出
- reduce：要素をまとめて1つの値にする
- find：条件に合う最初の要素を返す
- some / every：条件を満たすかどうかを判定
これらを使いこなせば、配列操作がぐっと楽になります。
特に map と filter は頻出するメソッドなので、覚えておくとかなり便利です。