JavaScriptを学ぶ中で「配列」は避けて通れない重要なテーマです！配列をしっかり理解すると、データの操作がスムーズにでき、プログラミングの幅が広がります。今回は、 配列の基本 から、 便利なメソッド 、そして 専門的なテクニック まで、丁寧に解説していきます。💪
配列って何？
配列の基本
配列は、複数のデータを一つにまとめて扱うことができる便利なデータ構造です。
例えば、「りんご」「みかん」「ぶどう」というフルーツを管理するとき、配列を使えば以下のように書けます。
配列の例
const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits); // ["りんご", "みかん", "ぶどう"]配列の基本操作
配列にアクセスする
配列の要素には、 インデックス番号 を使ってアクセスします（番号は0から始まります）。
console.log(fruits[0]); // "りんご"
console.log(fruits[1]); // "みかん"
console.log(fruits[2]); // "ぶどう"要素を変更する
fruits[1] = "バナナ";
console.log(fruits); // ["りんご", "バナナ", "ぶどう"]配列のメソッドを徹底解説
配列には多くの便利なメソッドが用意されています。以下に、よく使われるものを解説します！
要素を追加するメソッド
push()
配列の最後に新しい要素を追加します。
fruits.push("パイナップル");
console.log(fruits); // ["りんご", "バナナ", "ぶどう", "パイナップル"]unshift()
配列の先頭に新しい要素を追加します。
fruits.unshift("オレンジ");
console.log(fruits); // ["オレンジ", "りんご", "バナナ", "ぶどう", "パイナップル"]要素を削除するメソッド
pop()
配列の最後の要素を削除します。
fruits.pop();
console.log(fruits); // ["オレンジ", "りんご", "バナナ", "ぶどう"]shift()
配列の先頭の要素を削除します。
fruits.shift();
console.log(fruits); // ["りんご", "バナナ", "ぶどう"]配列を操作するメソッド
slice()
配列の一部を取り出し、新しい配列を作ります。
const slicedFruits = fruits.slice(1, 3); // インデックス1から2まで
console.log(slicedFruits); // ["バナナ", "ぶどう"]
console.log(fruits); // 元の配列は変わらないsplice()
配列の一部を削除したり、新しい要素を挿入したりできます。
fruits.splice(1, 1, "スイカ"); // インデックス1を1つ削除し、"スイカ"を挿入
console.log(fruits); // ["りんご", "スイカ", "ぶどう"]配列を探索するメソッド
indexOf()
指定した要素のインデックスを返します（見つからなければ-1を返す）。
console.log(fruits.indexOf("スイカ")); // 1
console.log(fruits.indexOf("梨")); // -1includes()
指定した要素が含まれているかを確認します。
console.log(fruits.includes("スイカ")); // true
console.log(fruits.includes("梨")); // false配列を変形するメソッド
map()
配列の各要素に関数を適用し、新しい配列を作ります。
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]filter()
条件に合う要素だけを取り出します。
const filtered = numbers.filter(num => num > 1);
console.log(filtered); // [2, 3]reduce()
配列を1つの値にまとめます。
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 6専門的な配列操作
多次元配列
配列の中に配列を持つ構造を「多次元配列」と言います。
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // 6配列のソート
sort()
要素をアルファベット順に並べます。ただし、数字の並びに注意が必要です。
const numbers = [10, 1, 20, 5];
numbers.sort(); // 文字列としてソートされる
console.log(numbers); // [1, 10, 20, 5]数値としてソートする場合：
numbers.sort((a, b) => a - b); // 昇順
console.log(numbers); // [1, 5, 10, 20]よくあるミスとその対処法
配列とオブジェクトの混同
配列は「順番があるデータのリスト」であり、オブジェクトは「キーと値の組み合わせ」です。
// 配列
const arr = ["りんご", "バナナ"];
console.log(arr[0]); // "りんご"
// オブジェクト
const obj = { name: "りんご", color: "赤" };
console.log(obj.name); // "りんご"まとめ
JavaScriptの配列は、基本的な操作から高度なメソッドまで、非常に強力で柔軟です！
以下のポイントを押さえれば、配列を自在に操れるようになります：
- 配列の基本構造（インデックスや要素へのアクセス）。
- 便利なメソッド（
push、map、filterなど）。 - 専門的な操作（多次元配列やソート）。
配列を使いこなせるようになると、プログラミングの楽しさがもっと広がりますよ！🎉
コメント