JavaScriptの配列、宣言、追加、削除、結合、要素数、ループなども解説｜JavaScript入門講座（６）

目　次

JavaScriptの配列、宣言、追加、削除、結合、要素数、ループなども解説｜JavaScript入門講座（６）のPodcast
はじめに：現代のJavaScriptにおける配列とは
配列の基本概念
1. 配列の主な特徴
配列の宣言と初期化
要素数（length）の取得
要素の追加と削除：破壊的な操作
最新の標準：非破壊的な操作（ES2023以降）
配列の検索とアクセス
7. 配列のループ処理
配列の結合とグループ化
初心者がハマる「参照」の罠
2026年の最新トレンド：日付と配列
まとめ
参考資料

JavaScriptの配列、宣言、追加、削除、結合、要素数、ループなども解説｜JavaScript入門講座（６）のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに：現代のJavaScriptにおける配列とは

プログラミングの世界で「配列（Array）」は、もっとも基本的でありながら、もっとも重要なデータの管理方法です。2026年現在のモダンなWeb開発において、配列は単なる「データの入れ物」ではなく、データを効率的かつ安全に処理するための高度な機能が備わったツールへと進化しています。以前のJavaScriptに比べて、現在は「元のデータを壊さずに新しいデータを作る」という安全な手法が主流となっています。本記事では、初心者の方がつまずきやすいポイントを丁寧にフォローしながら、最新の標準仕様に基づいた配列の使い方を詳しく解説していきます。

配列の基本概念

配列とは、複数の値をひとまとめにして、順番に並べて管理するための仕組みです。一つの変数の中に、1番目、2番目……といった形でデータを格納できます。

配列の主な特徴

動的なサイズ変更: あらかじめデータの個数を決めておく必要はなく、後から自由に追加したり削除したりできます。

多様なデータ型: 数値、文字列、オブジェクト、さらには別の配列まで、異なる種類のデータを混ぜて入れることが可能です。

ゼロベースの添字: 配列内のデータの位置（インデックス）は「0」から数え始めます。1番目の要素は ``、2番目はとなる点に注意してください。

配列の宣言と初期化

配列を使い始めるには、まず「宣言」を行います。現在もっとも一般的で推奨される方法は、ブラケット `` を使用する「配列リテラル」という書き方です。

javascript

// 配列の宣言（初期化）
const fruits = ["りんご", "バナナ", "オレンジ"];

// 中身が空の配列を作る
const emptyList = [];

また、2024年以降、非同期にデータを取得して配列にする Array.fromAsync() という便利なメソッドも登場しており、WebAPIからデータをまとめて取得する際などに活用されています。

要素数（length）の取得

配列の中にいくつデータが入っているかを確認するには、length プロパティを使います。

javascript

const colors = ["赤", "青", "黄"];
console.log(colors.length); // 出力: 3

この length プロパティは、単に数を数えるだけでなく、値を書き換えることで配列を切り詰めたり空にしたりすることも可能です。しかし、意図しないデータの消失を招く可能性があるため、初心者のうちは読み取り専用として扱うのが安全です。

要素の追加と削除：破壊的な操作

「元の配列を直接書き換える」操作を「破壊的な操作」と呼びます。直感的で分かりやすいですが、元のデータを残しておきたい場合には注意が必要です。

末尾の操作

push(): 配列の最後に新しいデータを追加します。

pop(): 配列の最後のデータを取り除き、その値を受け取ります。

先頭の操作

unshift(): 配列の最初にデータを追加します。

shift(): 配列の最初のデータを取り除きます。

特定位置の操作

splice(): 指定した位置からデータを削除したり、別のデータを挿入したりできる非常に多機能なメソッドです。

最新の標準：非破壊的な操作（ES2023以降）

近年の開発では、元のデータを変更せずに「一部が変更された新しいコピー」を作る手法（不変性の維持）が非常に重視されています。ES2023で追加された以下のメソッドは、初心者こそ積極的に活用すべき「安全な」機能です。

toReversed(): 元の配列はそのままで、逆順になった新しい配列を返します。

toSorted(): 元の配列を並べ替えず、整列済みの新しい配列を返します。

toSpliced(): 特定部分を入れ替えた新しい配列を返します。

with(): 特定のインデックスの値だけを書き換えた新しい配列を作ります。

javascript

const original = [5, 8, 9];
// 1番目（インデックス1）の20を99に変えた新しい配列を作る
const updated = original.with(1, 99); 

console.log(original); // [5, 8, 9] （元のデータは守られる）
console.log(updated);  // [5, 99, 9] （新しいデータができる）

配列の検索とアクセス

配列内の特定の要素を探すためのメソッドも充実しています。

at(): 指定した番号の要素を取得します。-1 を指定すると「最後から1番目」を簡単に取得できるため便利です。

includes(): 指定した値が配列に含まれているかを true か false で判定します。

find(): 条件に合う最初のデータそのものを探します。

findLast(): 2023年に追加されたメソッドで、後ろから検索して最初に見つかったものを返します。

7. 配列のループ処理

配列の全ての要素に対して順番に処理を行うことを「ループ（反復）」と呼びます。現在主流の書き方は以下の3つです。

for...of ループ: もっともシンプルで読みやすい書き方です。特別な理由がない限り、この方法が推奨されます。

forEach() メソッド: 各要素に対して関数を実行します。簡潔に書けますが、途中でループを止めることができないという特徴があります。

map() と filter(): これらは単なるループではなく、データの加工や抽出に使われます。

map(): 全てのデータを一律に加工して、新しい配列を作ります。

filter(): 条件に合うデータだけを抜き出して、新しい配列を作ります。

配列の結合とグループ化

複数の配列を一つにまとめるには、concat() メソッドや、ドットを3つ書く「スプレッド構文（...）」を使います。また、2024年に導入された Object.groupBy() を使うと、配列内のデータを特定の属性ごとに一瞬でグループ分けできるようになりました。

javascript

const list = [
  { name: "田中", type: "管理職" },
  { name: "佐藤", type: "一般" },
  { name: "鈴木", type: "管理職" }
];

// 役職ごとにグループ化
const grouped = Object.groupBy(list, member => member.type);

初心者がハマる「参照」の罠

JavaScriptの配列を扱う上で最大の難所が「参照」の理解です。配列を変数に代入すると、データそのものではなく「データが置いてある場所の情報」がコピーされます。そのため、単純に let b = a; とコピーしたつもりで b を書き換えると、元の a まで変わってしまいます。完全に独立したコピーを作りたい場合は、2022年以降の標準である structuredClone() を使うのが正解です。

2026年の最新トレンド：日付と配列

配列に日付データを入れる際、これまでは Date オブジェクトが使われてきましたが、これは非常に扱いが難しいものでした。2026年現在、多くの環境で新しい標準である「Temporal API」が利用可能になっています。これにより、タイムゾーンの計算ミスや月が0から始まる混乱などが解消され、配列内の時系列データの扱いが劇的に楽になっています。