JavaScriptで配列に要素を追加する方法を紹介します。

JavaScriptで配列に新しい要素を追加する方法は、「破壊的メソッド（元の配列を変更するメソッド）」と「非破壊的メソッド（元の配列を変更しないメソッド）」に分類できます。この記事では、それぞれの特徴や用途を解説します。

破壊的メソッド：元の配列を直接変更する

破壊的メソッドは、元の配列に直接変更を加えるため、新しい配列を作らずに済みます。配列のサイズや要素をそのまま変更するので、配列の元の状態を保持する必要がある場合には向いていません。

push()メソッド：配列の末尾に要素を追加

用途：配列の最後に要素を追加したいとき。
例：リストの更新が頻繁に必要で、元の配列を変更しても良い場合に適しています。

const fruits = ["Apple", "Banana"];
fruits.push("Orange"); // fruits は ["Apple", "Banana", "Orange"]

unshift()メソッド：配列の先頭に要素を追加

用途：配列の先頭に要素を追加したいとき。
例：データが新しいものほど重要なリストで、先頭に新しい要素を追加する場合に便利です。

const fruits = ["Apple", "Banana"];
fruits.unshift("Strawberry"); // fruits は ["Strawberry", "Apple", "Banana"]

splice()メソッド：配列の任意の位置に要素を追加

splice() メソッドは配列の特定の位置に要素を追加、削除、または置き換えできるメソッドです。

用途：配列の途中に要素を追加、配列の途中から要素を削除したいとき。
例：リストの特定の位置に新しい要素を追加、または要素を削除する必要がある場合に使用します。

const fruits = ["Apple", "Banana"];
fruits.splice(1, 0, "Orange"); // fruits は ["Apple", "Orange", "Banana"]

• 1: 配列のどの位置から操作を始めるかを指定するインデックス番号。
  上記のコードだと、1なので、"Apple"の次、"Banana"の前に要素を挿入します。
• 0: 削除する要素の数を指定します。削除したくない場合は 0 を指定します。
  上記のコードだと、0なので削除は行われません。
• "Orange": 新しく配列に追加する要素。追加する要素がない場合は省略可能です。
  上記のコードの場合、指定した位置 1 に "Orange" が挿入されます。

上記のコードは結果として、fruits 配列は ["Apple", "Orange", "Banana"] になります。

splice()メソッドは、他にも要素を置き換えたり、複数の要素を挿入、複数の要素を削除するなどの用途に使用することができます。

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

非破壊的メソッドは元の配列を保持し、新しい配列を作成して要素を追加します。元の配列を変更せずに安全にデータを扱えるので、データの変更を避けたいときに便利です。

concat()メソッド：配列の末尾に要素を追加した新しい配列を作成

用途：元の配列に変更を加えず、末尾に要素を追加した配列が必要なとき。
例：元の配列を他のコードで再利用する必要がある場合や、配列を変更せずに安全に処理したいときに便利です。

const fruits = ["Apple", "Banana"];
const newFruits = fruits.concat("Orange"); // newFruits は ["Apple", "Banana", "Orange"]

spread 構文：新しい配列を生成して末尾または先頭に要素を追加

用途：元の配列を変更せずに、柔軟に要素を追加したいとき。
例：複数の配列や要素を合成したり、新しい配列として扱いたいときに役立ちます。

const fruits = ["Apple", "Banana"];
const newFruits = [...fruits, "Orange"]; // newFruits は ["Apple", "Banana", "Orange"]

非破壊的メソッドで、配列の途中に要素を挿入したい時は、スプレッド構文（...）を使うと、簡潔に新しい配列を作成することができます。配列を分割し、挿入したい要素を追加する方法を紹介します。

const fruits = ["Apple", "Banana", "Cherry"];
const index = 1; // 挿入位置
const newFruits = [...fruits.slice(0, index), "Orange", ...fruits.slice(index)];

console.log(newFruits); // ["Apple", "Orange", "Banana", "Cherry"]

• fruits.slice(0, index) で挿入位置の前の部分をスプレッド構文で展開
• "Orange" を挿入
• fruits.slice(index) で挿入位置以降の部分をスプレッド構文で展開

slice() メソッドは、配列の一部を抽出して新しい配列を返す非破壊的なメソッドです。元の配列は変更されません。

array.slice(start, end)

• start: 配列の抽出を開始するインデックス（このインデックスの要素は含まれる）。省略すると、デフォルトで 0 から始まります。
• end: 配列の抽出を終了するインデックス（このインデックスの要素は含まれない）。省略すると、配列の末尾まで抽出されます。

終わりに

以上、JavaScriptで配列に要素を追加する方法を破壊的メソッドと非破壊的メソッドに分けて、ご紹介しました。用途に合わせて、使い分けてみてください。