JavaScriptで配列に要素を追加・削除する方法｜初心者向け完全ガイド

はじめに

JavaScriptにおける配列操作は、プログラミングの基本でありながら、初心者にとっては混乱しやすいポイントです。

本記事では、特に 「配列に要素を追加する方法」 「配列から要素を削除する方法」 に焦点を当て、メソッドの紹介や実装で役立つテクニックを解説します。
実際のコード例を交えて、初心者でも理解しやすい内容になっています。

配列追加の基本

配列に値を追加するメソッドは複数あります。

それぞれ値を追加する位置や特徴が異なるため、整理して理解しましょう。

pushメソッド

配列の末尾に要素を追加する場合はpushメソッドがよく使用されます。

複数の要素をまとめて追加することもできます。

let fruits = ["リンゴ", "バナナ"];
fruits.push("オレンジ");
console.log(fruits); // ["リンゴ", "バナナ", "オレンジ"]

pushメソッドは破壊的メソッドになるため、元の配列を直接変更する点に注意です。

配列の順序を維持しながら追加したい場合に有効です。

破壊的メソッドと非破壊的メソッド

破壊的メソッドは、元の配列や文字列を直接変更する処理です。

例えば push( ) は要素を削除すると元の配列自体が編集されます。

一方、非破壊的メソッドは元のデータを変更せず、新しい配列や文字列を返す処理です。
slice( ) や concat( ) が代表例です。

unshiftメソッド

配列の先頭に要素を追加したい場合はunshiftメソッドを使用します。

let fruits = ["リンゴ", "バナナ"];
fruits.unshift("キウイ");
console.log(fruits); // ["キウイ", "リンゴ", "バナナ"]

unshiftメソッドも元の配列を直接変更する破壊的メソッドです。
順序を意識した操作に適しています。

concatで配列を結合して追加する

既存の配列を別の配列と結合する場合はconcatメソッドを使います。

非破壊的メソッドのため、結合された配列は、新しい配列として返されます。

let fruits = ["リンゴ", "バナナ"];
let moreFruits = fruits.concat(["オレンジ", "キウイ"]);
console.log(moreFruits); // ["リンゴ", "バナナ", "オレンジ", "キウイ"]

concatを使うことで、元の配列を変更せずに追加操作を行うことができます。

配列削除の基本

配列から値を削除するメソッドも複数あります。

削除のメソッドも、値を削除する位置等が異なるため違いをしっかり理解しましょう。

popメソッド

popは配列の最後の要素を削除し、削除した要素を返します。

let fruits = ["リンゴ", "バナナ"];
let removed = fruits.pop();
console.log(fruits); // ["リンゴ"]
console.log(removed); // "バナナ"

popメソッドは元の配列を直接変更する破壊的メソッドです。

削除した要素を取得できるので、後続処理に利用することも可能です。

shiftメソッド

shiftは配列の先頭の要素を削除し、削除した要素を返します。

let fruits = ["リンゴ", "バナナ"];
let removed = fruits.shift();
console.log(fruits); // ["バナナ"]
console.log(removed); // "リンゴ"

shiftメソッドも元の配列を直接変更する破壊的メソッドです。
削除順序に注意して使用しましょう。

spliceメソッド

spliceを使うと、任意の位置から任意の数の要素を削除することが可能です。

let fruits = ["リンゴ", "バナナ", "オレンジ"];
fruits.splice(1,1); // インデックス1から1個削除
console.log(fruits); // ["リンゴ", "オレンジ"]

1つ目の引数に削除したい要素の順番を書き、2つ目の引数に何個削除したいのかを記述します。

spliceメソッドも元の配列を直接変更する破壊的メソッドです。

追加や置換も同時に可能な柔軟なメソッドです。

配列追加の応用テクニック

条件に応じて要素を追加する方法

要素を追加する前に条件をチェックすることで、重複や不正な追加を防ぐことができます。

let fruits = ["リンゴ"];
let newFruit = "バナナ";

// 配列にまだ含まれていない場合だけ追加する
if (!fruits.includes(newFruit)) {
  fruits.push(newFruit);
}

console.log(fruits); // ["リンゴ", "バナナ"]

条件付き追加により、配列の整合性を保ちながら安全に操作できます。

ループを使った複数要素の追加

ループ処理（繰り返し処理）で複数要素を順番に追加できます。

let fruits = ["リンゴ"];
let newFruits = ["バナナ", "オレンジ"];

// 配列 newFruits の各要素を順番に取り出して追加する
newFruits.forEach((fruit) => {
  fruits.push(fruit);
})

console.log(fruits); // ["リンゴ", "バナナ", "オレンジ"]

ループ処理により、追加する要素が多くても効率的に操作できます。

よくある失敗パターンと回避策

参照型配列の注意点

参照型（参照型データ）とは、配列の中身そのものではなく、配列が置かれている場所（住所）の情報だけを持っている型のことです。

つまり、コピーせずに別の変数に代入すると、両方の変数が同じ配列の場所を指している状態になります。そのため、片方を変更するともう片方にも影響が出ます。

これを防ぐためには、スプレッド構文を使うことができます。

スプレッド構文とは

スプレッド構文（...） は、配列やオブジェクトの要素を展開してコピー・結合・分解するための記法です。

配列をコピーする場合では、元の配列を壊さず新しい配列を作れるため、安全に操作できます。

let original = ["リンゴ"];
let copy = [...original];

copy.push("バナナ");

console.log(original); // ["リンゴ"] ← 元配列はそのまま
console.log(copy); // ["リンゴ","バナナ"]

このようにスプレッド構文などを使ってコピーすることで、意図せず元配列を変更する問題を防げます。

意図しない配列結合の回避

pushの使い方を誤ると、二重配列になりやすいため注意しましょう。

間違った例

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

// pushで配列を追加すると二重配列になる
arr1.push(arr2);
console.log(arr1); 
// 出力: [1, 2, [3, 4]] ← arr2 が1つの要素として追加されている

正しい例

let arr1 = [1,2];
let arr2 = [3,4];
let merged = arr1.concat(arr2); // 正しい

操作方法を理解して安全に結合することが重要です。

配列操作のポイント

JavaScriptの配列操作では、追加や削除、結合などの基本メソッドを正しく理解することが重要です。

操作方法を誤ると意図しない結果やバグの原因になるため、基本を押さえて効率的に使い分けましょう。

配列操作の基本を理解すれば、意図しない変更やエラーを防ぎつつ、より安全なコードを書けるようになります。

まとめ

本記事では、JavaScriptにおける配列操作の基本から応用まで解説しました。

配列への追加や削除は、pushやunshift、popやshift、spliceを使い分けることが重要です。
配列は参照型のため、コピーせずに操作すると元の配列が意図せず変更されることがあるので注意しましょう。

こうしたJavaScriptを基礎から学び、Web制作に挑戦したい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

段階的に学び、コーディングスキルを着実に身につけていきましょう。