【中学生でもわかる】JavaScriptの.slice()メソッド

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回は、JavaScriptの非常に便利なメソッド、

.slice()について話します。

初心者でもわかりやすいように、一緒に学んでいきましょう。

.slice()とは？

.slice()はJavaScriptの配列メソッドで、

元の配列を改変せずに新しい配列の部分列を作成します。

メソッドの名前から想像できる通り、

配列から一部を”スライス（切り出し）”するために使います。

例えば、ある配列があります。

let fruits = ["リンゴ", "オレンジ", "バナナ", "キウイ", "メロン"];

.slice()を使って、”オレンジ”から”キウイ”までのフルーツを取り出すことができます。

let citrusFruits = fruits.slice(1, 4);
console.log(citrusFruits);
// ["オレンジ", "バナナ", "キウイ"]

.slice()はどんな時に使うのか？パターン3つ

パターン1：部分的なコピー

.slice()は配列の一部を取り出して新しい配列を作るのに役立ちます。

例えば、ゲームのハイスコアリストから上位3つのスコアを取り出すことができます。

let highScores = [100, 90, 80, 70, 60, 50, 40];
let topThree = highScores.slice(0, 3);
console.log(topThree); // [100, 90, 80]

このコードでは、

slice(0, 3)がhighScoresの最初から3つの要素を新しい配列topThreeにコピーしています。

パターン2：配列の範囲を操作

ある範囲のデータのみに注目したい場合にも

.slice()が役立ちます。

例えば、温度データの配列があるとき、その中から特定の期間のデータを取り出すことができます。

let temperatures = [23, 24, 25, 22, 23, 24, 27, 28, 30, 25];
let lastThreeDays = temperatures.slice(-3);
console.log(lastThreeDays); // [30, 25]

ここでは、slice(-3)が配列の最後から3つの要素を取り出しています。

これが特定の期間（ここでは最後の3日間）のデータを選択する方法です。

パターン3：ページング

また、大量のデータを分割して表示する「ページング」のときにも.slice()が使えます。

例えば、全商品リストから10個ずつ表示するようにすることができます。

let products = ["product1", "product2", "product3", /*...*/ "product100"];
let page1 = products.slice(0, 10);
console.log(page1); // 1から10までの商品

slice(0, 10)は

products配列の最初の10つの要素を取り出して、

新しい配列page1を作ります。

このように、ページごとに表示するアイテムを制御することができます。

まとめ

今日はJavaScriptの.slice()メソッドについて学びました。

配列から部分的に要素を取り出す際に非常に便利なメソッドです。

それは配列のコピーを作ったり、配列の特定の範囲を操作したり、

ページングのように大量のデータを分割表示する時にも利用されます。

ただし、負のインデックスを使う際や、

.slice()が終了インデックスを「含まない」ことを理解することが重要です。

これからもJavaScriptの旅を一緒に楽しんでいきましょう！

次回もお楽しみに。

レッツチャレンジ！