【2025年版】JavaScript 配列メソッド総覧完全ガイド – 初心者から上級者まで使える全メソッド解説
JavaScript配列メソッドとは？
JavaScript配列メソッドは、配列データを効率的に操作するための組み込み関数群です。ES6以降の追加メソッドも含めて、現代のWebアプリケーション開発において必須のスキルとなっています。
配列メソッドを学ぶメリット
- コードの簡潔性：複雑なループ処理を1行で記述可能
- 関数型プログラミング：副作用のない純粋な操作
- チェーンメソッド：複数の操作を連結して実行
- パフォーマンス向上：最適化された内部実装
基本的な配列操作メソッド
1. 要素の追加・削除
const fruits = ["りんご", "バナナ"];
// 末尾に追加
fruits.push("オレンジ"); // ["りんご", "バナナ", "オレンジ"]
// 先頭に追加
fruits.unshift("いちご"); // ["いちご", "りんご", "バナナ", "オレンジ"]
// 末尾から削除
const last = fruits.pop(); // "オレンジ", fruits = ["いちご", "りんご", "バナナ"]
// 先頭から削除
const first = fruits.shift(); // "いちご", fruits = ["りんご", "バナナ"]
2. splice() – 万能な要素操作
const numbers = [1, 2, 3, 4, 5];
// 要素の削除
const removed = numbers.splice(2, 2); // [3, 4], numbers = [1, 2, 5]
// 要素の挿入
numbers.splice(2, 0, 3, 4); // numbers = [1, 2, 3, 4, 5]
// 要素の置換
numbers.splice(0, 2, 0, 1); // numbers = [0, 1, 3, 4, 5]
3. slice() – 配列の部分抽出
const animals = ["犬", "猫", "鳥", "魚", "猿"];
// 部分配列の取得
const pets = animals.slice(0, 3); // ["犬", "猫", "鳥"]
const wildAnimals = animals.slice(3); // ["魚", "猿"]
const lastTwo = animals.slice(-2); // ["魚", "猿"]
// 配列のコピー
const animalsCopy = animals.slice(); // 浅いコピー
検索・確認メソッド
1. indexOf() / lastIndexOf() – インデックス検索
const colors = ["赤", "青", "緑", "青", "黄"];
// 最初の出現位置
const firstBlue = colors.indexOf("青"); // 1
// 最後の出現位置
const lastBlue = colors.lastIndexOf("青"); // 3
// 存在しない場合
const purple = colors.indexOf("紫"); // -1
// 開始位置指定
const nextBlue = colors.indexOf("青", 2); // 3
2. includes() – 要素の存在確認
const numbers = [1, 2, 3, 4, 5];
// 要素の存在確認
const hasThree = numbers.includes(3); // true
const hasTen = numbers.includes(10); // false
// 開始位置指定
const hasThreeAfterIndex2 = numbers.includes(3, 3); // false
3. find() / findIndex() – 条件検索
const users = [
{ name: "田中", age: 25 },
{ name: "佐藤", age: 30 },
{ name: "山田", age: 28 }
];
// 最初にマッチする要素
const youngUser = users.find(user => user.age < 30);
// { name: "田中", age: 25 }
// 最初にマッチするインデックス
const youngUserIndex = users.findIndex(user => user.age < 30); // 0
// 条件に合わない場合
const oldUser = users.find(user => user.age > 50); // undefined
高階関数メソッド（関数型プログラミング）
1. map() – 要素の変換
const numbers = [1, 2, 3, 4, 5];
// 各要素を2倍に
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
// オブジェクトの変換
const users = [{ name: "田中", age: 25 }];
const userLabels = users.map(user => `${user.name}(${user.age}歳)`);
// ["田中(25歳)"]
// インデックスも利用
const indexed = numbers.map((num, i) => `${i}: ${num}`);
// ["0: 1", "1: 2", "2: 3", "3: 4", "4: 5"]
2. filter() – 要素のフィルタリング
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 偶数のみ
const evens = numbers.filter(n => n % 2 === 0); // [2, 4, 6, 8, 10]
// 複数条件
const products = [
{ name: "PC", price: 100000, category: "electronics" },
{ name: "本", price: 1500, category: "books" }
];
const cheapElectronics = products.filter(p =>
p.category === "electronics" && p.price < 50000
);
3. reduce() – 累積処理
const numbers = [1, 2, 3, 4, 5];
// 合計
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 15
// 最大値
const max = numbers.reduce((acc, curr) => Math.max(acc, curr));
// オブジェクトへの変換
const users = ["田中", "佐藤", "山田"];
const userObj = users.reduce((acc, name, index) => {
acc[name] = index;
return acc;
}, {}); // { "田中": 0, "佐藤": 1, "山田": 2 }
// グループ化
const items = [
{ category: "fruit", name: "りんご" },
{ category: "fruit", name: "バナナ" },
{ category: "vegetable", name: "にんじん" }
];
const grouped = items.reduce((acc, item) => {
acc[item.category] = acc[item.category] || [];
acc[item.category].push(item.name);
return acc;
}, {});
4. forEach() – 要素の反復処理
const colors = ["赤", "青", "緑"];
// 基本的な反復
colors.forEach(color => console.log(color));
// インデックス付き
colors.forEach((color, index) => {
console.log(`${index}: ${color}`);
});
// DOM操作での活用
const buttons = document.querySelectorAll('.btn');
Array.from(buttons).forEach(btn => {
btn.addEventListener('click', handleClick);
});
条件チェックメソッド
1. some() / every() – 条件判定
const scores = [85, 92, 78, 96, 88];
// 一つでも条件を満たすか
const hasHighScore = scores.some(score => score >= 90); // true
// すべてが条件を満たすか
const allPassing = scores.every(score => score >= 60); // true
// 実用例：フォームバリデーション
const formFields = [
{ value: "田中", valid: true },
{ value: "", valid: false }
];
const isFormValid = formFields.every(field => field.valid); // false
配列の変形・結合メソッド
1. concat() – 配列の結合
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
// 複数配列の結合
const combined = arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// スプレッド演算子での結合（推奨）
const modern = [...arr1, ...arr2, ...arr3];
2. join() – 文字列への変換
const words = ["Hello", "World", "JavaScript"];
// デフォルト区切り文字（カンマ）
const sentence1 = words.join(); // "Hello,World,JavaScript"
// カスタム区切り文字
const sentence2 = words.join(" "); // "Hello World JavaScript"
const sentence3 = words.join(" - "); // "Hello - World - JavaScript"
// CSVデータの生成
const csvRow = ["田中", "25", "東京"].join(","); // "田中,25,東京"
3. reverse() – 要素の逆順（破壊的）
const numbers = [1, 2, 3, 4, 5];
// 元の配列を変更
numbers.reverse(); // [5, 4, 3, 2, 1]
// 非破壊的な逆順（推奨）
const original = [1, 2, 3, 4, 5];
const reversed = [...original].reverse(); // [5, 4, 3, 2, 1]
// original は [1, 2, 3, 4, 5] のまま
4. sort() – 要素のソート（破壊的）
const fruits = ["バナナ", "りんご", "オレンジ"];
const numbers = [10, 5, 20, 3, 15];
// 文字列のソート
fruits.sort(); // ["オレンジ", "バナナ", "りんご"]
// 数値のソート（比較関数必須）
numbers.sort((a, b) => a - b); // [3, 5, 10, 15, 20]
// オブジェクトのソート
const users = [{ name: "田中", age: 30 }, { name: "佐藤", age: 25 }];
users.sort((a, b) => a.age - b.age); // 年齢順
// 非破壊的なソート
const sorted = [...numbers].sort((a, b) => a - b);
ES6以降の新しいメソッド
1. Array.from() – 配列の生成
// 文字列から配列
const chars = Array.from("Hello"); // ["H", "e", "l", "l", "o"]
// NodeListから配列
const elements = Array.from(document.querySelectorAll('.item'));
// 範囲の配列生成
const range = Array.from({length: 5}, (_, i) => i + 1); // [1, 2, 3, 4, 5]
// マップ関数付き
const doubled = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]
2. Array.of() – 要素からの配列生成
// 通常のコンストラクタとの違い
const arr1 = new Array(3); // [empty × 3]
const arr2 = Array.of(3); // [3]
// 複数要素
const mixed = Array.of(1, "hello", true); // [1, "hello", true]
3. fill() – 配列の充填
// 新しい配列の初期化
const zeros = new Array(5).fill(0); // [0, 0, 0, 0, 0]
// 部分的な充填
const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3); // [1, 0, 0, 4, 5]
// オブジェクトでの初期化（注意：参照が共有される）
const users = new Array(3).fill().map(() => ({ name: "", age: 0 }));
4. copyWithin() – 配列内でのコピー
const arr = [1, 2, 3, 4, 5];
// 位置2に位置0-2の要素をコピー
arr.copyWithin(2, 0, 2); // [1, 2, 1, 2, 5]
// 末尾に先頭要素をコピー
const arr2 = [1, 2, 3, 4, 5];
arr2.copyWithin(3, 0, 2); // [1, 2, 3, 1, 2]
ES2019以降の最新メソッド
1. flat() / flatMap() – 配列の平坦化
// 一次元の平坦化
const nested1 = [1, [2, 3], [4, [5, 6]]];
const flat1 = nested1.flat(); // [1, 2, 3, 4, [5, 6]]
// 深い平坦化
const flat2 = nested1.flat(2); // [1, 2, 3, 4, 5, 6]
// 完全な平坦化
const deepNested = [1, [2, [3, [4]]]];
const completely = deepNested.flat(Infinity); // [1, 2, 3, 4]
// flatMap: map + flat
const sentences = ["Hello World", "JavaScript is Fun"];
const words = sentences.flatMap(s => s.split(" "));
// ["Hello", "World", "JavaScript", "is", "Fun"]
2. findLast() / findLastIndex() – 後方検索
const numbers = [1, 2, 3, 4, 3, 2, 1];
// 最後にマッチする要素
const lastThree = numbers.findLast(n => n === 3); // 3
// 最後にマッチするインデックス
const lastThreeIndex = numbers.findLastIndex(n => n === 3); // 4
// 条件での後方検索
const users = [
{ name: "田中", active: true },
{ name: "佐藤", active: false },
{ name: "山田", active: true }
];
const lastActive = users.findLast(user => user.active);
// { name: "山田", active: true }
実践的な配列操作パターン
1. データ変換パイプライン
const salesData = [
{ product: "PC", price: 100000, quantity: 2, month: "2024-01" },
{ product: "スマホ", price: 80000, quantity: 5, month: "2024-01" },
{ product: "PC", price: 100000, quantity: 1, month: "2024-02" }
];
// 月別売上集計
const monthlySales = salesData
.map(item => ({ ...item, total: item.price * item.quantity }))
.reduce((acc, item) => {
acc[item.month] = (acc[item.month] || 0) + item.total;
return acc;
}, {});
// 商品別販売数ランキング
const productRanking = salesData
.reduce((acc, item) => {
acc[item.product] = (acc[item.product] || 0) + item.quantity;
return acc;
}, {})
.entries()
.sort((a, b) => b[1] - a[1])
.slice(0, 3);
2. 配列の重複除去
const numbers = [1, 2, 2, 3, 3, 3, 4, 5];
// Set を使った重複除去
const unique1 = [...new Set(numbers)]; // [1, 2, 3, 4, 5]
// filter + indexOf
const unique2 = numbers.filter((item, index) =>
numbers.indexOf(item) === index
);
// オブジェクト配列の重複除去
const users = [
{ id: 1, name: "田中" },
{ id: 2, name: "佐藤" },
{ id: 1, name: "田中" }
];
const uniqueUsers = users.filter((user, index, arr) =>
arr.findIndex(u => u.id === user.id) === index
);
3. 配列の分割・グループ化
// チャンク分割
function chunk(array, size) {
return array.reduce((chunks, item, index) => {
const chunkIndex = Math.floor(index / size);
chunks[chunkIndex] = chunks[chunkIndex] || [];
chunks[chunkIndex].push(item);
return chunks;
}, []);
}
const chunked = chunk([1, 2, 3, 4, 5, 6, 7], 3); // [[1,2,3], [4,5,6], [7]]
// 条件によるグループ化
function groupBy(array, keyFn) {
return array.reduce((groups, item) => {
const key = keyFn(item);
groups[key] = groups[key] || [];
groups[key].push(item);
return groups;
}, {});
}
const grouped = groupBy(users, user => user.department);
パフォーマンス考慮事項
1. メソッドの計算量
// O(1) - 定数時間
arr.push(item);
arr.pop();
// O(n) - 線形時間
arr.indexOf(item);
arr.includes(item);
arr.shift();
arr.unshift(item);
// O(n log n) - 対数線形時間
arr.sort();
// 効率的な検索にはMapを使用
const userMap = new Map(users.map(u => [u.id, u]));
const user = userMap.get(userId); // O(1)
2. メモリ効率の改善
// 大きな配列では for ループが効率的
function sumLarge(largeArray) {
let sum = 0;
for (let i = 0; i < largeArray.length; i++) {
sum += largeArray[i];
}
return sum;
}
// 遅延評価が必要な場合はジェネレータ
function* filterMap(array, filterFn, mapFn) {
for (const item of array) {
if (filterFn(item)) {
yield mapFn(item);
}
}
}
学習ステップとマスタープラン
初級レベル（2-3週間）
- 基本操作：push, pop, shift, unshift, splice, slice
- 検索メソッド：indexOf, includes, find, findIndex
- 基本変換：join, concat, reverse, sort
- 実践課題：TODOリストの操作、ユーザー検索機能
中級レベル（1-2ヶ月）
- 高階関数：map, filter, reduce, forEach
- 条件判定：some, every
- ES6メソッド：Array.from, Array.of, fill
- 実践課題：データ分析、ショッピングカート、ページネーション
上級レベル（3-6ヶ月）
- 最新メソッド：flat, flatMap, findLast, findLastIndex
- パフォーマンス最適化：計算量の理解、メモリ効率
- 関数型プログラミング：チェーンメソッド、純粋関数
- 実践課題：リアルタイムデータ処理、複雑なフィルタリング
実践問題集
- 初級：配列のソート、重複除去、要素検索
- 中級：データ変換パイプライン、グループ化、集計
- 上級：大量データ処理、メモリ最適化、非同期処理との組み合わせ
まとめ
JavaScript配列メソッドは、モダンなWebアプリケーション開発において必須のスキルです。基本的なCRUD操作から高度な関数型プログラミングまで、適切なメソッドを選択して使用することで、読みやすく効率的なコードが書けるようになります。
重要なのは、各メソッドの特性（破壊的/非破壊的、戻り値の型、計算量）を理解し、用途に応じて適切に使い分けることです。継続的な実践を通じて、配列操作のマスターを目指しましょう。
■プロンプトだけでオリジナルアプリを開発・公開してみた！！
■AI時代の第一歩！「AI駆動開発コース」はじめました！
テックジム東京本校で先行開始。
■テックジム東京本校
「武田塾」のプログラミング版といえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
より早く、より安く、しかも対面型のプログラミングスクールです。
＜短期講習＞5日で5万円の「Pythonミニキャンプ」開催中。
＜月1開催＞放送作家による映像ディレクター養成講座
＜オンライン無料＞ゼロから始めるPython爆速講座
