slice()は、配列の一部分を切り出して新しい配列として返すメソッドです。元の配列を変更しないため、安全にデータの一部を取得できます。ページネーションや部分表示、配列のコピーなど、さまざまな場面で活用されます。
基本的な使い方
slice()は開始インデックスと終了インデックス（省略可）を引数に取り、指定範囲の要素を含む新しい配列を返します。終了インデックスの要素は含まれません。
JavaScript
// 基本構文
const newArray = array.slice(開始インデックス, 終了インデックス);
const fruits = ["りんご", "バナナ", "みかん", "いちご", "ぶどう"];
// インデックス1から3の手前まで
console.log(fruits.slice(1, 3));
// インデックス2から最後まで
console.log(fruits.slice(2));
// 引数なし（配列全体のコピー）
console.log(fruits.slice());
// 元の配列は変更されない
console.log(fruits);実行結果
["バナナ", "みかん"]
["みかん", "いちご", "ぶどう"]
["りんご", "バナナ", "みかん", "いちご", "ぶどう"]
["りんご", "バナナ", "みかん", "いちご", "ぶどう"]負のインデックス
負の値を指定すると、配列の末尾から数えた位置を指定できます。-1は最後の要素、-2は最後から2番目の要素を指します。
JavaScript
const numbers = [10, 20, 30, 40, 50, 60, 70];
// 最後の3要素を取得
console.log(numbers.slice(-3));
// 最後の要素を除いた配列
console.log(numbers.slice(0, -1));
// 末尾から3番目〜末尾から1番目の手前
console.log(numbers.slice(-3, -1));
// 先頭の2要素を取得
console.log(numbers.slice(0, 2));実行結果
[50, 60, 70]
[10, 20, 30, 40, 50, 60]
[50, 60]
[10, 20]負のインデックスは「配列の長さ + 指定値」として解釈されます。例えば長さ7の配列でslice(-3)はslice(4)と同じです。
実践的な活用例
slice()はページネーション、先頭・末尾の取得、配列のイミュータブルな操作に便利です。
JavaScript
// ページネーション
const allItems = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
const pageSize = 10;
const currentPage = 3; // 3ページ目
const start = (currentPage - 1) * pageSize;
const pageItems = allItems.slice(start, start + pageSize);
console.log(pageItems);
// ランキングのトップ3を取得
const scores = [
{ name: "田中", score: 95 },
{ name: "佐藤", score: 87 },
{ name: "鈴木", score: 92 },
{ name: "高橋", score: 78 },
{ name: "伊藤", score: 88 }
];
const top3 = scores
.sort((a, b) => b.score - a.score)
.slice(0, 3);
console.log(top3.map(s => `${s.name}: ${s.score}点`));
// イミュータブルな要素削除
const original = [1, 2, 3, 4, 5];
const indexToRemove = 2;
const withoutThird = [
...original.slice(0, indexToRemove),
...original.slice(indexToRemove + 1)
];
console.log(withoutThird);
console.log("元の配列:", original);実行結果
["Item 21", "Item 22", "Item 23", "Item 24", "Item 25", "Item 26", "Item 27", "Item 28", "Item 29", "Item 30"]
["田中: 95点", "鈴木: 92点", "伊藤: 88点"]
[1, 2, 4, 5]
元の配列: [1, 2, 3, 4, 5]slice()とsplice()の違い
slice()は元の配列を変更せず新しい配列を返しますが、splice()は元の配列を直接変更します。名前が似ているため混同しやすいですが、イミュータブルな操作にはslice()、破壊的な追加・削除にはsplice()を使います。
浅いコピーに注意
slice()は浅いコピー（shallow copy）を行います。配列の要素がオブジェクトの場合、コピーされた配列の要素は元のオブジェクトへの参照です。要素のオブジェクトを変更すると元の配列にも影響するため、深いコピーが必要な場合はstructuredClone()を使用してください。
まとめ
slice()は配列の一部を切り出して新しい配列を返す- 元の配列は変更されない（イミュータブルな操作）
- 負のインデックスで末尾からの位置を指定できる
- ページネーションやトップN件の取得に便利
splice()（破壊的）と名前が似ているので注意