JavaScriptのslice()メソッドで配列の先頭から複数の要素を取得する方法

JavaScriptのslice()メソッドとは

JavaScriptの配列から最初のX個の要素にアクセスしたい場合、組み込みのslice()メソッドを使うのが最もシンプルで確実な方法です。

slice()は元の配列を変更せず、指定した範囲の要素だけを含む新しい配列を返す非破壊的なメソッドです。

サンプル:配列の最初の3つの要素を取得する

例として、配列の最初の3つの項目を操作するケースを考えてみましょう。ここでは、トレーニング種目のリストを配列として定義します。

const exerciseList = [
  "Deadlift",
  "Squat",
  "Push-up",
  "Pull-up",
  "Turkish Get-up",
  "Kettlebell Swing",
]

ステップ1:取得する要素数を定義する

まず、アクセスしたい要素の数を変数として定義します。

// 最初の3つの項目を取得する
const numberOfItems = 3

ステップ2:slice()で新しい配列を作成する

次に、最初の3つの項目を格納するための新しい変数を宣言し、slice()の結果を代入します。

const firstThreeExercises = exerciseList.slice(0, numberOfItems)

slice()の第1引数は開始位置(インデックス)、第2引数は終了位置です。終了位置のインデックス自体は結果に含まれない点に注意してください。つまりslice(0, 3)は、インデックス0〜2の3つの要素を取り出します。

実行結果の確認

console.log()を使って、元の配列と切り出した配列の中身を出力してみましょう。

console.log(exerciseList)
// 出力: ["Deadlift", "Squat", "Push-up", "Pull-up", "Turkish Get-up", "Kettlebell Swing"]

console.log(firstThreeExercises)
// 出力: ["Deadlift", "Squat", "Push-up"]

注意点:元の配列は変更されない

この方法では、元のexerciseList配列は一切変更されません。slice()は常に新しい配列を返すため、元のデータを保持したまま安全に部分抽出ができます。

なお、元の配列から要素を削除したい場合は、代わりに破壊的なsplice()メソッドを使用します。名前が似ていますが挙動がまったく異なるので、混同しないようにしましょう。