【JavaScript】slice()の基本から実践的な使い方まで徹底解説

JavaScriptで配列や文字列を取り扱う際に、特定の部分を取り出したいときがありますよね。そんなときに大活躍するのが「slice()」メソッドです。この記事を通じて、その基本から実践的な使い方まで学んでみましょう！

「slice()」の基本的な使い方

「slice()」とは？

slice()は、配列や文字列から一部を取り出して新しい配列や文字列を作るメソッドです。たとえば、ある文章の中から特定の単語だけを取り出したり、リストの中からいくつかの要素を選び出すのに便利です。

let fruits = ["apple", "banana", "cherry", "date"];
let selectedFruits = fruits.slice(1, 3);
console.log(selectedFruits); // ["banana", "cherry"]

「slice()」の引数

slice()メソッドは、最大で2つの引数を取ります。

1. 開始位置(省略すると0から開始)
2. 終了位置(省略すると最後まで)

以下のコード例を見てみましょう。

let str = "Hello, World!";
let result = str.slice(7);
console.log(result); // "World!"

「slice()」の使用例4パターン

文字列から一部を切り取る

文字列から一部を切り取りたいときに使用します。

let greeting = "Good morning, everyone!";
let morning = greeting.slice(5, 12);
console.log(morning); // "morning"

配列の一部を取り出す

配列の中から特定の範囲の要素を取り出します。

let numbers = [10, 20, 30, 40, 50];
let twenties = numbers.slice(1, 3);
console.log(twenties); // [20, 30]

開始位置から最後まで取り出す

終了位置を省略すると、開始位置から最後まで取り出せます。

let animals = ["dog", "cat", "fish", "bird"];
let pets = animals.slice(1);
console.log(pets); // ["cat", "fish", "bird"]

負の数値を使用して後ろから取り出す

引数に負の数値を指定することで、後ろからの位置を示すことができます。

let colors = ["red", "green", "blue", "yellow"];
let favorite = colors.slice(-2, -1);
console.log(favorite); // ["blue"]

「slice()」と「splice()」

「splice()」とは？

splice()は、配列から一部を取り出すとともに、その部分を削除や置換するメソッドです。

let foods = ["pizza", "burger", "pasta"];
foods.splice(1, 1, "sushi");
console.log(foods); // ["pizza", "sushi", "pasta"]

「slice()」と「splice()」の違い

slice()は元の配列や文字列を変更せず、新しいものを返します。一方、splice()は元の配列を変更してしまいます。

let items = [1, 2, 3, 4];
let slicedItems = items.slice(1, 3);
console.log(items); // [1, 2, 3, 4]

items.splice(1, 2);
console.log(items); // [1, 4]

「slice()」を使用する際の注意点

元のデータは変更されない

slice()は元のデータを変更せず、新しいデータを返す点に注意が必要です。

let names = ["Alice", "Bob", "Charlie"];
let slicedNames = names.slice(0, 2);
console.log(names); // ["Alice", "Bob", "Charlie"]

負の引数に注意

負の数値を引数にすると、後ろからの位置として解釈されることを理解しておくと便利です。これにより、末尾からの要素を取り出す際に便利になりますが、意図しない位置から取り出してしまうことがありますので注意が必要です。

let letters = ["A", "B", "C", "D", "E"];
let slicedLetters = letters.slice(-3, -1);
console.log(slicedLetters); // ["C", "D"]

上の例では、後ろから3番目の「C」から、後ろから2番目の「D」までを取り出しています。

「slice()」の使い方まとめ

slice()は非常に便利なメソッドですが、その使い方や特性を理解することで、より効果的に活用することができます。この記事を参考に、日常のコーディングでのslice()の使用を極めてください！