JavaScriptの配列の応用テクニック！よく使う便利な書き方まとめ
生徒
「先生、JavaScriptの配列って基本はわかるけど、もっと便利で使いやすいテクニックってありますか？」
先生
「ありますよ。配列はデータを整理する強力な道具なので、応用テクニックを覚えるとずっと効率よく扱えます。具体的な便利な書き方をいくつか紹介しましょう！」
生徒
「ぜひ教えてください！」
1. スプレッド構文で配列を簡単にコピー・結合する
配列のコピーや複数の配列を結合するときに、スプレッド構文（...）が便利です。これは配列の中身を展開するという意味です。
例えば、arr1とarr2を結合して新しい配列を作るのはこう書きます。
let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5]
コピーするときも同じく、簡単に新しい配列が作れます。
let copyArr = [...arr1];
スプレッド構文はわかりやすくてミスが減るのでおすすめです。
2. map()で配列の中身を変換する
map()は配列の全要素に同じ処理をして、新しい配列を作りたいときに使います。元の配列は変わりません。
例えば、数値の配列を全部2倍にする場合。
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]
わかりやすく言うと、配列の中身を全部別のものに「変換」するイメージです。
3. filter()で条件に合う要素だけ取り出す
filter()は配列の中から条件を満たす要素だけを集めて新しい配列を作ります。
例えば、偶数だけを取り出したいとき。
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
条件を書くだけで簡単に絞り込みができる便利なメソッドです。
4. find()で条件に合う最初の要素を取得する
find()は条件を満たす最初の要素だけを取得します。絞り込みの中で一つだけほしいときに使います。
let users = [
{name: "太郎", age: 25},
{name: "花子", age: 30},
{name: "次郎", age: 25}
];
let user = users.find(user => user.age === 25);
console.log(user); // {name: "太郎", age: 25}
最初に条件に合ったものだけ欲しいときに使いやすいです。
5. reduce()で配列をまとめる
reduce()は配列の全要素を使って一つの値にまとめたいときに使います。例えば合計や平均を計算する場合です。
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10
初めて見ると少し難しいかもしれませんが、「前の結果」と「今の値」を順番に足していくイメージです。
6. includes()で配列に特定の値があるかチェックする
includes()は配列に特定の値が含まれているかどうかを調べます。見つかればtrue、なければfalseを返します。
let fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits.includes("みかん")); // true
console.log(fruits.includes("ぶどう")); // false
条件分岐などで「あるかないか」を簡単に判断できます。
7. 配列の空チェックはlengthで行う
配列が空かどうか調べるときは、配列の長さを表すlengthを使います。0なら空の配列です。
let arr = [];
if (arr.length === 0) {
console.log("配列は空です");
}
空の配列かどうかはプログラムの分岐でよく使うチェックポイントです。
8. 配列の並び替えはsort()を使う
sort()は配列の要素を並び替えます。ただし、文字列の場合は正しく並びますが、数値は注意が必要です。
数値を正しく並び替える例はこちら。
let numbers = [10, 5, 20, 1];
// 比較関数を渡すと正しく数値順に並ぶ
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 10, 20]
比較関数なしだと、文字列として並ぶので注意しましょう。
9. 配列を文字列に変換するときはjoin()を使う
join()は配列の中身を指定した文字でつなげて一つの文字列にします。例えば、カンマやスペースでつなげることができます。
let arr = ["りんご", "みかん", "バナナ"];
console.log(arr.join(", ")); // りんご, みかん, バナナ
文字列として表示したいときに便利なメソッドです。
10. 配列のネストとフラット化（flat()）
配列の中に配列が入っている場合を「ネストされた配列」と言います。そんな時はflat()を使うと一段階だけ中身を取り出してフラットな配列にできます。
let nested = [1, 2, [3, 4], 5];
let flat = nested.flat();
console.log(flat); // [1, 2, 3, 4, 5]
深いネストがある場合は引数に数字を入れて何段階かフラット化できます。
