【JavaScript】slice – 配列や文字列の一部を取り出すためのメソッド

JavaScriptの slice() メソッドは、配列や文字列の一部を取り出すために使用される便利なメソッドです。今回は、slice() の基本的な使い方から使用時の注意点についてまとめていきたいと思います。

目次非表示

slice() メソッドとは？
1. 基本構文
文字列での使用例
配列での使用例
サンプルコード
1. 配列のコピーを作成する
2. 文字列の一部を取得して検索機能を作る
使用時の注意点
さいごに

slice() メソッドとは？

slice() は、元の配列や文字列を変更せず、新しい配列または文字列を返すメソッドです。

基本構文

JavaScript

array.slice(start, end);
string.slice(start, end);

start（省略可能）：切り出し開始位置（インデックス）
end（省略可能）：切り出し終了位置（この位置の要素は含まれない）
end を省略すると、配列または文字列の末尾まで切り出される
元の配列や文字列は変更されない

文字列での使用例

slice() を使って文字列の一部を取り出すことができます。

JavaScript

const text = 'JavaScript is fun!';

// インデックス4から10までの文字列を取得（10は含まれない）
const slicedText = text.slice(4, 10);
console.log(slicedText); // "Script"

end を省略すると、末尾まで取得できます。

JavaScript

const slicedToEnd = text.slice(11);
console.log(slicedToEnd); // "is fun!"

負の値を指定すると、末尾から数えた位置で切り出せます。

JavaScript

const lastFiveChars = text.slice(-5);
console.log(lastFiveChars); // "fun!"

配列での使用例

配列の一部を取り出すことも可能です。

JavaScript

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// インデックス2から5までの要素を取得（5は含まれない）
const slicedArray = numbers.slice(2, 5);
console.log(slicedArray); // [3, 4, 5]

end を省略すると、末尾まで取得できます。

JavaScript

const slicedToEnd = numbers.slice(4);
console.log(slicedToEnd); // [5, 6, 7, 8, 9]

負の値を指定すると、末尾から数えた位置で切り出せます。

JavaScript

const lastThree = numbers.slice(-3);
console.log(lastThree); // [7, 8, 9]

サンプルコード

配列のコピーを作成する

slice() を引数なしで呼び出すと、元の配列のコピーが作成できます。

See the Pen slice by tones (@tonescodedesign) on CodePen.

これは、元の配列を変更せずに安全にコピーを作成したい場合に役立ちます。

文字列の一部を取得して検索機能を作る

See the Pen slice by tones (@tonescodedesign) on CodePen.

使用時の注意点

元の配列や文字列は変更されない

slice() は元の配列や文字列を変更せず、新しいデータを返します。

JavaScript

const fruits = ["apple", "banana", "cherry"];
const newFruits = fruits.slice(1, 3);

console.log(fruits); // ["apple", "banana", "cherry"]（元の配列はそのまま）
console.log(newFruits); // ["banana", "cherry"]

end のインデックスは含まれない

JavaScript

const array = [1, 2, 3, 4, 5];
console.log(array.slice(1, 3)); // [2, 3]（インデックス3の値は含まれない）

splice() と slice() の違い

splice() は元の配列を変更するのに対し、slice() は元の配列を変更しません。

JavaScript

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [2, 3]（元の配列は変更されない）
console.log(arr); // [1, 2, 3, 4, 5]

console.log(arr.splice(1, 3)); // [2, 3, 4]（元の配列から削除）
console.log(arr); // [1, 5]