テックコード -web関連の情報サイト- 
JavaScriptの配列は、プログラミングの中で非常に重要な役割を果たします。配列は、データの集まりを効率的に管理し、操作するための強力なツールです。このガイドでは、JavaScript配列の基本から応用までを解説し、配列を使いこなすための知識を深めていきます。
この内容を抑えることができれば、今後様々なプロジェクトやコンテンツ制作に役立つことは間違いないので必ずここで理解しましょう。寧ろこの内容を分からなければ今後先に進むべきではないです。
その前に一旦こちらを挟んでください。
JavaScriptの基礎構文：完全ガイド01
1. JavaScript配列の基礎
配列の宣言と初期化
JavaScriptで配列を宣言するには、[]（角括弧）を使用します。配列は、複数の値を一つの変数にまとめて保持できる便利なデータ構造です。
// 空の配列を宣言
let arr = [];
// 初期化と同時に要素を設定
let numbers = [1, 2, 3, 4, 5];
// 異なる型の要素を持つ配列
let mixedArray = [1, "apple", true, { key: "value" }];
上記のように、配列には数値や文字列、ブーリアン、オブジェクトなど、異なる型のデータを混在させることができます。
配列の基本操作（要素の追加、削除、アクセス）
配列の要素にアクセスするには、配列名の後にインデックス（要素の位置）を指定します。インデックスは0から始まります。
let fruits = ["apple", "banana", "cherry"];
// 2番目の要素にアクセス
console.log(fruits[1]); // "banana"
// 配列の長さを取得
console.log(fruits.length); // 3
// 要素の追加
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "cherry", "orange"]
// 最後の要素を削除
let lastFruit = fruits.pop();
console.log(lastFruit); // "orange"
console.log(fruits); // ["apple", "banana", "cherry"]
このように、push()メソッドで配列に要素を追加し、pop()メソッドで最後の要素を削除することができます。
2. 配列メソッドの活用
JavaScriptには、配列を操作するための便利なメソッドが多数用意されています。ここでは、代表的なメソッドをいくつか紹介します。
push()とpop()で要素の追加と削除
push()は配列の末尾に要素を追加し、pop()は末尾の要素を削除して返します。
let stack = [];
// 要素をスタックに追加
stack.push(10);
stack.push(20);
stack.push(30);
console.log(stack); // [10, 20, 30]
// スタックから要素を取り出す
let poppedElement = stack.pop();
console.log(poppedElement); // 30
console.log(stack); // [10, 20]
shift()とunshift()で要素を先頭から追加・削除
unshift()は配列の先頭に要素を追加し、shift()は先頭の要素を削除します。
let queue = [];
// 要素をキューに追加
queue.unshift("first");
queue.unshift("second");
queue.unshift("third");
console.log(queue); // ["third", "second", "first"]
// キューから要素を取り出す
let shiftedElement = queue.shift();
console.log(shiftedElement); // "third"
console.log(queue); // ["second", "first"]
slice()とsplice()で部分配列の作成と操作
slice()は元の配列を変更せずに部分配列を作成します。一方、splice()は配列の要素を削除または置き換えます。
let numbers = [1, 2, 3, 4, 5];
// 部分配列を作成
let sliced = numbers.slice(1, 3);
console.log(sliced); // [2, 3]
// 元の配列から要素を削除
let spliced = numbers.splice(2, 2);
console.log(spliced); // [3, 4]
console.log(numbers); // [1, 2, 5]
forEach()による繰り返し処理
forEach()メソッドは、配列の各要素に対して一度ずつ関数を実行します。
let names = ["Alice", "Bob", "Charlie"];
// 配列の各要素をコンソールに出力
names.forEach(function(name) {
console.log(name);
});
// 出力: Alice, Bob, Charlie
map()とfilter()で配列を変換・フィルタリング
map()は配列の各要素に関数を適用し、新しい配列を作成します。filter()は条件に一致する要素のみを含む新しい配列を作成します。
let numbers = [1, 2, 3, 4, 5];
// 各要素を2倍にする
let doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]
// 偶数のみをフィルタリング
let evens = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evens); // [2, 4]
3. 高次関数による配列操作
JavaScriptでは、高次関数を使って配列の操作を効率化できます。高次関数とは、他の関数を引数に取る関数のことです。
reduce()による累積計算
reduce()メソッドは、配列の各要素に対して累積計算を行い、単一の値を生成します。
let numbers = [1, 2, 3, 4, 5];
// 合計を計算
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
find()とfindIndex()で条件に合う要素を検索
find()メソッドは、条件に合う最初の要素を返し、findIndex()はその要素のインデックスを返します。
let users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" }
];
// 名前が"Bob"のユーザーを検索
let user = users.find(function(u) {
return u.name === "Bob";
});
console.log(user); // { id: 2, name: "Bob" }
// "Charlie"のインデックスを検索
let index = users.findIndex(function(u) {
return u.name === "Charlie";
});
console.log(index); // 2
some()とevery()で条件の一致をチェック
some()は、配列の少なくとも1つの要素が条件に一致するかをチェックし、every()はすべての要素が条件に一致するかを確認します。
let numbers = [1, 2, 3, 4, 5];
// 配列に偶数が含まれているか
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // true
// すべての要素が偶数か
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // false
4. 応用例：配列の操作を活用した実践的な例
ここでは、配列操作の具体的な応用例をいくつか紹介します。
ユーザー情報のリストを操作する
配列を使ってユーザー情報を管理し、ソートやフィルタリングを行います。
let users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 20 }
];
// 年齢順にソート
users.sort(function(a, b) {
return a.age - b.age;
});
console.log(users);
// 30歳以上のユーザーをフィルタリング
let adults = users.filter(function(user) {
return user.age >= 30;
});
console.log(adults);
配列のソートと検索
配列をソートし、二分探索アルゴリズムで要素を効率的に検索します。
let numbers = [5, 3, 8, 1, 2, 7, 4, 6];
// 数値を昇順にソート
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8]
// 二分探索で要素を検索
function binarySearch(arr, target) {
let left = 0;
let right = arr.length - 1;
while (left <= right) {
let mid = Math.floor((left + right) / 2);
if (arr[mid] === target) {
return mid;
} else if (arr[mid] < target) {
left = mid + 1;
} else {
right = mid - 1;
}
}
return -1;
}
let index = binarySearch(numbers, 7);
console.log(index); // 6
多次元配列の操作
多次元配列を使って、より複雑なデータ構造を操作します。
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 行列を出力
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log(matrix[i][j]);
}
}
// 行列の転置
let transpose = matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
console.log(transpose);
5. まとめ
JavaScriptの配列は、データを管理し操作するための強力なツールです。配列の基本的な使い方から、高度な操作方法までを理解することで、より効率的で効果的なプログラムを作成することができます。今回のガイドで紹介した様々なメソッドや高次関数を駆使することで、配列操作のスキルをさらに向上させ、実践的な問題に対応できるようになるでしょう。
配列の操作は、単なる基礎的な知識にとどまらず、実務でも頻繁に使用される重要なスキルです。今後も学びを深め、実際のプロジェクトでの応用に役立ててください。
どうしても、分からないときはコメントでお知らせください。
答えられる範囲でお答えします。
※基本的に寝る前にチェックしてますので、その日には返信可能かと思います。
※不明点を分かりやすく、教えてください。
