では、slice() メソッドをしっかり身につけるための レベル別（初級・中級・上級）問題集＋解答＋解説 を用意しました。
初心者でも「理解 → 実践 → 応用」ができるように、ステップアップ式になっています。
初級：基本の使い方を覚えよう
【問題①】
const arr = ['a', 'b', 'c', 'd'];
console.log(arr.slice(1, 3));
出力結果は？
✅ 解答：
['b', 'c']
💡 解説：
slice(1, 3)→ インデックス1（’b’）から 3の手前（2） まで。
つまり'b'と'c'が取り出されます。
【問題②】
const numbers = [10, 20, 30, 40];
const copy = numbers.slice();
copy.push(50);
console.log(numbers);
出力結果は？
✅ 解答：
[10, 20, 30, 40]
💡 解説：
slice()は引数なしで 配列を丸ごとコピー。copyとnumbersは別の配列なので、copy.push(50)しても元には影響しません。
【問題③】
const fruits = ['apple', 'banana', 'cherry', 'melon'];
console.log(fruits.slice(2));
出力結果は？
✅ 解答：
['cherry', 'melon']
💡 解説：
slice(2)は「インデックス2から最後まで」取り出す。
つまり 2番目のcherryから末尾のmelonまで。
中級：少し応用してみよう
【問題④】
const nums = [1, 2, 3, 4, 5, 6];
console.log(nums.slice(2, -1));
出力結果は？
✅ 解答：
[3, 4, 5]
💡 解説：
start = 2（インデックス2 → 要素3）end = -1→ 「末尾の1つ手前」
なのでインデックス2〜4（3,4,5）が取られます。
【問題⑤】
const letters = ['A', 'B', 'C', 'D'];
console.log(letters.slice(-3, -1));
出力結果は？
✅ 解答：
['B', 'C']
💡 解説：
-3→ 末尾から3つ目（’B’）-1→ 末尾の1つ手前（’C’ まで）
だから'B'と'C'の2つが入ります。
【問題⑥】
const data = [100, 200, 300];
console.log(data.slice(3));
出力結果は？
✅ 解答：
[]
💡 解説：
- インデックス3は存在しない（配列の長さは3なので0〜2）。
→ 何も取り出せないため空配列[]が返ります。
上級：動きを理解して“注意点”を押さえよう
【問題⑦：参照型（浅いコピー）】
const users = [{name: 'A'}, {name: 'B'}];
const copy = users.slice(0, 1);
copy[0].name = 'Z';
console.log(users[0].name);
出力結果は？
✅ 解答：
'Z'
💡 解説：
slice()は 浅いコピー（shallow copy）。
→ 配列そのものは別ですが、中身（オブジェクト）は同じ参照を共有します。- つまり
copy[0].nameを変えると、元のusers[0]も変わる！
【問題⑧：start と end が逆の場合】
const arr = [1, 2, 3, 4];
console.log(arr.slice(3, 1));
出力結果は？
✅ 解答：
[]
💡 解説：
start (3)がend (1)より大きいと、取り出す範囲がなくなるため 空配列 になります。
【問題⑨：ページ分割風】
次のコードの結果を答えよう👇
const items = ['A','B','C','D','E','F','G'];
const page = items.slice(2, 5);
console.log(page);
✅ 解答：
['C', 'D', 'E']
💡 解説：
- インデックス2（’C’）から 5 の手前（’E’）までを取り出す。
→ ページ表示や「一部だけ取り出す処理」に便利！
最後にまとめ
| 特徴 | 説明 |
|---|---|
| 非破壊 | 元の配列を変えない |
| 範囲指定 | slice(start, end) → end は含まない |
| 負の数 | 末尾から数える |
| 浅いコピー | オブジェクトなどは参照が同じ |
| よく使う場面 | 一部の要素だけ抽出、配列コピー、ページ分割など |