JavaScriptの配列の基本操作と使い方 - 作成・参照・更新・削除を完全解説

はじめに

JavaScriptで複数のデータをまとめて扱うとき、最も頻繁に使用するのが「配列（Array）」です。配列を使いこなせるようになると、商品リスト、ユーザー一覧、フォームの入力値など、さまざまなデータを効率的に管理できます。

本記事では、以下の内容を初心者向けにわかりやすく解説します。

配列の作成方法と基本構文
要素の参照（アクセス）方法
要素の追加・更新・削除
よく使う配列メソッド（push、pop、shift、unshift、splice、slice など）
配列の検索と確認
実践的な活用例

配列とは

配列とは、複数の値を順番に並べて1つの変数で管理できるデータ構造です。配列内の各値を「要素」と呼び、それぞれの要素には0から始まる番号（インデックス）が割り振られます。

1
2
3


// 配列のイメージ
// インデックス:   0        1        2
const fruits = ["りんご", "みかん", "ぶどう"];

配列を使うことで、関連するデータをまとめて管理し、ループ処理で一括操作するなど、効率的なプログラムを書けます。

配列の作成方法

JavaScriptで配列を作成する方法は主に2つあります。

配列リテラルで作成する（推奨）

最も一般的で推奨される方法です。角括弧[]の中に要素をカンマ区切りで記述します。

1
2
3
4
5
6
7
8
9


// 空の配列を作成
const emptyArray = [];

// 要素を持つ配列を作成
const numbers = [1, 2, 3, 4, 5];
const colors = ["赤", "青", "緑"];

// 異なる型の要素を混在させることも可能
const mixed = [1, "文字列", true, null, { name: "太郎" }];

Arrayコンストラクタで作成する

new Array()を使って配列を作成することもできますが、挙動がわかりにくいため通常は配列リテラルを使用します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 空の配列を作成
const arr1 = new Array();

// 要素を持つ配列を作成
const arr2 = new Array("a", "b", "c");

// 注意: 引数が1つの数値の場合、その長さの空配列が作成される
const arr3 = new Array(3);
console.log(arr3);        // [empty × 3]
console.log(arr3.length); // 3

new Array(3)は「3つの空スロットを持つ配列」を作成するため、初心者には混乱の原因になります。配列リテラルを使えばこのような問題を避けられます。

Array.of()で作成する

Array.of()メソッドを使うと、引数をすべて要素として持つ配列を作成できます。

1
2
3
4
5
6


const arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]

// 数値1つでも要素として扱われる
const single = Array.of(5);
console.log(single); // [5]

要素の参照（アクセス）

配列の要素にアクセスするには、インデックス（添字）を使用します。インデックスは0から始まる点に注意してください。

インデックスで参照する

1
2
3
4
5
6
7
8
9


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

// 各要素にアクセス
console.log(fruits[0]); // "りんご"
console.log(fruits[1]); // "みかん"
console.log(fruits[2]); // "ぶどう"

// 存在しないインデックスはundefined
console.log(fruits[10]); // undefined

lengthプロパティ

lengthプロパティで配列の要素数を取得できます。

1
2


const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits.length); // 3

最後の要素にアクセスする

配列の最後の要素にアクセスするには、length - 1をインデックスとして使用します。

1
2
3
4


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

// 従来の方法
console.log(fruits[fruits.length - 1]); // "ぶどう"

ES2022以降ではat()メソッドを使って、負のインデックスで末尾からアクセスできます。

1
2
3
4
5


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

// at()メソッドで末尾からアクセス
console.log(fruits.at(-1)); // "ぶどう"
console.log(fruits.at(-2)); // "みかん"

要素の更新

配列の要素を更新するには、インデックスを指定して新しい値を代入します。

1
2
3
4
5
6
7
8
9


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

// 2番目の要素を更新
fruits[1] = "オレンジ";
console.log(fruits); // ["りんご", "オレンジ", "ぶどう"]

// 最後の要素を更新
fruits[fruits.length - 1] = "メロン";
console.log(fruits); // ["りんご", "オレンジ", "メロン"]

constで宣言した配列でも、配列自体の参照は変わらないため、要素の更新は可能です。

1
2
3
4
5


const numbers = [1, 2, 3];
numbers[0] = 100; // OK: 要素の更新は可能
console.log(numbers); // [100, 2, 3]

// numbers = [4, 5, 6]; // エラー: 配列自体の再代入は不可

要素の追加

配列に要素を追加する方法はいくつかあります。用途に応じて使い分けましょう。

push() - 末尾に追加

push()メソッドは、配列の末尾に1つ以上の要素を追加します。戻り値は新しい配列の長さです。

1
2
3
4
5
6
7
8
9


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

// 末尾に1つ追加
fruits.push("ぶどう");
console.log(fruits); // ["りんご", "みかん", "ぶどう"]

// 複数の要素を一度に追加
fruits.push("メロン", "いちご");
console.log(fruits); // ["りんご", "みかん", "ぶどう", "メロン", "いちご"]

unshift() - 先頭に追加

unshift()メソッドは、配列の先頭に1つ以上の要素を追加します。

1
2
3
4
5
6
7
8
9


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

// 先頭に1つ追加
fruits.unshift("りんご");
console.log(fruits); // ["りんご", "みかん", "ぶどう"]

// 複数の要素を一度に追加
fruits.unshift("メロン", "いちご");
console.log(fruits); // ["メロン", "いちご", "りんご", "みかん", "ぶどう"]

splice() - 任意の位置に追加

splice()メソッドを使うと、配列の任意の位置に要素を追加できます。

1
2
3
4
5
6
7
8
9


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

// インデックス1の位置に"みかん"を挿入（削除数は0）
fruits.splice(1, 0, "みかん");
console.log(fruits); // ["りんご", "みかん", "ぶどう"]

// 複数の要素を挿入
fruits.splice(2, 0, "メロン", "いちご");
console.log(fruits); // ["りんご", "みかん", "メロン", "いちご", "ぶどう"]

要素の削除

配列から要素を削除する方法も複数あります。

pop() - 末尾から削除

pop()メソッドは、配列の末尾から要素を1つ削除し、削除した要素を返します。

1
2
3
4
5


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

const removed = fruits.pop();
console.log(removed); // "ぶどう"
console.log(fruits);  // ["りんご", "みかん"]

shift() - 先頭から削除

shift()メソッドは、配列の先頭から要素を1つ削除し、削除した要素を返します。

1
2
3
4
5


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

const removed = fruits.shift();
console.log(removed); // "りんご"
console.log(fruits);  // ["みかん", "ぶどう"]

splice() - 任意の位置から削除

splice()メソッドを使うと、配列の任意の位置から指定した数の要素を削除できます。

1
2
3
4
5
6


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

// インデックス1から2つの要素を削除
const removed = fruits.splice(1, 2);
console.log(removed); // ["みかん", "ぶどう"]
console.log(fruits);  // ["りんご", "メロン"]

delete演算子（非推奨）

delete演算子でも要素を削除できますが、配列に「穴」が空くため推奨されません。

1
2
3
4
5


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

delete fruits[1];
console.log(fruits);        // ["りんご", empty, "ぶどう"]
console.log(fruits.length); // 3（長さは変わらない）

配列の要素を削除する場合はsplice()を使用しましょう。

配列の一部を取り出す - slice()

slice()メソッドは、配列の一部を切り出して新しい配列を作成します。元の配列は変更されません。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const fruits = ["りんご", "みかん", "ぶどう", "メロン", "いちご"];

// インデックス1から3の手前まで取り出す
const sliced = fruits.slice(1, 3);
console.log(sliced); // ["みかん", "ぶどう"]
console.log(fruits); // ["りんご", "みかん", "ぶどう", "メロン", "いちご"]（変更なし）

// インデックス2から末尾まで取り出す
console.log(fruits.slice(2)); // ["ぶどう", "メロン", "いちご"]

// 負のインデックスで末尾から指定
console.log(fruits.slice(-2)); // ["メロン", "いちご"]

splice()とslice()の違い

この2つのメソッドは名前が似ていますが、動作が大きく異なります。

メソッド	元の配列	戻り値	用途
splice()	変更される	削除した要素	要素の追加・削除
slice()	変更されない	切り出した新しい配列	配列の一部をコピー

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const original = [1, 2, 3, 4, 5];

// splice: 元の配列を変更
const spliced = original.splice(1, 2);
console.log(spliced);  // [2, 3]
console.log(original); // [1, 4, 5]（変更された）

const original2 = [1, 2, 3, 4, 5];

// slice: 元の配列は変更しない
const sliced2 = original2.slice(1, 3);
console.log(sliced2);   // [2, 3]
console.log(original2); // [1, 2, 3, 4, 5]（変更なし）

配列の検索

配列内の要素を検索するためのメソッドを紹介します。

indexOf() - インデックスを取得

指定した要素が最初に見つかったインデックスを返します。見つからない場合は-1を返します。

1
2
3
4


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

console.log(fruits.indexOf("みかん")); // 1
console.log(fruits.indexOf("メロン")); // -1

includes() - 存在確認

指定した要素が配列に含まれているかをtrueまたはfalseで返します。

1
2
3
4


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

console.log(fruits.includes("みかん")); // true
console.log(fruits.includes("メロン")); // false

find() - 条件に合う要素を取得

条件を満たす最初の要素を返します。見つからない場合はundefinedを返します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const users = [
  { id: 1, name: "太郎" },
  { id: 2, name: "花子" },
  { id: 3, name: "次郎" }
];

const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: "花子" }

const notFound = users.find(u => u.id === 10);
console.log(notFound); // undefined

findIndex() - 条件に合う要素のインデックスを取得

条件を満たす最初の要素のインデックスを返します。見つからない場合は-1を返します。

1
2
3
4
5
6
7
8


const users = [
  { id: 1, name: "太郎" },
  { id: 2, name: "花子" },
  { id: 3, name: "次郎" }
];

const index = users.findIndex(u => u.name === "花子");
console.log(index); // 1

配列の結合と分割

concat() - 配列を結合

2つ以上の配列を結合して新しい配列を作成します。元の配列は変更されません。

1
2
3
4
5
6
7


const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const combined = arr1.concat(arr2, arr3);
console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(arr1);     // [1, 2]（変更なし）

スプレッド構文を使う方法もあります。

1
2
3
4
5


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

const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

join() - 配列を文字列に変換

配列の要素を指定した区切り文字で連結し、1つの文字列にします。

1
2
3
4
5


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

console.log(fruits.join());      // "りんご,みかん,ぶどう"
console.log(fruits.join(" / ")); // "りんご / みかん / ぶどう"
console.log(fruits.join(""));    // "りんごみかんぶどう"

配列のコピー

配列をコピーする際は、参照のコピーではなく値のコピー（シャローコピー）を行う必要があります。

参照の問題

単純な代入では配列の参照がコピーされるため、一方を変更するともう一方も変わります。

1
2
3
4
5
6


const original = [1, 2, 3];
const reference = original; // 参照のコピー

reference.push(4);
console.log(original);  // [1, 2, 3, 4]（変更されてしまう）
console.log(reference); // [1, 2, 3, 4]

正しいコピー方法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const original = [1, 2, 3];

// 方法1: スプレッド構文（推奨）
const copy1 = [...original];

// 方法2: slice()
const copy2 = original.slice();

// 方法3: Array.from()
const copy3 = Array.from(original);

copy1.push(4);
console.log(original); // [1, 2, 3]（変更されない）
console.log(copy1);    // [1, 2, 3, 4]

よく使うメソッドの一覧

配列操作で頻繁に使用するメソッドを一覧にまとめます。

破壊的メソッド（元の配列を変更する）

メソッド	説明
push()	末尾に要素を追加
pop()	末尾の要素を削除
unshift()	先頭に要素を追加
shift()	先頭の要素を削除
splice()	任意の位置で追加・削除
sort()	要素を並べ替え
reverse()	要素の順序を反転

非破壊的メソッド（元の配列を変更しない）

メソッド	説明
slice()	配列の一部を切り出す
concat()	配列を結合
join()	配列を文字列に変換
indexOf()	要素のインデックスを取得
includes()	要素の存在を確認
find()	条件に合う要素を取得
findIndex()	条件に合う要素のインデックスを取得

実践例: ToDoリストの操作

学んだ内容を活用して、簡単なToDoリストを操作する例を見てみましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


// ToDoリストを初期化
const todos = [
  { id: 1, task: "買い物に行く", done: false },
  { id: 2, task: "レポートを書く", done: true },
  { id: 3, task: "運動をする", done: false }
];

// 新しいタスクを追加
function addTodo(task) {
  const newId = todos.length > 0 
    ? Math.max(...todos.map(t => t.id)) + 1 
    : 1;
  todos.push({ id: newId, task: task, done: false });
}

// タスクを完了にする
function completeTodo(id) {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.done = true;
  }
}

// タスクを削除する
function deleteTodo(id) {
  const index = todos.findIndex(t => t.id === id);
  if (index !== -1) {
    todos.splice(index, 1);
  }
}

// 未完了のタスクを取得
function getIncompleteTodos() {
  return todos.filter(t => !t.done);
}

// 使用例
addTodo("本を読む");
console.log(todos);
// [
//   { id: 1, task: "買い物に行く", done: false },
//   { id: 2, task: "レポートを書く", done: true },
//   { id: 3, task: "運動をする", done: false },
//   { id: 4, task: "本を読む", done: false }
// ]

completeTodo(1);
console.log(todos[0].done); // true

deleteTodo(2);
console.log(todos.length); // 3

console.log(getIncompleteTodos());
// [
//   { id: 3, task: "運動をする", done: false },
//   { id: 4, task: "本を読む", done: false }
// ]

まとめ

本記事では、JavaScriptの配列の基本操作について解説しました。重要なポイントを振り返ります。

配列の作成: 配列リテラル[]を使うのが最も一般的
要素の参照: インデックス（0始まり）で要素にアクセス
要素の追加: push()で末尾、unshift()で先頭、splice()で任意の位置に追加
要素の削除: pop()で末尾、shift()で先頭、splice()で任意の位置から削除
配列の一部を取り出す: slice()を使用（元の配列は変更されない）
検索: indexOf()、includes()、find()、findIndex()を用途に応じて使い分け
結合: concat()やスプレッド構文で配列を結合

配列操作のメソッドには、元の配列を変更する「破壊的メソッド」と変更しない「非破壊的メソッド」があります。どちらに該当するかを意識しながら使用することで、意図しないバグを防げます。

次のステップとして、map()、filter()、reduce()といった高階関数を使った配列操作を学ぶと、より宣言的で読みやすいコードが書けるようになります。

はじめに#

配列とは#

配列の作成方法#

配列リテラルで作成する（推奨）#

Arrayコンストラクタで作成する#

Array.of()で作成する#

要素の参照（アクセス）#

インデックスで参照する#

lengthプロパティ#

最後の要素にアクセスする#

要素の更新#

要素の追加#

push() - 末尾に追加#

unshift() - 先頭に追加#

splice() - 任意の位置に追加#

要素の削除#

pop() - 末尾から削除#

shift() - 先頭から削除#

splice() - 任意の位置から削除#

delete演算子（非推奨）#

配列の一部を取り出す - slice()#

splice()とslice()の違い#

配列の検索#

indexOf() - インデックスを取得#

includes() - 存在確認#

find() - 条件に合う要素を取得#

findIndex() - 条件に合う要素のインデックスを取得#

配列の結合と分割#

concat() - 配列を結合#

join() - 配列を文字列に変換#

配列のコピー#

参照の問題#

正しいコピー方法#

よく使うメソッドの一覧#

破壊的メソッド（元の配列を変更する）#

非破壊的メソッド（元の配列を変更しない）#

実践例: ToDoリストの操作#

まとめ#

参考リンク#