JavaScriptの配列は非常に重要な項目の一つですが、メソッドも一緒に使用することで利便性が上がることは言うまでもありません。
これらのメソッドを活用することで、配列の要素を効率的に操作し、コードの可読性と保守性を大幅に向上させることができます。
JavaScriptの配列メソッドをマスターすることで、あなたのプログラムは一層洗練されたものになるでしょう。
それでは、配列メソッドの世界へ一緒に踏み出していきましょう。
配列の基本メソッド
push() メソッド
push メソッドは、配列の末尾に一つまたは複数の要素を追加するために使用されます。
このメソッドは、追加された後の配列の新しい長さを返します。
// 基本構文
array.push(element1, element2, ..., elementN)
let fruits = ['apple', 'banana', 'mango'];
// 単一の要素を追加
fruits.push('orange');
console.log(fruits); // 出力: ['apple', 'banana', 'mango', 'orange']
// 複数の要素を追加
fruits.push('pineapple', 'grape');
console.log(fruits); // 出力: ['apple', 'banana', 'mango', 'orange', 'pineapple', 'grape']
// 新しい配列の長さを取得
let newLength = fruits.push('strawberry');
console.log(newLength); // 出力: 7
console.log(fruits); // 出力: ['apple', 'banana', 'mango', 'orange', 'pineapple', 'grape', 'strawberry']
push メソッドは元の配列を変更します（破壊的操作）。
配列の末尾に新しい要素を追加するため、既存の要素の順序は変更されません。
pop() メソッド
pop メソッドは、配列の末尾から要素を一つ削除し、その削除された要素を返します。
このメソッドは、配列の長さを減少させるため、元の配列が変更されます。
// 基本構文
let removedElement = array.pop();
let fruits = ['apple', 'banana', 'mango', 'orange'];
// 配列の末尾から要素を削除
let removedElement = fruits.pop();
console.log(removedElement); // 出力: 'orange'
console.log(fruits); // 出力: ['apple', 'banana', 'mango']
// さらに要素を削除
removedElement = fruits.pop();
console.log(removedElement); // 出力: 'mango'
console.log(fruits); // 出力: ['apple', 'banana']
pop メソッドは元の配列を変更します（破壊的操作）。
配列が空の場合、pop メソッドは undefined を返します。
shift() メソッド
shift メソッドは、配列の最初の要素を削除し、その削除された要素を返します。
このメソッドは、配列の残りの要素を前にシフトし、配列の長さを減少させるため、元の配列が変更されます。
// 基本構文
let removedElement = array.shift();
let fruits = ['apple', 'banana', 'mango', 'orange'];
// 配列の最初の要素を削除
let removedElement = fruits.shift();
console.log(removedElement); // 出力: 'apple'
console.log(fruits); // 出力: ['banana', 'mango', 'orange']
// さらに要素を削除
removedElement = fruits.shift();
console.log(removedElement); // 出力: 'banana'
console.log(fruits); // 出力: ['mango', 'orange']
shift メソッドは元の配列を変更します（破壊的操作）。
配列が空の場合、shift メソッドは undefined を返します。
unshift() メソッド
unshift メソッドは、配列の先頭に一つまたは複数の要素を追加し、その新しい長さを返します。
このメソッドは、既存の要素を後ろにシフトさせ、元の配列を変更します。
array.unshift(element1, element2, ..., elementN)
let fruits = ['banana', 'mango', 'orange'];
// 単一の要素を追加
fruits.unshift('apple');
console.log(fruits); // 出力: ['apple', 'banana', 'mango', 'orange']
// 複数の要素を追加
fruits.unshift('strawberry', 'blueberry');
console.log(fruits); // 出力: ['strawberry', 'blueberry', 'apple', 'banana', 'mango', 'orange']
// 新しい配列の長さを取得
let newLength = fruits.unshift('pineapple');
console.log(newLength); // 出力: 7
console.log(fruits); // 出力: ['pineapple', 'strawberry', 'blueberry', 'apple', 'banana', 'mango', 'orange']
unshift メソッドは元の配列を変更します（破壊的操作）。
配列の先頭に新しい要素を追加するため、既存の要素の順序が変更されます。
配列の操作メソッド
concat() メソッド
concat メソッドは、二つ以上の配列を結合して新しい配列を生成します。
このメソッドは元の配列を変更せず、新しい配列を返します。
// 基本構文
let newArray = array1.concat(array2, array3, ..., arrayN);
let fruits = ['apple', 'banana', 'mango'];
let additionalFruits = ['orange', 'pineapple', 'grape'];
let moreFruits = ['strawberry', 'blueberry'];
// 二つの配列を結合
let combinedFruits = fruits.concat(additionalFruits);
console.log(combinedFruits); // 出力: ['apple', 'banana', 'mango', 'orange', 'pineapple', 'grape']
// 三つの配列を結合
let allFruits = fruits.concat(additionalFruits, moreFruits);
console.log(allFruits); // 出力: ['apple', 'banana', 'mango', 'orange', 'pineapple', 'grape', 'strawberry', 'blueberry']
// 元の配列は変更されない
console.log(fruits); // 出力: ['apple', 'banana', 'mango']
console.log(additionalFruits); // 出力: ['orange', 'pineapple', 'grape']
console.log(moreFruits); // 出力: ['strawberry', 'blueberry']
concat メソッドは元の配列を変更せず、 新しい配列を返します（非破壊的操作）。
文字列や他の非配列要素を引数として渡すこともできます。
その場合、これらの要素は結合された新しい配列に追加されます。
slice() メソッド
slice メソッドは、配列の一部を抽出して新しい配列として返します。
このメソッドは元の配列を変更しません。
抽出する範囲は、開始位置と終了位置（終了位置は含まれません）を指定します。
array.slice(begin, end)
begin: 抽出を開始する位置のインデックス。この位置の要素は含まれます。省略すると配列の先頭から抽出を開始します。
end: 抽出を終了する位置のインデックス。この位置の要素は含まれません。省略すると配列の末尾まで抽出します。
let fruits = ['apple', 'banana', 'mango', 'orange', 'pineapple'];
// インデックス1から3まで（3は含まない）を抽出
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 出力: ['banana', 'mango']
// インデックス2から末尾までを抽出
slicedFruits = fruits.slice(2);
console.log(slicedFruits); // 出力: ['mango', 'orange', 'pineapple']
// 配列の末尾から2つの要素を抽出
slicedFruits = fruits.slice(-2);
console.log(slicedFruits); // 出力: ['orange', 'pineapple']
// 元の配列は変更されない
console.log(fruits); // 出力: ['apple', 'banana', 'mango', 'orange', 'pineapple']
slice メソッドは元の配列を変更しません（非破壊的操作）。
負のインデックスを使用すると、配列の末尾からのオフセットを指定できます（例：-1は最後の要素を指します）
splice() メソッド
splice メソッドは、配列の指定された要素を削除または置換し、オプションで新しい要素を追加するために使用されます。
元の配列を変更するため、非常に強力かつ柔軟な操作が可能です。
array.splice(start, deleteCount, item1, item2, ..., itemN)
start: 配列の変更を開始する位置のインデックス。負の値を指定すると、配列の末尾からのオフセットを意味します。
deleteCount: 削除する要素の数。省略すると start 以降の全要素が削除されます。
item1, item2, ..., itemN: 配列に追加する新しい要素。指定しない場合は削除のみ行われます。
let fruits = ['apple', 'banana', 'mango', 'orange', 'pineapple'];
// インデックス2から1つの要素を削除
let removedElements = fruits.splice(2, 1);
console.log(removedElements); // 出力: ['mango']
console.log(fruits); // 出力: ['apple', 'banana', 'orange', 'pineapple']
// インデックス1から2つの要素を削除し、新しい要素を追加
removedElements = fruits.splice(1, 2, 'grape', 'kiwi');
console.log(removedElements); // 出力: ['banana', 'orange']
console.log(fruits); // 出力: ['apple', 'grape', 'kiwi', 'pineapple']
// 要素を削除せず、新しい要素を追加
fruits.splice(2, 0, 'strawberry', 'blueberry');
console.log(fruits); // 出力: ['apple', 'grape', 'strawberry', 'blueberry', 'kiwi', 'pineapple']
// 配列の末尾から2つの要素を削除
removedElements = fruits.splice(-2, 2);
console.log(removedElements); // 出力: ['kiwi', 'pineapple']
console.log(fruits); // 出力: ['apple', 'grape', 'strawberry', 'blueberry']
splice メソッドは元の配列を変更します（破壊的操作）。
削除された要素を含む新しい配列が返されます。
配列の変換メソッド
join() メソッド
join メソッドは、配列の全ての要素を結合して一つの文字列に変換します。
配列の要素間に挿入する文字列（デリミタ）を指定することができ、指定がない場合はカンマ , がデフォルトとして使用されます。
let joinedString = array.join(separator);
separator: 配列の各要素を結合する際に挿入する文字列。省略した場合はカンマ , が使用されます。
let fruits = ['apple', 'banana', 'mango'];
// デフォルトのデリミタ（カンマ）を使用
let joinedFruits = fruits.join();
console.log(joinedFruits); // 出力: 'apple,banana,mango'
// カンマとスペースをデリミタとして使用
joinedFruits = fruits.join(', ');
console.log(joinedFruits); // 出力: 'apple, banana, mango'
// ハイフンをデリミタとして使用
joinedFruits = fruits.join(' - ');
console.log(joinedFruits); // 出力: 'apple - banana - mango'
// 空文字列をデリミタとして使用（連結）
joinedFruits = fruits.join('');
console.log(joinedFruits); // 出力: 'applebananamango'
join メソッドは元の配列を変更しません（非破壊的操作）。
数値や他のデータ型の要素も文字列として結合されます。
toString() メソッド
toString メソッドは、配列の全ての要素を文字列として結合し、一つの文字列を返します。
各要素はカンマ（,）で区切られます。このメソッドは配列の各要素を文字列に変換するシンプルな方法です。
let stringRepresentation = array.toString();
stringRepresentation: 配列の全ての要素がカンマで区切られた文字列として返されます。
let fruits = ['apple', 'banana', 'mango'];
// 配列を文字列に変換
let stringRepresentation = fruits.toString();
console.log(stringRepresentation); // 出力: 'apple,banana,mango'
let numbers = [1, 2, 3, 4, 5];
stringRepresentation = numbers.toString();
console.log(stringRepresentation); // 出力: '1,2,3,4,5'
toString メソッドは元の配列を変更しません（非破壊的操作）。
配列の各要素は自動的に文字列に変換され、カンマで区切られます。
配列の反復処理メソッド
forEach() メソッド
forEach メソッドは、配列の各要素に対して一度ずつ指定した関数を実行します。
与えられた関数は配列の各要素に対して呼び出され、その要素、インデックス、および元の配列が引数として渡されます。
このメソッドは配列の各要素を処理するための便利な方法です。
array.forEach(function(element, index, array) {
// 処理するコード
});
-
element: 現在の配列要素 -
index: 現在の要素のインデックス -
array: 現在の配列
let fruits = ['apple', 'banana', 'mango', 'orange'];
// 各要素をコンソールに出力
fruits.forEach(function(element, index) {
console.log(`${index}: ${element}`);
});
// 出力:
// 0: apple
// 1: banana
// 2: mango
// 3: orange
// 配列要素の合計値を計算（数値の配列の場合）
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(function(element) {
sum += element;
});
console.log(sum); // 出力: 15
forEach メソッドは return 文を使ってループを終了させることができません。ループを終了させたい場合は、for ループや for...of ループを使用する必要があります。
forEach メソッドは元の配列を変更しません（非破壊的操作）。
forEach メソッドは非同期的に動作するわけではないので、大量のデータを処理する場合には慎重に使用する必要があります。
map() メソッド
map メソッドは、配列の各要素に対して指定した関数を実行し、その結果から新しい配列を作成します。
このメソッドは、元の配列を変更せずに、各要素を別の形に変換するために便利です。
/let newArray = array.map(function(element, index, array) {
// 処理するコード
return newElement;
});
-
element: 現在の配列要素 -
index: 現在の要素のインデックス -
array: 現在の配列 -
newElement:mapメソッドに渡された関数が返す新しい要素
let numbers = [1, 2, 3, 4, 5];
// 各要素を2倍にする
let doubled = numbers.map(function(element) {
return element * 2;
});
console.log(doubled); // 出力: [2, 4, 6, 8, 10]
// 各要素を文字列として返す
let stringified = numbers.map(function(element) {
return element.toString();
});
console.log(stringified); // 出力: ['1', '2', '3', '4', '5']
// 配列のオブジェクトのプロパティを変換
let users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
let names = users.map(function(user) {
return user.name;
});
console.log(names); // 出力: ['Alice', 'Bob', 'Charlie']
map メソッドは元の配列を変更しません（非破壊的操作）。
map メソッドは常に新しい配列を返します。元の配列と新しい配列の長さは同じです。
filter() メソッド
filter メソッドは、指定した条件を満たす配列の要素だけを抽出し、新しい配列を作成します。
このメソッドを使用することで、元の配列を変更することなく、特定の基準に一致する要素だけを取り出すことができます。
let newArray = array.filter(function(element, index, array) {
// 条件を満たす要素はtrueを返す
return condition;
});
-
element: 現在の配列要素 -
index: 現在の要素のインデックス -
array: 現在の配列 -
condition: 条件を満たす要素がtrueを返します
/let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 偶数だけを抽出
let evenNumbers = numbers.filter(function(element) {
return element % 2 === 0;
});
console.log(evenNumbers); // 出力: [2, 4, 6, 8, 10]
// 配列から特定の条件を満たすオブジェクトを抽出
let users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
let usersOver30 = users.filter(function(user) {
return user.age > 30;
});
console.log(usersOver30); // 出力: [{ name: 'Charlie', age: 35 }]
filter メソッドは元の配列を変更しません（非破壊的操作）。
filter メソッドは条件を満たす要素のみを含む新しい配列を返します。元の配列の長さが変わるわけではありません。
配列の整列とソートメソッド
sort() メソッド
sort メソッドは、配列の要素をアルファベット順または指定した条件に基づいて並べ替えます。
デフォルトでは、要素は文字列としてソートされるため、数値のソートなど特定の条件で並べ替える場合は比較関数を提供する必要があります。
array.sort([compareFunction])
compareFunction: オプションの関数。要素を比較し、そのソート順を定義する関数です。
let fruits = ['banana', 'apple', 'mango', 'orange'];
// アルファベット順にソート
fruits.sort();
console.log(fruits); // 出力: ['apple', 'banana', 'mango', 'orange']
let numbers = [4, 2, 5, 1, 3];
// 数値の昇順にソート
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // 出力: [1, 2, 3, 4, 5]
// 数値の降順にソート
numbers.sort(function(a, b) {
return b - a;
});
console.log(numbers); // 出力: [5, 4, 3, 2, 1]
sort メソッドは元の配列を変更します（破壊的操作）。
デフォルトのソート順は文字列としてのソート順です。数値やその他のデータ型をソートする場合は比較関数が必要です。
reverse() メソッド
reverse メソッドは、配列の要素の順序を反転させます。
このメソッドは元の配列を変更し、最初の要素が最後に、最後の要素が最初になります。
// 基本構文
array.reverse()
let fruits = ['apple', 'banana', 'mango', 'orange'];
// 配列の要素の順序を反転
fruits.reverse();
console.log(fruits); // 出力: ['orange', 'mango', 'banana', 'apple']
let numbers = [1, 2, 3, 4, 5];
// 数値の配列を反転
numbers.reverse();
console.log(numbers); // 出力: [5, 4, 3, 2, 1]
-
reverseメソッドは元の配列を変更します（破壊的操作）。 - 配列が反転するため、元の順序が失われます。
その他の便利なメソッド
reduce() メソッド
reduce メソッドは、配列の全ての要素に対して指定した関数を実行し、単一の結果を生成します。
このメソッドは、配列を一つの値に集約するのに便利です。
reduce メソッドは、累積値（アキュムレータ）と現在の値を引数として関数に渡します。
array.reduce(function(accumulator, currentValue, currentIndex, array) {
// 処理するコード
return newAccumulator;
}, initialValue)
-
accumulator: 関数が実行されるたびに累積される値 -
currentValue: 現在の配列要素 -
currentIndex: 現在の要素のインデックス（省略可能） -
array: 現在の配列（省略可能） -
initialValue: 初期値
let numbers = [1, 2, 3, 4, 5];
// 数値の配列の合計を計算
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 出力: 15
// 数値の配列の積を計算
let product = numbers.reduce(function(accumulator, currentValue) {
return accumulator * currentValue;
}, 1);
console.log(product); // 出力: 120
reduce メソッドは元の配列を変更しません（非破壊的操作）。
初期値を設定しない場合、最初の要素が初期値として使用され、ループは配列の2番目の要素から開始されます。
find() メソッド
find メソッドは、指定した条件を満たす配列の最初の要素を返します。
条件を満たす要素が見つからない場合は undefined を返します。
このメソッドは、配列内の特定の要素を検索するために便利です。
let foundElement = array.find(function(element, index, array) {
return condition;
});
-
element: 現在の配列要素 -
index: 現在の要素のインデックス（省略可能） -
array: 現在の配列（省略可能） -
condition: 条件を満たす要素がtrueを返す
let numbers = [1, 2, 3, 4, 5];
// 最初の偶数を見つける
let foundNumber = numbers.find(function(element) {
return element % 2 === 0;
});
console.log(foundNumber); // 出力: 2
let users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
// 年齢が30以上の最初のユーザーを見つける
let user = users.find(function(user) {
return user.age >= 30;
});
console.log(user); // 出力: { name: 'Bob', age: 30 }
find メソッドは元の配列を変更しません（非破壊的操作）。
条件を満たす最初の要素が見つかった時点で処理が終了します。
findIndex() メソッド
findIndex メソッドは、指定した条件を満たす配列の最初の要素のインデックスを返します。
条件を満たす要素が見つからない場合は -1 を返します。
このメソッドは、配列内の特定の要素のインデックスを検索するために便利です。
let foundIndex = array.findIndex(function(element, index, array) {
return condition;
});
-
element: 現在の配列要素 -
index: 現在の要素のインデックス（省略可能） -
array: 現在の配列（省略可能） -
condition: 条件を満たす要素がtrueを返す
let numbers = [1, 2, 3, 4, 5];
// 最初の偶数のインデックスを見つける
let foundIndex = numbers.findIndex(function(element) {
return element % 2 === 0;
});
console.log(foundIndex); // 出力: 1
let users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
// 年齢が30以上の最初のユーザーのインデックスを見つける
let userIndex = users.findIndex(function(user) {
return user.age >= 30;
});
console.log(userIndex); // 出力: 1
findIndex メソッドは元の配列を変更しません（非破壊的操作）。
条件を満たす最初の要素が見つかった時点で処理が終了します。
まとめ
JavaScriptの配列メソッドを理解し、活用することで、データ操作の効率性が大幅に向上します。
基本的なメソッドから高度な操作方法まで、多くの場面で利用できるこれらのツールは、開発者にとって非常に有益です。
配列の要素を追加・削除したり、特定の条件に基づいて要素を抽出・変換したりすることで、コードの可読性とメンテナンス性が向上します。
配列メソッドを駆使することで、複雑なデータ処理もシンプルに実装でき、より洗練されたプログラムを作成することが可能です。
この記事を通じて得た知識を基に、JavaScriptの配列操作をマスターし、開発の効率化と品質向上を図りましょう。
配列メソッドの世界をしっかりと把握し、実践に役立ててください。
