【JavaScript】配列(Array)の使い方と基本操作をわかりやすく解説

JavaScriptでの配列の宣言と初期化

JavaScriptにおける配列の基本は、配列の宣言と初期化です。配列はデータを効率的に管理・操作するための重要なデータ構造です。本章では、配列の基本的な宣言方法と初期化方法について解説します。

配列の宣言方法

JavaScriptで配列を使用するためには、まず配列を宣言する必要があります。配列の宣言方法は非常にシンプルで、以下のように記述します。

let arrayName = [];

このコードでは、arrayNameという名前の空の配列を宣言しています。また、配列を宣言する際にはletやconstを使用します。配列の内容を後から変更する予定がない場合はconstを使うと良いでしょう。

const fruits = [];

配列の初期化

配列の初期化とは、配列を宣言すると同時にその配列に初期値を設定することを指します。初期化には複数の方法がありますが、最も基本的な方法は配列リテラルを使用する方法です。

let fruits = ['apple', 'banana', 'cherry'];

上記の例では、fruitsという配列を宣言し、同時にapple、banana、cherryという3つの要素で初期化しています。また、Arrayコンストラクタを使って配列を初期化する方法もあります。以下をご覧ください。

let numbers = new Array(1, 2, 3, 4, 5);

このコードは、numbersという配列を宣言し、1から5までの数値で初期化しています。さらに、Arrayコンストラクタを使うと、配列の長さを指定することも可能です。

let emptyArray = new Array(10);

この場合、emptyArrayは10個の空要素を持つ配列として初期化されます。

配列リテラルやArrayコンストラクタを使い分けることで、用途に応じた配列の作成が可能となります。次に、配列の基本操作について詳しく見ていきましょう。

【押さえておくべき】配列の基本操作

JavaScriptで配列を操作するための基本的なメソッドを理解することは非常に重要です。ここでは、配列の要素を追加する方法と削除する方法について詳しく解説します。

配列の要素追加

配列に新しい要素を追加する方法はいくつかありますが、最も一般的な方法はpushメソッドとunshiftメソッドです。

pushメソッド

pushメソッドは、配列の末尾に一つ以上の要素を追加します。追加された要素の新しい長さを返すので、次のように使用します。

let fruits = ['apple', 'banana'];
let newLength = fruits.push('cherry', 'date');
console.log(fruits); // ['apple', 'banana', 'cherry', 'date']
console.log(newLength); // 4

上記の例では、fruits配列の末尾にcherryとdateが追加され、配列の新しい長さが返されます。

unshiftメソッド

unshiftメソッドは、配列の先頭に一つ以上の要素を追加します。追加された要素の新しい長さを返すので、次のように使用します。

let fruits = ['apple', 'banana'];
let newLength = fruits.unshift('cherry', 'date');
console.log(fruits); // ['cherry', 'date', 'apple', 'banana']
console.log(newLength); // 4

上記の例では、fruits配列の先頭にcherryとdateが追加され、配列の新しい長さが返されます。

配列から要素を削除

配列から要素を削除する方法として、popメソッド、shiftメソッド、deleteメソッドがあります。それぞれのメソッドの特徴や使い方を解説します。

popメソッド

popメソッドは、配列の末尾から要素を一つ削除し、その削除された要素を返します。配列の長さが一つ減ります。

let fruits = ['apple', 'banana', 'cherry'];
let lastFruit = fruits.pop();
console.log(fruits); // ['apple', 'banana']
console.log(lastFruit); // 'cherry'

上記の例では、fruits配列の末尾にあるcherryが削除され、cherryが返されます。配列の長さは2になります。

shiftメソッド

shiftメソッドは、配列の先頭から要素を一つ削除し、その削除された要素を返します。配列の長さが一つ減ります。

let fruits = ['apple', 'banana', 'cherry'];
let firstFruit = fruits.shift();
console.log(fruits); // ['banana', 'cherry']
console.log(firstFruit); // 'apple'

上記の例では、fruits配列の先頭にあるappleが削除され、appleが返されます。配列の長さは2になります。

deleteメソッド

deleteメソッドは、指定したインデックスの要素を削除しますが、配列の長さは変わりません。削除された箇所にはundefinedが残ります。

let fruits = ['apple', 'banana', 'cherry'];
delete fruits[1];
console.log(fruits); // ['apple', undefined, 'cherry']

上記の例では、fruits配列の2番目の要素bananaが削除され、undefinedがその位置に残ります。配列の長さは3のままです。

これらの基本操作を理解することで、配列の要素を効率的に追加・削除することができます。次に、よく使われる配列メソッドについて見ていきましょう。

よく使われる3つの配列メソッド

JavaScriptの配列操作では、多くのメソッドが用意されています。その中でも特に頻繁に使用されるのがforEach、map、そしてfilterメソッドです。これらのメソッドを理解し活用することで、配列操作がより簡単かつ効率的になります。

forEachメソッド

forEachメソッドは、配列の各要素に対して一度ずつ指定された関数を実行します。ループ処理が必要な場面でよく使用されます。

let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit, index) {
    console.log(index + ': ' + fruit);
});

この例では、配列fruitsの各要素に対して、インデックスと要素をコンソールに表示します。引数として渡される関数は、配列の各要素に対して一度ずつ実行されます。また、関数には、現在の要素、現在のインデックス、配列全体が順番に渡されます。

合わせて読みたい

【JavaScript入門】forEachを使った配列の効率的なループ処理法を解説 | デジタルトレンドナビ

JavaScriptのforEachメソッドの基本的な使い方から、アロー関数を使った具体例、条件分岐の方法、他のループメソッドとの違い、使用時の注意点までを徹底解説します。効率的な配列ループ処理を学び、JavaScriptのスキルを向上させましょう。

mapメソッド

mapメソッドは、配列の各要素に指定された関数を適用し、その結果を新しい配列として返します。元の配列は変更されません。

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(number) {
    return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

この例では、配列numbersの各要素を2倍にした新しい配列doubledを作成しています。各要素に対して指定された関数が実行され、その戻り値が新しい配列の要素となります。また、元の配列は変更されず、新しい配列が返されます。

filterメソッド

filterメソッドは、配列の各要素に対して指定された関数を適用し、その結果がtrueとなる要素だけを含む新しい配列を返します。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

この例では、配列numbersから偶数だけを抽出して新しい配列evenNumbersを作成しています。

各要素に対して指定された関数が実行され、関数の戻り値がtrueの場合、その要素が新しい配列に含まれます。また、元の配列は変更されず、新しい配列が返されます。

これらのメソッドを活用することで、配列操作をより簡単かつ効果的に行うことができます。次に、配列の検索・ソートメソッドについて見ていきましょう。

合わせて読みたい

【配列処理】JavaScript-mapメソッドの使い方と特徴を紹介 | デジタルトレンドナビ

JavaScriptのmapメソッドの使い方と特徴を徹底解説。配列の要素を処理する方法や新しい配列を作成する方法、他のメソッドとの違い、よくあるエラーの対処法などを詳しく解説します。この記事を読めば、mapメソッドを効果的に活用して正しい配列処理ができるようになります。

配列を検索・ソートするメソッド6選

JavaScriptでは、配列の要素を検索したりソートしたりするための便利なメソッドがいくつか用意されています。ここでは、特に重要な6つのメソッドについて詳しく解説します。

配列検索を行うメソッド

配列の中から特定の要素を検索するために使用されるメソッドには、find、findIndex、indexOfがあります。

findメソッド

findメソッドは、指定された条件を満たす最初の要素を返します。条件に合う要素が見つからない場合はundefinedを返します。

let numbers = [1, 2, 3, 4, 5];
let found = numbers.find(function(number) {
    return number > 3;
});

console.log(found); // 4

上記の例では、配列numbersの中で最初に4より大きい要素（4）が見つかります。

findIndexメソッド

findIndexメソッドは、指定された条件を満たす最初の要素のインデックスを返します。条件に合う要素が見つからない場合は-1を返します。

let numbers = [1, 2, 3, 4, 5];
let foundIndex = numbers.findIndex(function(number) {
    return number > 3;
});

console.log(foundIndex); // 3

上記の例では、配列numbersの中で最初に4より大きい要素のインデックス（3）が見つかります。

indexOfメソッド

indexOfメソッドは、指定された要素の最初のインデックスを返します。要素が見つからない場合は-1を返します。

let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('banana');

console.log(index); // 1

上記の例では、配列fruitsの中でbananaのインデックス（1）が見つかります。

配列をソートするメソッド

配列の要素を並べ替えるために使用されるメソッドには、sortとreverseがあります。

sortメソッド

sortメソッドは、配列の要素を指定された比較関数に従って並べ替えます。比較関数を省略した場合、要素は文字列として並べ替えられます。

let numbers = [3, 1, 4, 1, 5, 9];
numbers.sort(function(a, b) {
    return a - b;
});

console.log(numbers); 

[出力イメージ]

この例では、数値が昇順に並べ替えられます。

reverseメソッド：配列の順序を逆にする

reverseメソッドは、配列の要素の順序を逆にします。元の配列が変更されます。

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();

console.log(numbers); 

[出力イメージ]

この例では、配列numbersの要素が逆順に並べ替えられます。

これらのメソッドを使用することで、配列内のデータを効率的に検索・ソートすることができます。次に、配列の結合と分割について見ていきましょう。

配列の結合と分割

JavaScriptでは、配列を結合したり分割したりするための便利なメソッドが用意されています。ここでは、配列の結合方法と分割方法について詳しく解説します。

配列の結合

複数の配列を一つに結合する方法として、concatメソッドとスプレッド構文があります。それぞれの使い方を見ていきましょう。

concatメソッド

concatメソッドは、二つ以上の配列を結合して新しい配列を生成します。元の配列は変更されません。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combinedArray = array1.concat(array2);

console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
console.log(array1); // [1, 2, 3] (元の配列は変更されない)
console.log(array2); // [4, 5, 6] (元の配列は変更されない)

この例では、array1とarray2を結合してcombinedArrayを作成しています。

スプレッド構文

スプレッド構文を使用することで、よりシンプルに配列を結合することができます。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combinedArray = [...array1, ...array2];

console.log(combinedArray); 

[出力イメージ]

この例では、スプレッド構文を使ってarray1とarray2を結合しています。

配列の分割：sliceメソッド

sliceメソッドは、配列の一部を抽出して新しい配列を生成します。元の配列は変更されません。

let numbers = [1, 2, 3, 4, 5];
let slicedArray = numbers.slice(1, 3);

console.log(slicedArray); // [2, 3]
console.log(numbers); 

[出力イメージ]

※元の配列は変更されない

上記の例では、numbers配列のインデックス1からインデックス3（ただし、3は含まれない）までの要素を抽出してslicedArrayを作成しています。

配列を文字列に変換：joinメソッド

joinメソッドは、配列の全要素を連結して一つの文字列に変換します。要素間に挿入する区切り文字を指定することができます。

let fruits = ['apple', 'banana', 'cherry'];
let fruitString = fruits.join(', ');

console.log(fruitString); 

[出力イメージ]

上記の例では、fruits配列の要素をカンマとスペースで区切って連結し、一つの文字列に変換しています。

これらのメソッドを使用することで、配列を柔軟に結合・分割し、必要に応じて文字列に変換することができます。次に、配列の重複要素を解消する方法について見ていきましょう。

配列の重複要素を解消する2つの方法

JavaScriptでは、配列内の重複要素を解消するための方法がいくつか存在します。ここでは、Setを使った方法と、filterメソッドとindexOfを組み合わせた方法の2つをご紹介します。

1. Setを使って重複要素を除去

Setオブジェクトは、値の重複を許さないコレクションです。これを利用することで、配列の重複要素を簡単に取り除くことができます。

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); 

[出力イメージ]

上記の例では、numbers配列から重複する要素を取り除き、新しい配列uniqueNumbersを作成しています。Setを使うことで、配列の要素が自動的に一意になります。

2. filterメソッドとindexOfを使った重複除去

filterメソッドとindexOfメソッドを組み合わせることで、重複要素を取り除くことも可能です。

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.filter((number, index, self) => {
    return self.indexOf(number) === index;
});

console.log(uniqueNumbers); 

[出力イメージ]

上記の例では、numbers配列の各要素に対してfilterメソッドを適用し、配列内で最初に出現するインデックスと現在のインデックスを比較しています。一致する場合のみ、その要素を新しい配列に含めます。

ポイントは大きく以下の3点です。

• filterメソッドは、指定された条件を満たす要素だけを新しい配列に含めます。
• indexOfメソッドは、指定された要素が最初に出現するインデックスを返します。
• self.indexOf(number) === indexの条件で、現在の要素が最初に出現する場合のみ、配列に含めることができます。

これらの方法を使うことで、配列内の重複要素を簡単に解消することができます。用途に応じて、適切な方法を選択してください。

メソッドの使い方を正しく理解し、配列操作をしよう

JavaScriptの配列操作は、Web開発において非常に重要なスキルです。当記事では、配列の宣言と初期化、基本操作、よく使われるメソッド、検索・ソート、結合・分割、重複要素の解消方法について詳しく解説しました。

それぞれのメソッドを理解し、適切に使い分けることで、配列操作を効率的に行うことができます。

これらのメソッドの使い方を正しく理解し、実践に活かすことで、配列操作がより簡単かつ効果的になります。日々の開発において、ぜひ配列メソッドを活用してみてください。