この記事では、配列の要素追加、削除、そして配置変更を行うためのメソッドについて詳しく解説します。
具体的には、push,pop,unshift,shift,splice,fill,copyWithinの7つのメソッドについて、サンプルコードとともにその動作や使い方を説明しています。
解説：
push() は、配列の末尾に1つ以上の要素を追加するメソッドです。
このメソッドは新たな要素を追加後、配列の新しい長さを返します。
主に動的に要素を挿入したい場合に用います。元の配列自体が変更される点に注意してください。
// push() サンプル
const arr = [1, 2, 3];
const newLength = arr.push(4, 5); // 配列末尾に4と5を追加
console.log(arr); // 結果: [1, 2, 3, 4, 5]
console.log(newLength); // 結果: 5 → 新たな配列の長さ
解説：
pop() は、配列の末尾の要素を取り除き、その削除された要素を返すメソッドです。
このメソッドを使うと、データの「最後の値」を取り出したいときに便利です。
なお、配列が空の場合は undefined が返されます。
// pop() サンプル
const arr = [10, 20, 30];
const removedItem = arr.pop(); // 配列末尾の30を削除
console.log(arr); // 結果: [10, 20]
console.log(removedItem); // 結果: 30
解説：
unshift() は、配列の先頭に1つ以上の要素を追加するメソッドです。
push() が末尾に追加するのに対して、unshift() は前方に要素を挿入し、新しい配列長を返します。
追加された順序は、引数の順に先頭側に並びます。
// unshift() サンプル
const arr = ['b', 'c'];
const newLength = arr.unshift('a'); // 先頭に 'a' を追加
console.log(arr); // 結果: ['a', 'b', 'c']
console.log(newLength); // 結果: 3
解説：
shift() は、配列の先頭の要素を削除し、その削除された要素を返すメソッドです。
unshift() の反対の処理であり、キュー（FIFO）として使いたい時などに利用できます。
配列が空の場合、undefinedが返されます。
// shift() サンプル
const arr = ['x', 'y', 'z'];
const removedItem = arr.shift(); // 先頭の 'x' を削除
console.log(arr); // 結果: ['y', 'z']
console.log(removedItem); // 結果: 'x'
解説：
splice() は、配列の任意の位置に対して、要素を削除、置換、または追加するためのメソッドです。
使い方は splice(開始位置, 削除する個数, …追加する要素) となり、
削除された要素は配列として返されます。元の配列が直接変更される点に注意してください。
※ 削除する個数を0にすると、指定位置に要素を追加するのみとなります。
// splice() サンプル
const arr = [1, 2, 3, 4, 5];
// インデックス2から2つの要素（3,4）を削除し、'a' と 'b' を代わりに挿入
const removedItems = arr.splice(2, 2, 'a', 'b');
console.log(arr); // 結果: [1, 2, 'a', 'b', 5]
console.log(removedItems); // 結果: [3, 4]
解説：
fill() は、配列内の指定範囲の全要素を、指定した値で上書きするメソッドです。
書式は fill(値, 開始インデックス?, 終了インデックス?) となり、終了インデックスは含まれません。
主に初期値の設定や一括更新が必要な場合に役立ちます。
// fill() サンプル
const arr = [0, 0, 0, 0];
// インデックス1からインデックス3（3は含まない）までを7で埋める
arr.fill(7, 1, 3);
console.log(arr); // 結果: [0, 7, 7, 0]
解説：
copyWithin() は、配列内のある範囲の要素を、別の位置に上書きコピーするメソッドです。
書式は copyWithin(ターゲット開始インデックス, コピー元開始インデックス, コピー元終了インデックス?) となります。
終了インデックスは省略可能で、指定しなければ配列の末尾までがコピー対象となります。元データは上書きされるため、元の要素は失われます。
// copyWithin() サンプル
const arr = [1, 2, 3, 4, 5];
// インデックス0の位置に、インデックス3以降の要素をコピーする
arr.copyWithin(0, 3);
console.log(arr); // 結果: [4, 5, 3, 4, 5]
解説：
delete は、配列内の特定のインデックスの要素を削除するための JavaScript の演算子です。
ただし、配列の長さは変わらず、削除した位置は「空（empty）」のまま残る点に注意が必要です。
// delete サンプル
const arr = [1, 2, 3, 4, 5];
delete arr[2];
console.log(arr); // 結果: [1, 2, <1 empty item>, 4, 5]
console.log(arr.length); // 結果: 5（長さはそのまま）// splice を使った例
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // インデックス2の要素（3）を1つ削除
console.log(arr); // 結果: [1, 2, 4, 5]