【2026年8月最新】JavaScript配列(Array)の使い方完全ガイド｜初期化・追加削除・ループ処理を整理する

顧客リスト、商品一覧、日々の売上データ——プログラムの世界では、こうした「複数の値のまとまり」を扱う場面が非常に多くあります。JavaScriptでこの役割を担うのが配列（Array）です。

検索するとpushやsplice、mapといったメソッド名の断片はすぐに見つかりますが、「どのメソッドをどんな場面で使い分ければいいのか」を体系的に整理した記事は多くありません。この記事では、配列の宣言・初期化から、要素の追加削除、結合・検索、ループ処理（forEach/map/filter/reduce）までを、実務でよく使う場面に絞って解説します。

さらに後半では、視点を変えて「配列処理のようなデータ操作を、非エンジニアがどう扱うか」にも触れます。弊社（株式会社GENAI）はAI導入支援を専門にしている会社で、社内の顧客データ・売上データの集計処理の多くをClaude Codeというツールに任せています。「Excelで消耗している業務」をAIでどう変えられるか、判断材料を持ち帰っていただける記事です。

この記事を最後まで読むと、次のことが分かります。

01 ARRAY BASICS 配列(Array)とは何か・宣言と初期化 複数の値を1つの箱にまとめて管理する仕組み

配列（Array）とは、複数の値を順番に並べて管理するためのデータ構造です。例えば「田中さん、佐藤さん、鈴木さん」という3人の名前を、1つの変数の中にまとめて入れておくことができます。

// 配列リテラルによる宣言（最も一般的な書き方）
const names = ["田中", "佐藤", "鈴木"];

console.log(names[0]); // "田中"（先頭の要素）
console.log(names.length); // 3（要素の数）

1-1. 配列リテラル vs Arrayコンストラクタ

配列を作る方法は複数ありますが、実務でほぼ100%使われるのは配列リテラル（[]で囲む書き方）です。new Array()という書き方（配列コンストラクタ）も存在しますが、挙動に癖があるため注意が必要です。

書き方	結果	注意点
[5]	要素が1つ（値は5）の配列	直感的な結果になる
new Array(5)	長さ5の空の配列（要素は5個とも空）	数値を1つだけ渡すと「要素数の指定」として扱われる特殊な挙動
new Array(1, 2, 3)	[1, 2, 3] という配列	複数の値を渡した場合は配列リテラルと同じ結果

02 ADD & REMOVE 要素の追加・削除の方法 push/pop/shift/unshift/spliceを使い分ける

配列に対する最も基本的な操作は「要素を追加する」「要素を削除する」の2つです。JavaScriptにはこれを行う複数のメソッドが用意されており、どこに追加・削除するかによって使い分けます。

メソッド	操作	追加・削除の位置
push()	要素を追加	配列の末尾
pop()	要素を削除	配列の末尾
unshift()	要素を追加	配列の先頭
shift()	要素を削除	配列の先頭
splice()	要素を追加・削除・置換	任意の位置（インデックス指定）

const fruits = ["りんご", "バナナ"];

fruits.push("みかん");     // 末尾に追加 → ["りんご","バナナ","みかん"]
fruits.pop();               // 末尾を削除 → ["りんご","バナナ"]
fruits.unshift("ぶどう");  // 先頭に追加 → ["ぶどう","りんご","バナナ"]
fruits.shift();             // 先頭を削除 → ["りんご","バナナ"]

// spliceは「開始位置」「削除する数」「追加する値」を指定
fruits.splice(1, 0, "もも"); // インデックス1に"もも"を追加（削除数0）
console.log(fruits); // ["りんご","もも","バナナ"]

03 MERGE & SEARCH 配列の結合・検索・比較 concat・slice・indexOf・includesの使い分け

3-1. 配列の結合と分割

const a = ["A", "B"];
const b = ["C", "D"];

// 結合（元の配列は変更されない）
const merged = a.concat(b); // ["A","B","C","D"]
// スプレッド構文でも同じことができる（現在はこちらが主流）
const merged2 = [...a, ...b]; // ["A","B","C","D"]

// 分割（一部だけ取り出す）
const part = merged.slice(1, 3); // ["B","C"]（インデックス1〜2）

3-2. 配列内の検索

メソッド	返り値	使いどころ
indexOf(値)	見つかった位置（見つからなければ-1）	「何番目にあるか」を知りたいとき
includes(値)	true / false	「含まれているかどうか」だけを知りたいとき
find(条件)	条件に一致した最初の要素そのもの	「条件に合う要素の中身」が欲しいとき
filter(条件)	条件に一致した要素すべての新しい配列	「条件に合う要素を全部」欲しいとき

const users = [
  { name: "田中", age: 28 },
  { name: "佐藤", age: 35 },
];

const found = users.find(u => u.age > 30); // { name: "佐藤", age: 35 }
const isExist = users.some(u => u.name === "田中"); // true

3-3. 配列同士を比較する

2つの配列が「同じ内容かどうか」を比較したい場面もよくあります。ただし、JavaScriptでは配列同士を===で直接比較しても、中身が同じでも別物として判定されてしまいます。

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

console.log(arr1 === arr2); // false（別々の配列として扱われる）

// 中身を比較したい場合はJSON化して比較する簡易的な方法がよく使われる
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)); // true

// every()で全要素が条件を満たすか判定することもできる
console.log(arr1.every((v, i) => v === arr2[i])); // true

04 LOOP PROCESSING ループ処理（forEach・map・filter・reduce） 配列を1件ずつ処理する4つの代表的な方法

配列の全要素に対して同じ処理を繰り返す「ループ処理」は、業務データを扱う上で最も出番の多い操作です。JavaScriptにはこれを実現する複数のメソッドがあり、目的によって明確に使い分けるのがコツです。

メソッド	目的	返り値
forEach()	全要素に対して処理を実行するだけ（表示・記録など）	なし（undefined）
map()	全要素を加工し、新しい配列を作る	加工後の新しい配列
filter()	条件に合う要素だけを絞り込む	絞り込まれた新しい配列
reduce()	全要素を1つの値に集約する（合計・平均など）	集約された単一の値

const sales = [12000, 8500, 23000, 5000];

// forEach: 1件ずつ処理するだけ
sales.forEach(s => console.log(`売上: ${s}円`));

// map: 消費税10%を加算した新しい配列を作る
const withTax = sales.map(s => Math.floor(s * 1.1));

// filter: 1万円以上の売上だけ抽出
const highSales = sales.filter(s => s >= 10000);

// reduce: 合計金額を算出
const total = sales.reduce((sum, s) => sum + s, 0);
console.log(total); // 48500

4-1. 実務でよく使う「組み合わせ」パターン

実務では、これら4つのメソッドを単体で使うより、組み合わせて使う場面がほとんどです。代表的なパターンとして、「条件で絞り込んでから集計する」という流れを見てみましょう。

const orders = [
  { product: "A", amount: 12000, status: "完了" },
  { product: "B", amount: 8000,  status: "キャンセル" },
  { product: "A", amount: 15000, status: "完了" },
  { product: "C", amount: 5000,  status: "完了" },
];

// 1. filterで「完了」のみ絞り込む
// 2. mapで金額だけの配列に変換する
// 3. reduceで合計する
const totalCompleted = orders
  .filter(o => o.status === "完了")
  .map(o => o.amount)
  .reduce((sum, amount) => sum + amount, 0);

console.log(totalCompleted); // 32000（キャンセルを除いた合計）

このようにfilter → map → reduceとメソッドを鎖のようにつなげる書き方（メソッドチェーン）は、実務のデータ集計で頻出するパターンです。1つずつの意味さえ理解していれば、組み合わせた際の処理の流れも自然に読めるようになります。

05 FOR NON-ENGINEERS 【独自】非エンジニアが業務データを扱う現実的な方法 配列処理を「書く」か「AIに任せる」かを判断する

ここまでJavaScriptの配列操作を解説してきましたが、正直なところ「日々の業務では顧客リストや売上データをExcel・スプレッドシートで扱っているだけで、コードなんて書かない」という方が大半だと思います。

弊社（株式会社GENAI）はAI導入支援を専門にしており、日々さまざまな企業の業務データ処理の相談を受けています。その中で強く感じるのは、「配列操作（データの絞り込み・集計・加工）」という考え方自体は、コードを書かない人にとっても十分役に立つという点です。

5-1. Excel関数とJavaScript配列操作の対応関係

実は、この記事で紹介したメソッドの多くは、Excel・スプレッドシートの関数と発想がよく似ています。

JavaScriptの配列操作	近いExcel/スプレッドシート関数	やっていること
filter()	FILTER関数、オートフィルタ	条件に合うデータだけ絞り込む
map()	列全体に数式をコピーする	全行に同じ計算・加工を適用する
reduce()	SUM関数、AVERAGE関数	全データを1つの値に集約する
find()	VLOOKUP関数、XLOOKUP関数	条件に合う1件を探し出す

つまり、「配列操作ができる」ということは、特別なプログラミングスキルというより、「Excelで日常的にやっていることを、より大量・複雑なデータに対しても自動化できる」という話に近いのです。

5-2. データ集計をClaude Codeに任せるという選択肢

弊社が実際に採用しているのは、Claude CodeというAIエージェントツールに、データの集計・加工作業そのものを任せる方法です。「この売上データから、月別・商品別の集計表を作って」と日本語で指示するだけで、AIが処理を実装し、結果を出力してくれます。

これらはいずれも配列のfilter()やreduce()に相当する処理ですが、依頼する側がコードを書く必要は一切ありません。「何をしたいか」を言語化できれば成果物が手に入る、というのがAIコーディングエージェントの最大の価値です。

06 GENAI CASE STUDY 【独自】GENAI社内でのAIデータ処理 実運用データ Max 20xプラン契約会社が、データ集計にどれだけAIを使っているか

項目	内容
契約プラン	Claude Max 20x（月$200 / 約30,000円）
利用開始	2025年後半〜
データ処理関連の用途	顧客リストの集計・売上データの分析・重複データの検出
削減効果（広告運用領域・肌感）	週10時間 → 週1時間

弊社では、Claude Max 20xプラン（月額約30,000円）を契約し、経営・営業・広告・開発・経理・秘書業務まで社内のあらゆる業務でClaude Codeを活用しています。特に広告運用領域では、日々の配信データ・CPA（顧客獲得単価）データの集計・分析にAIを活用しており、大きな効果を実感している業務の一つです。

業務領域	主な用途	概算削減時間
営業	提案書・見積・顧客別資料の自動生成	週20時間 → 週2時間
広告運用	週次レポート・CPA分析・配信内容調整（配列処理に近いデータ集計）	週10時間 → 週1時間
ブログ記事	SEO記事執筆・リライト・内部リンク最適化	1本8時間 → 1本1時間
経理	請求書チェック・経費仕訳・Freee連携	月40時間 → 月5時間
秘書業務	日報生成・議事録・スケジュール調整	日2時間 → 日15分

広告運用の週次レポート作成は、まさにこの記事で紹介したfilter（対象を絞り込む）→ reduce（集計する）→ map（見やすい形に加工する）という一連の流れをAIに任せている典型例です。以前は手作業で数時間かかっていた集計作業が、指示を出すだけで数分〜十数分に短縮されている実感があります。

こうした集計作業は、一つひとつは小さくても毎週・毎月発生するため、年間で積み上げると無視できない工数になります。「同じ作業を繰り返している」と感じた瞬間が、AI活用を検討する最適なタイミングです。

07 CONCLUSION まとめ ── 配列は「データの並び」を管理する箱 コードを書くか、AIに任せるか。判断基準を整理する

この記事では、JavaScript配列の宣言・初期化から、要素の追加削除（push/pop/shift/unshift/splice）、結合・検索（concat/slice/indexOf/includes/find）、ループ処理（forEach/map/filter/reduce）、そして業務データ処理という現実的なテーマまでを解説しました。最後にポイントを振り返ります。

配列操作の本質は、「大量のデータを、決まったルールに従って整理する」という考え方そのものです。コードを書けるかどうかに関わらず、この考え方さえ理解していれば、AIに的確な指示を出せるようになり、業務データとの向き合い方が大きく変わります。

自分でコードを書くにせよAIに任せるにせよ、まずは日々のExcel・スプレッドシート作業の中から「毎回同じ手順を繰り返している集計作業」を1つ選び出して、AIに任せられないか試してみることをおすすめします。「今月もまたこの集計をやるのか」と感じた作業こそ、最初に任せてみる候補として最適です。

毎週の集計作業を、AI鬼管理が自動化します

顧客データ・売上データの集計から、業務全体の自動化まで。
弊社の実運用ノウハウをベースに、貴社に合わせた導入設計をご提案します。

よくある質問

Q. 配列とオブジェクトの違いは何ですか？

A. 配列は「順番」が意味を持つデータの並び（インデックス番号で管理）、オブジェクトは「名前（キー）」で値を管理するデータ構造です。「1件目、2件目…」のように順序が重要なら配列、「名前」「年齢」のように項目名で値を紐づけたいならオブジェクトを使います。

Q. forEachとmapはどちらも全要素を処理しますが、何が違いますか？

A. 最大の違いは返り値です。forEachは処理をするだけで新しい配列を作りません（返り値はundefined）。mapは各要素を加工した「新しい配列」を返します。加工結果を後で使いたいならmap、単に表示・記録するだけならforEachを使います。

Q. 配列の要素数はどうやって調べますか？

A. 配列名に「.length」をつけることで要素数を取得できます。例えば「fruits.length」と書けば、fruits配列に入っている要素の数が数値で返ってきます。

Q. コードを書いたことがなくても、Claude Codeにデータ処理を任せられますか？

A. 任せられます。重要なのは構文の知識ではなく「何を実現したいか」を言語化することです。「この売上データを月別に集計して」のような日本語の指示だけで、Claude CodeのようなAIエージェントが処理を実装してくれます。

Q. 大量データ（数万件以上）でも配列操作は問題なく動きますか？

A. 一般的なブラウザ・Node.js環境であれば数万件程度は問題なく処理できます。ただし数十万件を超えるような大規模データでは、処理方法やデータベースの活用を検討した方が良いケースもあります。

Q. reduce()は難しく感じます。もっと簡単な代替方法はありますか？

A. 単純な合計を求めるだけであれば、for文で変数に加算していく素朴な書き方でも問題ありません。reduceは「合計以外にもさまざまな集約処理を1つの形で表現できる」という汎用性がメリットなので、慣れるまでは無理に使う必要はありません。

Q. 配列の中に配列（多次元配列）を入れることはできますか？

A. できます。例えば「[[1,2],[3,4]]」のように配列の中に配列を入れる「多次元配列」もJavaScriptでは扱えます。表形式のデータ（行と列）を表現したい場合によく使われますが、実務では前述のオブジェクトの配列（各行を{name, age}のような形にする）の方が扱いやすいケースが多いです。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。