JavaScript | 配列の一部をコピーして、新しい配列を作る（slice メソッド）

JavaScript JavaScript
2020.08.01
スポンサーリンク

JavaScript の slice を初心者向けに

「配列から必要な部分だけを取り出して、新しい配列にする」ための道具が slice です。元の配列はそのまま残るので、安心して使えます。

基本の使い方

array.slice()                 // 全部コピー
array.slice(開始位置)         // 開始位置から最後まで
array.slice(開始位置, 終了位置) // 開始位置〜終了位置「直前」まで
JavaScript
  • 開始位置は0から数えるインデックス。
  • 終了位置に書いた場所の「手前」までが切り出されます（終了位置そのものは含まれない）。
  • 引数を省略すれば、配列まるごとコピーできます。

まずは手で触って覚える：基本例題

例1：一部を切り出す

const scores = [75, 68, 92, 84, 90];

// インデックス1からインデックス3の「直前」まで
const part = scores.slice(1, 3);
console.log(part);    // [68, 92]
console.log(scores);  // [75, 68, 92, 84, 90]（元はそのまま）
JavaScript
  • 1から始めて3の「直前」までなので、取り出されるのはインデックス1と2の要素です。

例2：最後まで切り出す

const scores = [75, 68, 92, 84, 90];

// 2から最後まで
const tail = scores.slice(2);
console.log(tail);    // [92, 84, 90]
JavaScript

例3：配列を丸ごとコピー

const original = ['a', 'b', 'c'];
const copy = original.slice();

copy[0] = 'x';
console.log(copy);     // ['x', 'b', 'c']
console.log(original); // ['a', 'b', 'c']（元は変わらない）
JavaScript

よくあるつまずきポイント

1. 終了位置は「含まれない」

const arr = [10, 20, 30, 40];
console.log(arr.slice(1, 3)); // [20, 30]（40は入らない）
JavaScript
  • 「〜まで」と言いつつ、終了位置は含まれないのがポイント。

2. 負のインデックスが使える

  • 負数は「後ろから数える」意味になります。
const arr = [10, 20, 30, 40, 50];

console.log(arr.slice(-2));     // [40, 50]（後ろから2つ）
console.log(arr.slice(1, -1));  // [20, 30, 40]（1から最後の手前まで）
JavaScript

3. 浅いコピー（シャローコピー）

  • 中に「配列やオブジェクト」が入っている場合、参照（つながり）だけコピーされます。
  • 中身をいじると、元にも影響します。
const data = [[ 'Yamada', 75 ], [ 'Suzuki', 68 ]];
const cut = data.slice(0, 1);   // 先頭のひとつを切り出し

cut[0][1] = 80;
console.log(data[0]); // ['Yamada', 80] ← 元も変わる！
JavaScript
  • 中まで完全にコピーしたい「深いコピー」をしたいときは、まずはこれで十分な場面が多いです：
    • JSON での簡易コピー（関数や循環参照は不可） const deep = JSON.parse(JSON.stringify(data));
    • 近年のブラウザなら structuredClone const deep = structuredClone(data);

slice と splice の違い（間違えやすい）

  • slice：元の配列を「変えない」。指定範囲を「新しい配列」にして返す。
  • splice：元の配列を「直接変える」。要素の「削除・挿入・置換」ができる。
const arr = [1, 2, 3, 4];

// slice：非破壊
const s = arr.slice(1, 3);  // [2, 3]
console.log(arr);           // [1, 2, 3, 4]

// splice：破壊的（元が変わる）
const removed = arr.splice(1, 2); // インデックス1から2個削除
console.log(removed);        // [2, 3]
console.log(arr);            // [1, 4] ← 元が変わった
JavaScript

実践的ミニ課題

課題1：最後の3件だけ取り出す

  • 期待する出力：[84, 90, 77]
const logs = [65, 70, 84, 90, 77];
const lastThree = logs.slice(-3);
console.log(lastThree); // ?
JavaScript

課題2：先頭を除いた配列を作る

  • 期待する出力：['b', 'c', 'd']
const letters = ['a', 'b', 'c', 'd'];
const withoutHead = letters.slice(1);
console.log(withoutHead); // ?
JavaScript

課題3：2〜4番目の要素（インデックス1〜3）を取り出す

  • 期待する出力：[20, 30, 40]
const nums = [10, 20, 30, 40, 50];
const middle = nums.slice(1, 4);
console.log(middle); // ?
JavaScript

使いどころの感覚

  • 安全に一部を抜きたい（元を壊したくない）→ slice
  • 表示用やページング用に「部分配列」を作る→ slice
  • 配列のコピーが必要（浅いコピーでOK）→ slice
  • 配列を編集したい（削除・追加）→ splice

まとめ

slice は「配列のハサミ」。切り取った部分だけを新しい箱に入れて返します。元の箱はそのまま。終了位置は含まれない、負のインデックスで後ろからも指定できる、そして浅いコピーだという3点を押さえれば、もう迷いません。

前へ次へ
1234
スポンサーリンク
タイトルとURLをコピーしました