JavaScript 配列編集の基本 splice を初心者向けに解説
配列の中身を「削除・追加・置き換え」できるのが splice。配列編集の“万能ハサミ”だと思って使ってみましょう。
基本の考え方と書き方
- 役割: 指定した場所の要素を削除し、必要なら新しい要素を挿入する
- 配列が変わる: 元の配列そのものが書き換わる（破壊的）
- 戻り値: 削除された要素を集めた新しい配列
array.splice(開始位置, 削除する数, 追加する要素1, 追加する要素2, ...);
- 開始位置: 配列のどこから操作を始めるか（0が先頭）。負の数は末尾から数える（-1は最後）。
- 削除する数: その場所からいくつ消すか。0なら削除せず挿入だけ。
- 追加する要素: 省略可。指定すると、その場所に順番に挿入される。
インデックスの超入門
- インデックスとは: 要素の住所。先頭が0、次が1…と増える
- 例: [‘A’,’B’,’C’,’D’] のインデックスは 0:A, 1:B, 2:C, 3:D
- 負のインデックス: -1:D, -2:C のように“後ろから数える”
できること1：要素を削除する
let arr = ['A', 'B', 'C', 'D', 'E'];
let removed = arr.splice(1, 2); // 1番目から2つ削除（B, C）
console.log(arr); // ["A", "D", "E"]
console.log(removed); // ["B", "C"]
- ポイント: 削除数を指定すると、その分だけ配列が短くなる
- ミニ練習: 先頭の要素だけ削除してみよう
let nums = [10, 20, 30];
nums.splice(0, 1);
// 結果: [20, 30]
できること2：要素を追加する（削除数0）
let arr = ['A', 'B', 'C'];
arr.splice(1, 0, 'X', 'Y'); // 1番目にX, Yを挿入
console.log(arr); // ["A", "X", "Y", "B", "C"]
- ポイント: 削除数を0にすると、押し広げて新しい要素が入る
- 末尾に追加: 末尾のインデックスは配列.length
let arr = ['A', 'B'];
arr.splice(arr.length, 0, 'C'); // 末尾に挿入
// 結果: ["A", "B", "C"]
できること3：要素を置き換える（削除＋挿入）
let arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(2, 1, 'Z'); // 2番目(C)を1つ削除してZを入れる
console.log(arr); // ["A", "B", "Z", "D", "E"]
- 複数置き換え: 削除数と挿入数が違ってもOK（配列の長さが変わる）
let arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(1, 2, 'X', 'Y', 'Z'); // B,Cを削除→X,Y,Zを挿入
// 結果: ["A", "X", "Y", "Z", "D", "E"]
便利ワザ：負の開始位置
let arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(-2, 1, 'X'); // 後ろから2番目(D)をXに置き換え
console.log(arr); // ["A", "B", "C", "X", "E"]
- 覚え方: -1は最後、-2は「最後のひとつ前」
よくある落とし穴と対策
- 配列が書き換わる: 元の配列を残したいなら、まずコピーする
let original = ['A', 'B', 'C'];
let arr = [...original]; // スプレッドで浅いコピー
arr.splice(1, 1); // originalはそのまま
- sliceとの違い: sliceは“切り出し”で元の配列を変えない。spliceは“編集して切り離す”
let a = ['A','B','C'];
let b = a.slice(1, 3); // ["B","C"]、aは変化なし
let removed = a.splice(1, 2); // aは["A"]に変化、removedは["B","C"]
総合ミニ課題
- 課題1: [‘red’,’green’,’blue’] の ‘green’ を ‘yellow’ に置き換える
let colors = ['red', 'green', 'blue'];
colors.splice(1, 1, 'yellow');
// 結果: ["red", "yellow", "blue"]
- 課題2: [1,2,3,4] の3の前に 9, 9 を挿入する
let nums = [1, 2, 3, 4];
nums.splice(2, 0, 9, 9); // 2番目(値3の位置)に挿入
// 結果: [1, 2, 9, 9, 3, 4]
- 課題3: [‘a’,’b’,’c’,’d’] の末尾から2つ削除する
let letters = ['a','b','c','d'];
letters.splice(-2, 2);
// 結果: ['a','b']
まとめの指針
- 削除だけ: 開始位置＋削除数、追加要素なし
- 追加だけ: 開始位置＋削除数0＋挿入要素
- 置き換え: 開始位置＋削除数n＋挿入要素m（nとmは自由）