JavaScript sliceメソッドの使い方

  • JavaScript
  • メソッド
最終更新日:

この記事のポイント

JavaScriptを学習する上で、配列や文字列の操作は欠かせないスキルです。その中でも特に重要なsliceメソッドについて、初心者の方でも理解できるよう丁寧に解説していきます。

  • 配列や文字列から指定した範囲のデータを簡単に抜き出せる便利
  • 元のデータを変更せずに新しいデータを作成する安全な操作方法
  • 負の数を使って末尾からの位置指定もできる柔軟な取得システム

これらのポイントを押さえることで、JavaScriptでのデータ操作がぐっと楽になり、プログラミングの幅が大きく広がります。

目次

sliceメソッドとは？

sliceメソッドは、配列や文字列から指定した範囲の要素を抜き出して新しいデータを作成するメソッドです。元のデータに影響を与えることなく、必要な部分だけを取得できる非常に便利な機能として広く活用されています。

このメソッドの最大の特徴は、元のデータを変更せずに新しいデータを生成することです。つまり、元の配列や文字列は変更されず、指定した範囲の要素だけが新しい配列や文字列として返されます。開始位置と終了位置を指定することで、自由自在にデータの一部を切り出すことができます。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

sliceメソッドの基本的な書き方は、以下の通りです。

array.slice(開始位置, 終了位置)

開始位置は含まれ、終了位置は含まれない点に注意が必要です。

負の数を使用すると、配列の末尾から数えた位置を指定できます。この機能により、配列の長さを事前に知らなくても末尾からの操作が可能になり、動的なデータ処理において非常に有効です。

const animals = ['イヌ', 'ネコ', 'ウサギ', 'ハムスター']; const result1 = animals.slice(1, 3); console.log(result1);







出力結果
['ネコ', 'ウサギ']
終了位置を省略すると、開始位置から最後までの要素が取得されます。

  
const pets = ['トリ', 'カメ', 'キンギョ', 'フェレット'];
const result2 = pets.slice(2);
console.log(result2);

  


  







出力結果
['キンギョ', 'フェレット']
実用例
ここからは、実際の開発現場でよく使われるsliceメソッドの具体的な使用例を紹介します。配列の分割、文字列の部分取得、データの複製など、さまざまな場面でsliceメソッドが活躍する実例をコード付きで詳しく見ていきましょう。
これらの例を理解することで、日常的なプログラミング作業において効率的にsliceメソッドを活用できるようになります。各例では、実行前の状況説明と実行後の結果を分かりやすく示し、なぜその結果になるのかの理由も合わせて解説します。
配列の先頭から複数要素を取得
この例では、動物園の動物リストから最初の3匹を取得しています。開始位置0から終了位置3の直前まで、つまりインデックス0、1、2の要素が新しい配列として返されます。

  
const zooAnimals = ['ゾウ', 'ライオン', 'キリン', 'シマウマ', 'サル'];
const firstThree = zooAnimals.slice(0, 3);
console.log(firstThree);

  


  







出力結果
['ゾウ', 'ライオン', 'キリン']
配列の末尾から要素を取得
負の数を使って配列の最後から要素を取得する例です。-2を指定することで、配列の末尾から2番目の位置から最後までの要素を取得できます。この方法は配列の長さに関係なく、常に最後の数個の要素を確実に取得できる便利な方法です。

  
const farmAnimals = ['ウシ', 'ブタ', 'ヒツジ', 'ニワトリ', 'ヤギ'];
const lastTwo = farmAnimals.slice(-2);
console.log(lastTwo);

  


  







出力結果
['ニワトリ', 'ヤギ']
配列の中間部分を抽出
配列の途中の部分だけを取り出したい場合の例です。インデックス1から3までの要素を抽出しています。このように開始位置と終了位置を指定することで、配列の任意の範囲を自由に切り出すことができます。

  
const seaAnimals = ['クジラ', 'イルカ', 'アザラシ', 'ペンギン', 'ラッコ'];
const middlePart = seaAnimals.slice(1, 4);
console.log(middlePart);

  


  







出力結果
['イルカ', 'アザラシ', 'ペンギン']
文字列から部分文字列を取得
sliceメソッドは配列だけでなく文字列にも使用できます。文字列に対してsliceメソッドを使用することで、文字列の一部分を簡単に抽出できます。この機能は、長い文字列から必要な部分だけを取り出す際に非常に有効です。

  
const animalName = 'ハムスター';
const partialName = animalName.slice(0, 2);
console.log(partialName);

  


  







出力結果
ハム
配列の完全なコピーを作成
引数を指定しないsliceメソッドで配列の複製を作成できます。引数を省略すると配列全体がコピーされます。これは元の配列を変更せずに同じ内容の新しい配列を作成する安全な方法として使用されます。

  
const original = ['トラ', 'パンダ', 'コアラ'];
const copy = original.slice();
console.log(copy);

  


  







出力結果
['トラ', 'パンダ', 'コアラ']
負のインデックスを組み合わせた範囲指定
開始位置と終了位置の両方に負の数を使用する例です。末尾から4番目の位置から末尾から1番目の直前までの要素を取得しています。このように負のインデックスを柔軟に組み合わせることで、より複雑な範囲指定も可能になります。

  
const wildAnimals = ['オオカミ', 'クマ', 'キツネ', 'シカ', 'リス'];
const middleRange = wildAnimals.slice(-4, -1);
console.log(middleRange);

  


  







出力結果
['クマ', 'キツネ', 'シカ']
条件に基づく部分配列の作成
特定の条件に基づいて配列の一部を取得する実用的な例です。年齢データに基づいて若いペットの名前だけを取得しています。実際の開発では、このように複数の配列を組み合わせて必要なデータだけを効率的に抽出する場面が多々あります。

  
const petAges = [1, 3, 5, 7, 9, 11];
const animals = ['イヌ', 'ネコ', 'ウサギ', 'ハムスター', 'トリ', 'カメ'];

const youngPets = animals.filter((_, index) => petAges[index] <= 3);
console.log(youngPets);

  


  







出力結果
['イヌ', 'ネコ']
文字列の末尾部分を取得
文字列に対して負のインデックスを使用する例です。文字列の最後の4文字を取得しています。この方法は、ファイル名から拡張子を取得したり、長い文字列の末尾部分だけを表示したりする際に便利です。

  
const longName = 'ゴールデンレトリバー';
const suffix = longName.slice(-4);
console.log(suffix);

  


  







出力結果
トリバー
まとめ
sliceメソッドは、配列や文字列から指定した範囲のデータを安全に取得できる機能です。元のデータを変更せずに新しいデータを作成するため、データの整合性を保ちながら効率的な処理を実現できます。
負のインデックスを使った柔軟な位置指定や、引数の省略による全体コピーなど、さまざまな使い方をマスターすることで、JavaScriptプログラミングのスキル向上に大きく貢献します。
sliceメソッドの活躍する場面
    

  • データの分割処理でページネーション機能を実装する場面
    • 

  • 配列の安全なコピーを作成してデータ変更を防ぐ場面
    • 

  • 文字列から特定の部分だけを抽出して表示する場面
    • 

重要なポイント
    

  • 元のデータを変更せず新しいデータを作成する安全性
    • 

  • 開始位置は含み終了位置は含まない範囲指定の仕組み
    • 

  • 負のインデックスで末尾からの位置指定ができる利便性
    • 

これらの特徴を理解し活用することで、より効率的で保守性の高いJavaScriptコードを書けるようになります。sliceメソッドは基本的でありながら強力な機能なので、ぜひ日常的なプログラミングに積極的に取り入れてください。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript sliceメソッドの使い方