Day7 後半のゴール
Day7 後半では、前半で学んだ「配列の基本・push」に加えて、
より実践的な splice（途中の追加・削除） をしっかり理解します。
配列は JavaScript の中でも使用頻度が非常に高いデータ構造なので、
splice を使いこなせると一気に“扱えるデータ量”が増えます。
splice の本質を理解する
splice は「途中を自由にいじる」ためのメソッド
push は「最後に追加」でしたが、
splice は 配列の途中に対して、追加・削除・置き換え を行えます。
書き方は次の形です。
配列.splice(開始位置, 削除する数, 追加する値…);
この3つのパラメータがとても重要です。
splice を使った削除
例：2番目の要素を削除する
const fruits = ["apple", "banana", "orange"];
fruits.splice(1, 1);
console.log(fruits); // ["apple", "orange"]
ここでの意味は、
開始位置 1 → “banana” の場所
削除する数 1 → 1つだけ削除
ということです。
深掘り：splice は「元の配列を直接書き換える」
splice は 破壊的メソッド と呼ばれ、
元の配列そのものを変更します。
const arr = [1, 2, 3];
arr.splice(1, 1);
console.log(arr); // [1, 3]
元の配列が変わるため、
「元のデータを残しておきたい」場合は注意が必要です。
splice を使った追加
例：2番目の位置に「grape」を追加する
const fruits = ["apple", "banana", "orange"];
fruits.splice(1, 0, "grape");
console.log(fruits); // ["apple", "grape", "banana", "orange"]
削除数を 0 にすると「削除せずに追加」になります。
開始位置 1 → “banana” の前
削除数 0 → 何も消さない
追加する値 → “grape”
という動きです。
splice を使った置き換え
例：2番目の要素を「melon」に置き換える
const fruits = ["apple", "banana", "orange"];
fruits.splice(1, 1, "melon");
console.log(fruits); // ["apple", "melon", "orange"]
削除数 1 → “banana” を削除
追加 → “melon” を挿入
つまり「置き換え」になります。
splice の動きを視覚的に理解する
Before
["apple", "banana", "orange"]
splice(1, 1, “melon”)
["apple", "melon", "orange"]
splice(1, 0, “grape”)
["apple", "grape", "banana", "orange"]
splice は「配列の途中を自由に編集するハサミ」のようなものです。
splice と for の組み合わせ
条件に合う要素を削除する
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i = i + 1) {
if (numbers[i] % 2 === 0) {
numbers.splice(i, 1);
i = i - 1; // 削除後のズレを補正
}
}
console.log(numbers); // [1, 3, 5]
splice を使うと配列が縮むため、
インデックスがズレる点が重要です。
削除したら i を 1 減らすことで、
次の要素を正しくチェックできます。
splice とセキュリティの関係
配列の操作ミスは「データ欠損」につながる
splice は強力ですが、
間違えると「必要なデータを消してしまう」危険があります。
たとえば、ユーザー一覧を管理している配列で
誤ったインデックスを削除すると…
users.splice(0, 1); // 本来削除してはいけないユーザーを削除
これは重大なバグやセキュリティ事故につながります。
だからこそ、
削除前にインデックスを確認する
length を使って範囲外アクセスを防ぐ
splice の結果を必ず確認する
といった習慣が重要です。
実践：Day7 後半のサンプルコード
配列の途中に追加・削除・置き換えをまとめて体験する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day7 配列 後半</title>
</head>
<body>
<h1>Day7: splice の実践</h1>
<script>
const fruits = ["apple", "banana", "orange"];
console.log("初期:", fruits);
fruits.splice(1, 1);
console.log("削除後:", fruits);
fruits.splice(1, 0, "grape");
console.log("追加後:", fruits);
fruits.splice(2, 1, "melon");
console.log("置き換え後:", fruits);
</script>
</body>
</html>
コンソールで配列がどう変化するかを
一つずつ確認してみてください。
Day7 後半のまとめ
配列の途中を編集する splice は、
push よりも強力で柔軟なメソッドです。
削除
追加
置き換え
すべて splice で実現できます。
ただし、元の配列を直接書き換えるため、
インデックスのズレや削除ミスには注意が必要です。