基礎

JavaScriptの配列入門｜Arrayの作成・追加・削除・ループの基本操作

JavaScriptの配列（Array）は、複数の値を順序付きで格納できるデータ構造です。数値、文字列、オブジェクトなど、異なる型のデータを1つの配列にまとめることができます。Webアプリケーションではユーザーリスト、商品データ、APIのレスポンスなど、あらゆる場面で配列が使われます。

この記事では、配列の作成方法から要素の追加・削除、ループ処理、便利なメソッドまで、配列を使いこなすための基本を網羅的に解説します。

基本的な使い方

配列はブラケット [] で作成します。要素にはインデックス（0から始まる番号）でアクセスします。

JavaScript
// 配列の作成
const fruits = ['りんご', 'バナナ', 'オレンジ'];
console.log(fruits);
console.log(fruits[0]);  // 最初の要素
console.log(fruits[2]);  // 3番目の要素
console.log(fruits.length);  // 要素数

// 異なる型を混在できる
const mixed = [1, 'hello', true, null, { name: 'Taro' }];
console.log(mixed);
実行結果
['りんご', 'バナナ', 'オレンジ']
りんご
オレンジ
3
[1, 'hello', true, null, { name: 'Taro' }]

配列のインデックスは0から始まるため、最初の要素は [0]、最後の要素は [length - 1] でアクセスします。length プロパティで配列の要素数を取得でき、ループ処理の終了条件としてよく使われます。

要素の追加と削除

配列には要素を動的に追加・削除するメソッドが用意されています。末尾と先頭で使うメソッドが異なります。

JavaScript
const colors = ['赤', '青', '緑'];

// 末尾に追加
colors.push('黄');
console.log('push後:', colors);

// 末尾から削除
const removed = colors.pop();
console.log('pop後:', colors);
console.log('削除された要素:', removed);

// 先頭に追加
colors.unshift('白');
console.log('unshift後:', colors);

// 先頭から削除
const first = colors.shift();
console.log('shift後:', colors);
console.log('削除された要素:', first);

// 指定位置に追加・削除（splice）
const animals = ['犬', '猫', '鳥', '魚'];
animals.splice(1, 1);  // インデックス1から1個削除
console.log('splice削除後:', animals);

animals.splice(1, 0, 'うさぎ', 'ハムスター');  // インデックス1に2個追加
console.log('splice追加後:', animals);
実行結果
push後: ['赤', '青', '緑', '黄']
pop後: ['赤', '青', '緑']
削除された要素: 黄
unshift後: ['白', '赤', '青', '緑']
shift後: ['赤', '青', '緑']
削除された要素: 白
splice削除後: ['犬', '鳥', '魚']
splice追加後: ['犬', 'うさぎ', 'ハムスター', '鳥', '魚']

push / pop は末尾の操作、unshift / shift は先頭の操作です。splice は任意の位置で追加・削除ができる万能メソッドで、第1引数が開始インデックス、第2引数が削除数、第3引数以降が追加する要素です。

配列のループ処理

JavaScript
const scores = [85, 92, 78, 95, 88];

// forEach - 各要素に対して処理を実行
scores.forEach(function(score, index) {
  console.log(index + '番目: ' + score + '点');
});

// map - 各要素を変換して新しい配列を作成
const doubled = scores.map(score => score * 2);
console.log('2倍:', doubled);

// filter - 条件に合う要素だけ抽出
const high = scores.filter(score => score >= 90);
console.log('90点以上:', high);

// find - 条件に合う最初の要素を返す
const first90 = scores.find(score => score >= 90);
console.log('最初の90点以上:', first90);

// reduce - 配列を1つの値にまとめる
const total = scores.reduce((sum, score) => sum + score, 0);
console.log('合計:', total);
console.log('平均:', total / scores.length);
実行結果
0番目: 85点
1番目: 92点
2番目: 78点
3番目: 95点
4番目: 88点
2倍: [170, 184, 156, 190, 176]
90点以上: [92, 95]
最初の90点以上: 92
合計: 438
平均: 87.6

forEach は単純なループ処理、map は変換、filter は絞り込み、reduce は集計と、それぞれ役割が明確です。for 文で書けることはこれらのメソッドでも実現でき、より宣言的で読みやすいコードになります。

配列かどうかの判定

typeof で配列を判定すると "object" が返るため、配列の判定には Array.isArray() を使います。例: Array.isArray([1, 2, 3]) は true、Array.isArray('hello') は false です。

元の配列を変更するメソッドに注意

push、pop、splice、sort、reverse は元の配列を直接変更します。一方、map、filter、concat、slice は新しい配列を返し、元の配列はそのままです。意図しない変更を避けるため、どちらのタイプか意識して使い分けましょう。

まとめ

  • 配列は [] で作成し、インデックスは0から始まる
  • push / pop で末尾、unshift / shift で先頭の追加・削除ができる
  • splice で任意の位置の追加・削除ができる
  • forEach、map、filter、reduce で宣言的なループ処理ができる
  • 元の配列を変更するメソッドと新しい配列を返すメソッドを区別して使う