【JavaScript】配列 (Array) の操作を解説｜Webの基礎

記事内には広告が含まれます

2026年9月4日

はじめに

前回の記事では、演算子（算術演算子・比較演算子・論理演算子・三項演算子）の使い方を解説しました。

今回は、複数のデータをまとめて扱うときに欠かせない配列（Array）の操作方法を解説します。要素の追加・削除から検索、変換・集計、並び替えまで、実務でよく使う書き方を中心に紹介します。

配列の基本（作成・要素の取得・length）

配列は[]（角括弧）で複数の値をまとめて管理できるデータ構造です。

const fruits = ["りんご", "みかん", "ぶどう"];

console.log(fruits[0]); // "りんご"（先頭の要素。添字は0から始まる）
console.log(fruits[2]); // "ぶどう"（末尾の要素）
console.log(fruits.length); // 3（要素の数）

VBAの配列（Dim arr(2) As String）も添字は0始まりなので考え方は同じです。ただしVBAはReDimをしないと要素数を変えられないのに対し、JavaScriptの配列は次で紹介するpushなどのメソッドで要素数を自由に増減できます。

要素の追加・削除（push・pop・unshift・shift）

配列の先頭・末尾に要素を追加したり取り除いたりする基本の書き方です。

const cart = ["ノートPC", "マウス"];

cart.push("キーボード"); // 末尾に追加
console.log(cart); // ["ノートPC", "マウス", "キーボード"]

cart.pop(); // 末尾の要素を削除して返す
console.log(cart); // ["ノートPC", "マウス"]

cart.unshift("USBメモリ"); // 先頭に追加
console.log(cart); // ["USBメモリ", "ノートPC", "マウス"]

cart.shift(); // 先頭の要素を削除して返す
console.log(cart); // ["ノートPC", "マウス"]

先頭や末尾ではなく、途中の位置に追加・削除したい場合はspliceを使います。

const cart = ["ノートPC", "マウス"];

cart.splice(1, 0, "モニター"); // 1番目の位置に0個削除して挿入
console.log(cart); // ["ノートPC", "モニター", "マウス"]

cart.splice(1, 1); // 1番目から1個削除
console.log(cart); // ["ノートPC", "マウス"]

splice(開始位置, 削除する数, 追加する要素...)という書き方で、削除だけ・追加だけ・両方同時に、といった操作がまとめてできます。

要素の検索（includes・indexOf・find・findIndex）

値そのものを探す場合と、条件に合う要素を探す場合で使うメソッドが異なります。

const fruits = ["りんご", "みかん", "ぶどう"];

console.log(fruits.includes("みかん")); // true（存在するかどうか）
console.log(fruits.indexOf("ぶどう")); // 2（見つかった位置。無ければ-1）

オブジェクトが入った配列から条件に合う要素を探す場合は、find・findIndexが便利です。

const users = [
    { id: 1, name: "佐藤" },
    { id: 2, name: "鈴木" },
];

const user = users.find((u) => u.id === 2);
console.log(user); // { id: 2, name: "鈴木" }（最初に条件に一致した要素）

const index = users.findIndex((u) => u.id === 2);
console.log(index); // 1（一致した要素の位置）

繰り返し処理（forEach）

配列の全要素に同じ処理をしたい場合はforEachを使います。

const prices = [100, 200, 300];

prices.forEach((price, index) => {
    console.log(`${index}番目：${price}円`);
});
// 0番目：100円
// 1番目：200円
// 2番目：300円

コールバック関数の第1引数が要素、第2引数が添字（インデックス）です。従来のfor文より簡潔に書けますが、forEachはループを途中で止める（breakする）ことができない点に注意してください（詳しくは後述のQ&Aで解説します）。

配列の変換・抽出・集計（map・filter・reduce）

配列を扱ううえで最もよく使う3つのメソッドです。用途を混同しないよう、役割の違いを押さえておきましょう。

const prices = [100, 200, 300];

// map：全要素を変換した「新しい配列」を作る
const taxedPrices = prices.map((price) => Math.floor(price * 1.1));
console.log(taxedPrices); // [110, 220, 330]

// filter：条件に合う要素だけを抜き出した「新しい配列」を作る
const highPrices = prices.filter((price) => price >= 200);
console.log(highPrices); // [200, 300]

// reduce：全要素を1つの値にまとめる
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 600

reduceの第2引数（上の例では0）は集計の初期値です。これを省略すると、配列が空のときにエラーになります。合計を求める場合は基本的に初期値0を明示しておくと安全です。

mapとfilterは元の配列を変更せず新しい配列を返すため、prices.filter(...).map(...)のようにつなげて書くこともできます。

並び替え（sort・reverse）

配列の順序を並び替えるメソッドです。数値の並び替えには注意が必要です。

const numbers = [40, 100, 5, 25];

numbers.sort();
console.log(numbers); // [100, 25, 40, 5]（文字列として比較されるため意図通りにならない）

numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 25, 40, 100]（昇順）

numbers.sort((a, b) => b - a);
console.log(numbers); // [100, 40, 25, 5]（降順）

sortは比較関数を渡さないと要素を文字列として比較するため、数値の配列では"100"が"25"より前に来るような直感に反する結果になります。数値を並び替える場合は、必ず(a, b) => a - b（昇順）または(a, b) => b - a（降順）を渡してください。

const fruits = ["りんご", "みかん", "ぶどう"];

fruits.reverse();
console.log(fruits); // ["ぶどう", "みかん", "りんご"]（並び順をそのまま反転）

sortとreverseは元の配列そのものを書き換える点が、新しい配列を返すmapやfilterと異なります。元の配列を残しておきたい場合は、[...numbers].sort(...)のようにコピーしてから並び替えましょう。

実務サンプル（在庫リストの絞り込みと合計金額表示）

ここまで紹介したfilter・map・reduceを組み合わせて、在庫データから在庫不足の商品を抜き出し、在庫金額の合計を計算するサンプルです。

HTML

<div id="stockList"></div>

JavaScript（main.js）

document.addEventListener("DOMContentLoaded", () => {
    const items = [
        { name: "コピー用紙", stock: 3, price: 500 },
        { name: "ボールペン", stock: 25, price: 100 },
        { name: "ファイル", stock: 2, price: 150 },
        { name: "付箋", stock: 40, price: 200 },
    ];

    const STOCK_THRESHOLD = 5; // この個数以下を在庫不足とみなす

    // filterで在庫不足の商品だけ抜き出す
    const lowStockItems = items.filter((item) => item.stock <= STOCK_THRESHOLD);

    // mapで表示用の文字列に変換
    const lowStockNames = lowStockItems.map((item) => `${item.name}（残り${item.stock}）`);

    // reduceで全商品の在庫金額を合計
    const totalValue = items.reduce((sum, item) => sum + item.stock * item.price, 0);

    const list = document.getElementById("stockList");
    list.innerHTML = `
        <p>在庫不足の商品：${lowStockNames.join("、")}</p>
        <p>在庫金額の合計：${totalValue.toLocaleString()}円</p>
    `;
});

filterで条件に合う商品だけを抜き出し、その結果をmapで表示用の文字列に変換、さらに元のitems全体をreduceで集計する、という流れです。それぞれのメソッドが「新しい配列を返す」「1つの値にまとめる」という役割の違いを意識すると、処理の流れが追いやすくなります。