JavaScriptの配列の応用テクニック！よく使う便利な書き方まとめ

1. スプレッド構文で配列を簡単にコピー・結合する

1. スプレッド構文で配列を簡単にコピー・結合する

JavaScriptで配列を扱う際、もっとも頻繁に使う便利なテクニックの一つが「スプレッド構文（...）」です。ドットを3つ書くだけで、配列の「中身だけ」をバラバラに取り出して展開することができます。

プログラミング未経験の方でも直感的に理解できるよう、まずは2つの配列を1つにまとめる（結合する）例を見てみましょう。例えば、前半の数字と後半の数字を合体させて新しいリストを作るイメージです。

let firstGroup = [10, 20];
let secondGroup = [30, 40];

// スプレッド構文で2つを合体！
let allNumbers = [...firstGroup, ...secondGroup];

console.log(allNumbers);

[10, 20, 30, 40]

このように、[...配列名]と書くことで、元の配列を壊さずに新しい配列へ中身を詰め替えることができます。また、配列を丸ごとコピーしたいときにも非常に役立ちます。通常の代入（copy = original）では、片方を変えるともう片方も変わってしまう「参照」の問題が起きますが、スプレッド構文を使えば、完全に別の「複製」として扱えるため、予期せぬバグを防ぐことができます。

let original = ["りんご", "みかん"];

// 中身をコピーして新しい配列を作成
let copyList = [...original];

// コピーしたものに新しく追加しても、元のは変わらない
copyList.push("バナナ");

console.log("元のリスト:", original);
console.log("コピーしたリスト:", copyList);

元のリスト: ["りんご", "みかん"]
コピーしたリスト: ["りんご", "みかん", "バナナ"]

この書き方は、モダンなJavaScript開発において「不変性（イミュータビリティ）」を保つために必須の知識です。シンプルでミスが少なく、コードの可読性（読みやすさ）も格段に上がるため、真っ先にマスターしておきましょう。

2. map()で配列の中身を変換する

2. map()で配列の中身を変換する

JavaScriptの配列操作において、実務で最も頻繁に登場するのがこの「map()」です。一言でいうと、「元の配列の要素を一つずつ取り出し、特定の加工をしてから新しい配列を作る」という機能を持っています。

最大の特徴は、元の配列（オリジナル）を書き換えないこと。これは「イミュータビリティ（不変性）」と呼ばれ、思わぬデータの上書きミスを防ぐために非常に重要な考え方です。プログラミング未経験の方でも、工場のベルトコンベアをイメージすると分かりやすいでしょう。流れてくる部品（データ）に一つずつスタンプを押して、完成品を別の箱に並べていくような仕組みです。

それでは、数字のリストをすべて2倍に書き換えるシンプルな例を見てみましょう。

let numbers = [1, 2, 3];

// mapを使って「各要素を2倍にする」という処理を適用
let doubled = numbers.map(num => {
  return num * 2;
});

console.log("元の配列:", numbers);
console.log("変換後の配列:", doubled);

元の配列: [1, 2, 3]
変換後の配列: [2, 4, 6]

さらに実用的な例として、商品の「名前」と「価格」が入ったリストから、価格だけを抜き出して「円」という文字を付け加えるような使い方もできます。

let prices = [100, 200, 300];

// 数字の後に「円」をつけて文字列に変換する
let labelList = prices.map(price => price + "円");

console.log(labelList);

["100円", "200円", "300円"]

このように、数値計算だけでなく「データの見た目を整える」ときにもmap()は抜群の威力を発揮します。一つひとつの要素に対して繰り返し処理を手動で書く（for文など）必要がないため、コードがスッキリして読みやすくなるのがメリットです。

3. filter()で条件に合う要素だけ取り出す

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()で条件に合う最初の要素を取得する

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()で配列をまとめる

5. reduce()で配列をまとめる

reduce()は配列の全要素を使って一つの値にまとめたいときに使います。例えば合計や平均を計算する場合です。

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);  // 10

初めて見ると少し難しいかもしれませんが、「前の結果」と「今の値」を順番に足していくイメージです。

6. includes()で配列に特定の値があるかチェックする

6. includes()で配列に特定の値があるかチェックする

includes()は配列に特定の値が含まれているかどうかを調べます。見つかればtrue、なければfalseを返します。

let fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits.includes("みかん"));  // true
console.log(fruits.includes("ぶどう"));  // false

条件分岐などで「あるかないか」を簡単に判断できます。

7. 配列の空チェックはlengthで行う

7. 配列の空チェックはlengthで行う

配列が空かどうか調べるときは、配列の長さを表すlengthを使います。0なら空の配列です。

let arr = [];
if (arr.length === 0) {
  console.log("配列は空です");
}

空の配列かどうかはプログラムの分岐でよく使うチェックポイントです。

8. 配列の並び替えはsort()を使う

8. 配列の並び替えはsort()を使う

sort()は配列の要素を並び替えます。ただし、文字列の場合は正しく並びますが、数値は注意が必要です。

数値を正しく並び替える例はこちら。

let numbers = [10, 5, 20, 1];
// 比較関数を渡すと正しく数値順に並ぶ
numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 5, 10, 20]

比較関数なしだと、文字列として並ぶので注意しましょう。

9. 配列を文字列に変換するときはjoin()を使う

9. 配列を文字列に変換するときはjoin()を使う

join()は配列の中身を指定した文字でつなげて一つの文字列にします。例えば、カンマやスペースでつなげることができます。

let arr = ["りんご", "みかん", "バナナ"];
console.log(arr.join(", "));  // りんご, みかん, バナナ

文字列として表示したいときに便利なメソッドです。

10. 配列のネストとフラット化（flat()）

10. 配列のネストとフラット化（flat()）

配列の中に配列が入っている場合を「ネストされた配列」と言います。そんな時はflat()を使うと一段階だけ中身を取り出してフラットな配列にできます。

let nested = [1, 2, [3, 4], 5];
let flat = nested.flat();
console.log(flat);  // [1, 2, 3, 4, 5]

深いネストがある場合は引数に数字を入れて何段階かフラット化できます。

まとめ

まとめ

ここまで、JavaScriptにおける配列操作の応用テクニックを幅広く解説してきました。配列はプログラミングにおいてデータの集合を扱う最も基本的な構造ですが、その操作方法は多岐にわたります。今回ご紹介した手法を使いこなすことで、コードの記述量を劇的に減らしつつ、読みやすくてメンテナンス性の高いプログラムを書くことができるようになります。

モダンな配列操作の重要性

近年のJavaScript開発（ES6以降）では、従来のfor文やwhile文を使った命令的なループ処理よりも、map、filter、reduceといった「宣言的」なメソッドを使うスタイルが主流となっています。これらを使うメリットは、**「何がしたいのか」がコードから一目で分かること**です。

例えば、特定の条件でデータを抽出したいときにfilterを使っていれば、他のエンジニア（あるいは未来の自分）がコードを見た際に「あ、ここではデータの絞り込みをしているんだな」と即座に理解できます。このような自己充足的なコード（Self-documenting code）を書くことは、チーム開発において非常に重要です。

各メソッドの使い分けガイド

今回学んだテクニックを整理すると、以下のような使い分けになります。

• 新しい配列を作りたいとき： map（変換）、filter（抽出）、[...arr]（コピー・結合）
• 一つの値を導き出したいとき： find（検索）、reduce（集計）、includes（存在確認）
• 見た目や形式を整えたいとき： sort（並び替え）、join（文字列化）、flat（平坦化）

実践的なサンプルプログラム

最後に、これらを組み合わせた少し実践的な例を見てみましょう。例えば、「商品リストから在庫があるものだけを選び、名前の配列を作って、カンマ区切りで表示する」という処理は、メソッドチェーンを使うと次のように美しく書けます。

const products = [
  { id: 1, name: "ノートPC", stock: 5 },
  { id: 2, name: "マウス", stock: 0 },
  { id: 3, name: "キーボード", stock: 12 },
  { id: 4, name: "モニター", stock: 8 }
];

// 在庫がある商品（stock > 0）を抽出し、名前だけの配列に変換して結合する
const availableProductNames = products
  .filter(item => item.stock > 0)
  .map(item => item.name)
  .join("、");

console.log("購入可能な商品リスト: " + availableProductNames);

実行結果は以下の通りです。

購入可能な商品リスト: ノートPC、キーボード、モニター

このように、各メソッドを繋げて書く（メソッドチェーン）ことで、複雑なデータ加工もステップバイステップで論理的に記述できます。

さらなるステップアップ：TypeScriptでの活用

大規模な開発現場では、JavaScriptに型定義を追加した**TypeScript**が使われることが一般的です。配列操作においても、型を意識することでより安全なコーディングが可能になります。

interface User {
  id: number;
  name: string;
  isActive: boolean;
}

const userList: User[] = [
  { id: 1, name: "田中", isActive: true },
  { id: 2, name: "佐藤", isActive: false }
];

// isActiveがtrueのユーザーを検索（見つからない可能性もあるのでundefinedを考慮）
const activeUser: User | undefined = userList.find(u => u.isActive);

if (activeUser) {
  console.log(`${activeUser.name}さんはオンラインです。`);
}

JavaScriptの柔軟な配列操作をマスターすることは、プログラミングスキルの土台を固めることに直結します。まずは日々のコーディングの中で、意識的にこれらのメソッドを取り入れてみてください。最初は難しく感じるかもしれませんが、一度慣れてしまえば、もう昔の不便な書き方には戻れなくなるはずです。