では、プログラミング初心者が「配列の要素削除」を段階的に理解して身につけられるように、
レベル別（初級・中級・上級）に問題＋解答＋解説を紹介します。
初級レベル（基本メソッドの使い方）
問題1：末尾の要素を削除しよう（pop()）
次の配列から、最後の要素を削除してみよう。削除された要素も表示してください。
let fruits = ['apple', 'orange', 'grape'];
✅ 解答
let fruits = ['apple', 'orange', 'grape'];
let removed = fruits.pop();
console.log(removed); // 'grape'
console.log(fruits); // ['apple', 'orange']
💡 解説
pop()は 配列の最後 の要素を削除し、その削除された要素を返します。- 空の配列に使ってもエラーにはならず、
undefinedを返します。
問題2：先頭の要素を削除しよう（shift()）
次の配列から、最初の要素を削除してみよう。削除された要素も表示してください。
let animals = ['dog', 'cat', 'rabbit'];
✅ 解答
let animals = ['dog', 'cat', 'rabbit'];
let first = animals.shift();
console.log(first); // 'dog'
console.log(animals); // ['cat', 'rabbit']
💡 解説
shift()は 配列の先頭 を削除します。- 残りの要素が左に詰められ、インデックスが変わります。
pop()と似ているけど、削除する位置が逆（先頭）です。
問題3：配列を空にしてみよう（length プロパティ）
次の配列 colors の中身を全部削除して、空の配列にしてください。
let colors = ['red', 'green', 'blue', 'yellow'];
✅ 解答
let colors = ['red', 'green', 'blue', 'yellow'];
colors.length = 0;
console.log(colors); // []
💡 解説
lengthプロパティを直接 0 にすると、すべての要素が削除 されます。- 一番簡単に配列をリセットできる方法です。
中級レベル（真ん中・範囲を削除）
問題4：真ん中の要素を削除しよう（splice()）
次の配列から 'melon' を削除してください。
let fruits = ['apple', 'melon', 'peach'];
✅ 解答
let fruits = ['apple', 'melon', 'peach'];
fruits.splice(1, 1);
console.log(fruits); // ['apple', 'peach']
💡 解説
splice(開始位置, 削除数)
→ index 1（2番目）の要素'melon'を1個削除。- 元の配列が直接書き換わります。
問題5：範囲をまとめて削除してみよう（splice()）
次の配列から、真ん中の 'b' と 'c' の2つを削除してください。
let letters = ['a', 'b', 'c', 'd', 'e'];
✅ 解答
let letters = ['a', 'b', 'c', 'd', 'e'];
letters.splice(1, 2);
console.log(letters); // ['a', 'd', 'e']
💡 解説
- index 1 から 2 個削除（つまり
'b'と'c'が消える）。 spliceは配列の「真ん中の要素削除」に最適。
問題6：削除しながら別の値を入れよう（置換）
次の配列で、 'b' と 'c' を 'x' と 'y' に置き換えてください。
let arr = ['a', 'b', 'c', 'd'];
✅ 解答
let arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2, 'x', 'y');
console.log(arr); // ['a', 'x', 'y', 'd']
💡 解説
splice(開始位置, 削除数, 追加要素...)'b','c'を削除し、その場所に'x','y'を挿入。- 削除と挿入を同時にできるのが便利。
上級レベル（元配列を残したまま削除・応用）
問題7：元配列を壊さずに削除（filter()）
次の配列 [1,2,3,4,5] から 3 を取り除いた新しい配列を作ってください。
元の配列は変更しないように。
let nums = [1,2,3,4,5];
✅ 解答
let nums = [1,2,3,4,5];
let newNums = nums.filter(n => n !== 3);
console.log(newNums); // [1,2,4,5]
console.log(nums); // [1,2,3,4,5]
💡 解説
filter()は条件に合う要素だけを残して新しい配列を作る。- 元の配列は変化しない（「イミュータブル操作」）。
問題8：特定のインデックスを削除して新しい配列を作る（slice()＋concat()）
次の配列から、index 2 の 'c' を削除した新しい配列を作ってください。
let letters = ['a','b','c','d','e'];
✅ 解答
let letters = ['a','b','c','d','e'];
let newLetters = letters.slice(0,2).concat(letters.slice(3));
console.log(newLetters); // ['a','b','d','e']
console.log(letters); // ['a','b','c','d','e']
💡 解説
slice(開始, 終了)で配列の一部を取り出す。'c'の前と後を取り出して、concat()でつなげる。- 元配列は変更されません。
問題9：配列を削除しすぎないように安全に扱う
次のコードは何が起こるでしょう？理由も説明してください。
let items = [];
let result = items.pop();
console.log(result);
console.log(items);
✅ 解答・解説
undefined
[]
- 空の配列に
pop()を使うと、削除する要素がないのでundefinedを返す。 - エラーにはならないが、削除も行われない。
→ 「空チェック」をしてから削除するのが安全。
まとめ：レベル別に覚えるコツ
| レベル | 主なメソッド | 特徴 | 配列が変わる？ |
|---|---|---|---|
| 初級 | pop(), shift(), length | 末尾・先頭・全削除 | ✅ 変わる |
| 中級 | splice() | 真ん中・範囲削除・置換 | ✅ 変わる |
| 上級 | filter(), slice() | 新しい配列を作って削除 | ❌ 元は変わらない |