JavaScriptのslice()とは？配列や文字列の一部を取り出す方法を基礎から解説
JavaScriptのslice()は、配列や文字列の一部を切り出して取得するためのメソッドです。
元のデータを変更せずに必要な部分だけを取り出せるため、配列操作や文字列処理の基本としてよく使われます。
たとえば、配列の先頭3件だけを取得したいときや、文字列の一部だけを抜き出したいときに便利です。
また、元の配列を壊さずに扱えることから、意図しないデータ変更を避けたい場面でも役立ちます。
JavaScriptの配列操作をまとめて確認したい場合は、先にJavaScriptの配列操作まとめ（map・filter・reduce）のような基礎記事とあわせて読むと、slice()の位置づけが理解しやすくなります。
Contents
slice()とは
slice()の役割
slice()は、配列や文字列の指定した範囲を切り出して新しいデータとして返すメソッドです。
配列に使った場合は新しい配列を返し、文字列に使った場合は新しい文字列を返します。
重要なのは、元の配列や文字列そのものは変更されないという点です。
基本構文
const result = 対象.slice(開始位置, 終了位置);開始位置：どこから切り出すかを指定します終了位置：どこまで切り出すかを指定します終了位置で指定した位置の要素は含まれません
つまり、slice(1, 4)であれば、1番目から3番目までが取得されます。
slice()の基本的な使い方
配列の一部を取り出す
// slice-array-basic.js
const fruits = ["apple", "banana", "orange", "grape", "melon"];
const result = fruits.slice(1, 4);
console.log(result); // ["banana", "orange", "grape"]
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]この例では、インデックス1から4の手前までを取り出しています。
元のfruits配列はそのまま残ります。
文字列の一部を取り出す
// slice-string-basic.js
const text = "JavaScript";
const result = text.slice(4, 10);
console.log(result); // "Script"
console.log(text); // "JavaScript"文字列でも同じように、指定した範囲を切り出せます。
slice()の引数の考え方
開始位置だけを指定する
終了位置を省略すると、開始位置から最後までを取得できます。
// slice-start-only.js
const numbers = [10, 20, 30, 40, 50];
const result = numbers.slice(2);
console.log(result); // [30, 40, 50]開始位置と終了位置を指定する
// slice-start-end.js
const numbers = [10, 20, 30, 40, 50];
const result = numbers.slice(1, 3);
console.log(result); // [20, 30]終了位置の要素は含まれないため、1番目と2番目だけが取得されます。
引数を省略する
引数を省略すると、全体をそのままコピーした新しい配列や文字列を返します。
// slice-copy-all.js
const colors = ["red", "blue", "green"];
const result = colors.slice();
console.log(result); // ["red", "blue", "green"]
console.log(result === colors); // falseこれは配列をコピーしたいときの定番の書き方です。
負の値を使うslice()の使い方
後ろから数えて取り出す
slice()では、負の値を指定すると末尾から数えた位置として扱われます。
// slice-negative-start.js
const numbers = [10, 20, 30, 40, 50];
const result = numbers.slice(-2);
console.log(result); // [40, 50]この例では、後ろから2つ分を取得しています。
後ろから範囲を指定する
// slice-negative-range.js
const numbers = [10, 20, 30, 40, 50];
const result = numbers.slice(-4, -1);
console.log(result); // [20, 30, 40]負の値に慣れると、末尾側のデータ取得がかなり楽になります。
slice()は元の配列を変更しない
変更しないメソッドであることが重要
slice()は、元の配列を変更しません。
この性質は、splice()と混同しやすいポイントです。
// slice-no-change.js
const items = ["A", "B", "C", "D"];
const result = items.slice(1, 3);
console.log(result); // ["B", "C"]
console.log(items); // ["A", "B", "C", "D"]console.log(items); // ["A", "B", "C", "D"]
元データを安全に保ったまま一部だけを使いたいときに向いています。
splice()との違いに注意する
slice()とよく似た名前のメソッドにsplice()があります。
しかし、役割は大きく異なります。
slice()：一部を取り出す。元の配列は変更しないsplice()：要素の削除・追加・置換を行う。元の配列を変更する
名前が似ているため、使い分けは早めに整理しておくと混乱を防ぎやすくなります。
slice()がよく使われる場面
配列の先頭だけを取得する
// slice-first-items.js
const articles = ["記事A", "記事B", "記事C", "記事D", "記事E"];
const result = articles.slice(0, 3);
console.log(result); // ["記事A", "記事B", "記事C"]一覧の一部だけを表示したいときによく使われます。
配列の末尾だけを取得する
// slice-last-items.js
const logs = ["log1", "log2", "log3", "log4", "log5"];
const result = logs.slice(-2);
console.log(result); // ["log4", "log5"]最新の履歴だけを取得したい場面で便利です。
先頭を除いた残りを取得する
// slice-without-first.js
const values = [100, 200, 300, 400];
const result = values.slice(1);
console.log(result); // [200, 300, 400]最初の要素を除いて扱いたいときに使えます。
配列をコピーする
// slice-copy-array.js
const original = [1, 2, 3];
const copied = original.slice();
copied.push(4);
console.log(original); // [1, 2, 3]
console.log(copied); // [1, 2, 3, 4]配列を複製してから別の処理をしたいときに便利です。
文字列に対するslice()の使い方
先頭から一部を切り出す
// slice-string-head.js
const message = "Hello World";
const result = message.slice(0, 5);
console.log(result); // "Hello"末尾だけを取り出す
// slice-string-tail.js
const message = "Hello World";
const result = message.slice(-5);
console.log(result); // "World"文字列でも負の値が使えるため、末尾の文字列取得が簡単です。
slice()でよくある疑問
終了位置の要素が含まれないのはなぜか
slice(開始位置, 終了位置)は、開始位置以上、終了位置未満の範囲を取得します。
この仕様は、JavaScriptの多くの範囲指定と共通しています。
そのため、slice(0, 3)なら取得されるのは0、1、2の3つです。
// slice-end-not-included.js
const letters = ["a", "b", "c", "d", "e"];
const result = letters.slice(0, 3);
console.log(result); // ["a", "b", "c"]開始位置が終了位置より大きいとどうなるか
条件に合う範囲がないため、空の配列や空文字列が返ります。
// slice-empty-result.js
const numbers = [1, 2, 3, 4, 5];
const result = numbers.slice(4, 2);
console.log(result); // []範囲外の値を指定するとどうなるか
極端な値を指定しても、JavaScript側で扱える範囲に調整されます。
// slice-out-of-range.js
const numbers = [1, 2, 3];
const result = numbers.slice(1, 100);
console.log(result); // [2, 3]slice()とほかの配列メソッドとの違い
slice()とfind()の違い
slice()は範囲で取り出すメソッドです。
一方、find()は条件に合う最初の1件を取得するメソッドです。
条件に合う要素を探したい場合は、JavaScriptのfind()とは？最初の要素を取得する方法もあわせて確認すると整理しやすくなります。
slice()とfilter()の違い
slice()は位置で切り出します。filter()は条件に合う要素だけを抽出します。
たとえば、先頭3件を取り出したいならslice()、偶数だけを取り出したいならfilter()が向いています。
条件による絞り込みを基礎から確認したい場合は、JavaScriptのfilter()とは？配列の絞り込みを徹底解説が参考になります。
slice()とmap()の違い
slice()は一部を取り出すメソッドです。map()は各要素を変換して新しい配列を作るメソッドです。
たとえば、配列の後半だけ取り出すならslice()、全要素を2倍にするならmap()を使います。
変換処理の基本は、JavaScriptのmap()についての基礎解説記事とあわせて押さえると理解しやすくなります。
slice()の注意点
深いコピーではない
配列をslice()でコピーしても、中に入っているオブジェクトまで複製されるわけではありません。
コピーされるのはあくまで配列の外側です。
// slice-shallow-copy.js
const original = [{ name: "Tanaka" }, { name: "Sato" }];
const copied = original.slice();
copied[0].name = "Suzuki";
console.log(original[0].name); // "Suzuki"
console.log(copied[0].name); // "Suzuki"オブジェクトや配列が要素に含まれる場合は、slice()が浅いコピーである点に注意が必要です。
配列を削除するメソッドではない
slice()は取り出すだけで、元の配列から削除はしません。
削除までしたい場合にslice()を使ってしまうと、思った動作にならないことがあります。
「元の配列を変えたくないのか、変えてよいのか」を意識して選ぶことが大切です。
slice()の実践例
配列をページごとに分けて表示する
// slice-pagination.js
const items = ["A", "B", "C", "D", "E", "F", "G", "H"];
const page = 2;
const perPage = 3;
const start = (page - 1) * perPage;
const end = start + perPage;
const result = items.slice(start, end);
console.log(result); // ["D", "E", "F"]このように、開始位置と終了位置を計算すれば、ページネーションの基本的な処理ができます。
文字列の拡張子を取得する
// slice-file-extension.js
const fileName = "image.jpeg";
const dotIndex = fileName.lastIndexOf(".");
const extension = fileName.slice(dotIndex + 1);
console.log(extension); // "jpeg"文字列処理でもslice()は実用的です。
まとめ
JavaScriptのslice()は、配列や文字列の一部を切り出すための基本メソッドです。
特に重要なポイントは次の通りです。
- 指定した範囲を切り出して新しいデータを返す
- 終了位置の要素は含まれない
- 負の値を使うと末尾から数えられる
- 元の配列や文字列は変更しない
- 配列コピーにも使える
- ただし深いコピーではない
slice()は、配列操作や文字列操作の中でも使用頻度が高いメソッドです。splice()との違い、負の値の扱い、コピー用途などをあわせて押さえておくと、実務でも使いやすくなります。