【JavaScript入門】sliceメソッドで文字列や配列の要素を一部切り出す

配列や文字列を扱う際に、一部のデータを取り出して扱いたい場合があると思います。
その際に活用できるのが、sliceメソッドです。

今回は、JavaScriptのsliceメソッドを使用する方法について解説していきたいと思います。
類似するメソッドとの相違点などについても紹介するので、ぜひ参考にしてみてください。

JavaScriptのsliceメソッドとは？

sliceメソッドは、文字列や配列などからデータの一部を取り出したい場合に使用するメソッドです。
このメソッドを使用することにより、文字列の中から任意の文字を抜き出したり、配列の一部の要素だけを取り出したりすることができます。

sliceメソッドは、文字列の既存メソッドとしてのsliceと、配列の既存メソッドとしてのsliceの2種類があります。
それぞの詳しい使い方について、順に確認していきましょう。

文字列におけるsliceメソッドの使い方

まずは、文字列のsliceメソッドから解説します。

基本構文

文字列の sliceメソッドを使用する際の基本構文は、以下のように記述します。

【基本構文】

文字列.slice(開始位置, 終了位置);

第１引数には、文字列の取り出しを開始する位置を数値で指定します。
プログラミングにおいては、文字位置や配列の要素の順番は、先頭を１ではなく０として順に数えていきます。
例えば、「sample」 という文字列から 「ple」 を取り出したい場合、引数には３を指定します。

第２引数には、取り出しの終了位置を任意で指定できます。
ただし、終了位置に指定した文字は戻り値には含まれません。
引数は省略可能で、その場合は開始位置から末尾までを取り出します。

メソッドを使用した際の実際の動きを、以下のサンプルコードで見てみましょう。

【サンプルコード】

const sampleStr = "sampleCode";

const result1 = sampleStr.slice(6);
const result2 = sampleStr.slice(0, 6);

console.log(result1);
console.log(result2);

【実行結果】

Code
sample

先頭を0文字目として数えた時に、6文字目にあたるのはCです。
result1の場合は終了位置を指定していないため、Cから末尾であるeまでを取り出し、結果として返しています。

一方、result2の方は６文字目を終了位置としているため、指定した０文字目のsから手前のeまでが取り出されています。
これが、sliceメソッドの基本的な動作となります。

後ろから順番に数えて文字列を切り出す方法は？

通常、sliceメソッドは先頭から順に文字数を数えて処理を実行しますが、引数にマイナス値を指定することで、末尾から文字数を数えることもできます。

以下のサンプルコードを見てみましょう。

【サンプルコード】

const sampleStr = "sampleCode";

const result = sampleStr.slice(-4);

console.log(result);

【実行結果】

Code

プラス値で4と指定した場合、該当するのは l の文字になりますが、マイナス値のため末尾から順に数えて４文字目となるCが対象となっています。
終了位置を省略した場合に、開始位置から末尾までの文字列を取得するのは、プラス値の時と同様です。

また、終了位置も開始位置と同じ様に、マイナス値で指定することができます。
指定する際の数値の正負は第１引数に合わせる必要はありませんが、開始位置よりも前の文字位置を指定すると、文字列が取得されずに空文字が返却されます。

【サンプルコード】

const sampleStr = "sampleCode";

// 正負どちらでも指定可能
const resultPlus1 = sampleStr.slice(6, -2);
const resultPlus2 = sampleStr.slice(-4, 9);

// 開始位置より終了位置の方が前だと空文字が返される
const resultMinus1 = sampleStr.slice(6, -6);
const resultMinus2 = sampleStr.slice(-4, 1);

console.log(resultPlus1);
console.log(resultPlus2);

console.log(resultMinus1);
console.log(resultMinus2);

【実行結果】

Co
Cod

配列におけるsliceメソッドの使い方

続いて、配列のsliceメソッドについて見ていきましょう。

基本構文

基本構文は、文字列のsliceメソッドとほとんど変わりはありません。
引数も同様に、第1引数に開始位置、第2引数に任意で終了位置を指定します。

【基本構文】

配列.slice(開始位置, 終了位置);

メソッドの対象が配列となるため、引数に指定するのは文字位置ではなく、配列内の各要素に紐付くインデックス番号となります。
また、メソッドの戻り値として、指定した要素のみを格納した新たな配列を返します。

以下のサンプルコードで、実際の動作を見てみましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const result1 = sampleArray.slice(2);
const result2 = sampleArray.slice(1, 4);

console.log(result1);
console.log(result2);

文字列の sliceメソッドと同様に、終了位置に指定した要素は戻り値には含まれません。

後ろから順番に数えて要素を切り出す方法は？

配列の sliceメソッドもまた、引数にマイナス値を指定することができます。
指定した場合の挙動については、文字列の場合と同様です。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const result1 = sampleArray.slice(-2);
const result2 = sampleArray.slice(1, -4);

console.log(result1);
console.log(result2);

【実行結果】

[ 4, 5 ]
[]

sliceと類似するメソッドとの違い

JavaScriptには、 sliceメソッドに似た動きをするメソッドがいくつか存在します。
それぞれの違いについて、順に確認していきましょう。

sliceとsubstring

1つめは、文字列の既存メソッドである substringメソッドです。
sliceメソッドと同様に、対象の文字列から任意の箇所を取り出すことができるメソッドで、引数の指定方法や戻り値がほとんど同じ仕様となっています。

【基本構文】

文字列.substring( 開始位置, 終了位置 );

以下のサンプルコードを見てみましょう。

【サンプルコード】

const sampleStr = "sampleCode";

const result1 = sampleStr.substring(6);
const result2 = sampleStr.substring(0, 6);

console.log(result1);
console.log(result2);

【実行結果】

Code
sample

sliceメソッドの解説時に紹介したサンプルコードを、メソッド部分のみ substringメソッドに置き換えてみましたが、結果は同じ内容が出力されています。
このように、メソッドの基本的な動作については、sliceメソッドと substringメソッドは同様の処理を行います。

２つのメソッドの動作に違いが現れるのは、終了位置を開始位置よりも前の場所に指定した場合と、第２引数にマイナス値を指定した場合の２点です。

sliceメソッドでは、終了位置が開始位置よりも前の場所に指定された場合、文字列は取得されずに空文字を返していました。
一方、substringメソッドで同様の指定をした場合、互いの引数の数値を入れ替えた上で処理が実行されます。

以下のサンプルコードで見てみましょう。

【サンプルコード】

const sampleStr = "sampleCode";

const resultSlice = sampleStr.slice(6, 0);
const resultSubstr = sampleStr.substring(6, 0);

console.log("slice：" + resultSlice);
console.log("substring：" + resultSubstr);

【実行結果】

slice：
substring：sample

sliceメソッドが空文字を返しているのに対し、substringメソッドは指定した数値が反対になった状態での結果が取得されているのが分かりますね。

さらに、第２引数にマイナス値を指定した場合の挙動の違いについても見ていきましょう。
substringメソッドでは、第２引数にマイナス値を指定した場合、数値を０に変換して処理を実行します。

【サンプルコード】

const sampleStr = "sampleCode";

const resultSlice = sampleStr.slice(6, -1);
const resultSubstr = sampleStr.substring(6, -1);

console.log("slice：" + resultSlice);
console.log("substring：" + resultSubstr);

【実行結果】

slice：Cod
substring：sample

引数の数値が０に変換されるため、終了位置が開始位置よりも前の状態となり、取得する文字列に変化が起きています。
このように、引数に指定する数値の大小や正負の違いによって、メソッドの挙動が異なります。

sliceとsplice

2つ目は、配列の既存メソッドである spliceメソッドです。
sliceメソッドと spliceメソッドの最も大きな違いは、取得した要素が元の配列から削除されるか否かとなります。

spliceメソッドは、対象の配列の内容を変更するために使用するメソッドです。
sliceメソッドは指定した範囲の要素をコピーして新たな配列として返すのみですが、spliceメソッドは指定した範囲の要素を元の配列から削除した上で、削除した要素を含む配列を戻り値として返します。

【基本構文】

配列名.splice( 開始位置, 削除数, 追加要素);

sliceメソッドでは、第２引数に要素の取り出しを終了する位置をインデックス番号で指定しましたが、spliceメソッドの場合は削除する要素の数を指定します。
また、開始位置に指定したインデックスの場所に差し込みで追加する要素を、任意で指定することができます。

以下のサンプルコードで、実際の動作を見てみましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

// 元の配列は変更されない
const resultSlice = sampleArray.slice(2, 4);

console.log(`
  -- slice --
  元の配列: [${sampleArray}]
  slice: [${resultSlice}]
  `);

// 元の配列が変更される
const resultSplice = sampleArray.splice(2, 2);

console.log(`
  -- splice --
  元の配列: [${sampleArray}]
  splice: [${resultSplice}]
  `);

// 削除数を０にすることで追加のみも可能
sampleArray.splice(2, 0, 3);

console.log(`元の配列: [${sampleArray}]`);

【実行結果】

  -- slice --
  元の配列: [1,2,3,4,5]
  slice: [3,4]


  -- splice --
  元の配列: [1,2,5]
  splice: [3,4]

元の配列: [1,2,3,5]

使用するメソッドによって、元の配列の内容に違いがあるのが分かりますね。
このように、配列の内容に変更を加えたいか否かでメソッドを使い分けるといいでしょう。

sliceとtoSpliced

3つ目は、同じく配列の既存メソッドである toSplicedメソッドです。
spliceメソッドと同じく、配列の内容を変更するために使用するメソッドですが、toSplicedメソッドの場合は元の配列の要素を削除することなく、変更後の内容を新たな配列として取得することができます。

【基本構文】

配列名.toSpliced(開始位置, 削除数, 追加要素)

メソッドの引数は、spliceメソッドと同様の内容となっています。
sliceメソッドや spliceメソッドは、コピー（もしくは削除）対象とする要素そのものを含んだ配列を返しますが、toSplicedメソッドは、指定範囲の要素を変更した後の結果を新たな配列として返します。

以下のサンプルコードで動作を見ていきましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5]

// 元の配列は変更されない
const resultToSpliced = sampleArray.toSpliced(2, 2);

console.log(`
元の配列: [${sampleArray}]
toSpliced: [${resultToSpliced}]
`);

【実行結果】

元の配列: [1,2,3,4,5]
toSpliced: [1,2,5]

結果を見ると分かりますが、メソッドによって元の配列が変更されることはなく、削除した要素は戻り値に含まれることはありません。
一部の要素のみを取り出したい場合は sliceメソッド、要素を変更した後の配列が取得したい場合は toSplicedメソッドと使い分けるといいでしょう。

sliceメソッドを使用する際の注意点

最後に、sliceメソッドを使用する際の注意点について解説します。

数字だけの文字列をsliceしようとしたら数値型になっていた

文字列の中には、数値のみで構成される文章がある場合もあります。
その文章に変更を加えることなく、そのまま sliceメソッドを使用する分には特に問題はありませんが、メソッドの使用前に何かしらの処理を行うケースでは、場合によりエラーが発生することがあります。

まずは、以下の例を見てみましょう。

【サンプルコード】

const str = '123';

const result1 = str + 45;
const result2 = str - 45;

console.log(result1.slice(1));
console.log(result2.slice(1));

【実行結果】

TypeError: result2.slice is not a function

コードを実行すると、変数 「result2」 にメソッドを使用しようとする箇所で、このようなエラーが発生します。
result1の方は問題なく実行されていますが、この違いはなぜ起こるのでしょうか？

JavaScriptは動的型付けを行う言語です。
そのため、変数の宣言時にデータ型を指定する必要がなく、必要に応じて自動で型が変換されます。

上記の例でエラーが発生した原因は、この自動で行われる型変換により、result2に格納された値が文字列型ではなく数値型となっているからです。
＋演算子は文字列の連結に使用できるためそのまま文字列として扱われますが、-演算子はその限りではないため数値型に変換されています。

このように、処理内容によって型が変換されてしまう場合があるため、メソッドの使用前に typeof演算子でデータ型の確認を行うなどの対策をしておくと、安全に運用することができます。

DOM要素を取得したら配列型のオブジェクトではなかった

JavaScript においては、HTMLドキュメントから情報を取得して処理するケースも多々あります。
その際に気を付けたいのが、取得した情報のデータ型の問題です。

例えば、以下の様なHTMLドキュメントから、p要素を取得したとします。

【サンプルコード：HTML】

<div>
  <p>りんご</p>
  <p>みかん</p>
  <p>いちご</p>
</div>

【サンプルコード：JavaScript】

// p要素を取得
const list = document.querySelectorAll("p");

console.log(list.slice(1, 2));

【実行結果】

Uncaught TypeError: list.slice is not a function

取得結果に対して sliceメソッドを使用すると、このようなエラーが発生します。
これは、querySelectorAllメソッドで取得されたHTMLの要素が配列ではなくNodeListというオブジェクトに格納され、このオブジェクトがsliceメソッドを持たないからです。

取得したデータに対してsliceメソッドを使用したい場合は、新たに配列を作成してp要素の内容を格納していきましょう。

【サンプルコード】

const list = document.querySelectorAll("p");
const result = [];
list.forEach((item) => result.push(item.textContent));
console.log(result.slice(1, 2));

【実行結果】

['みかん']

ここではforEachメソッドを使用して、取得したp要素の中身のテキストをresultという新たな配列の要素として追加していっています。

こうすることでp要素の内容を通常の配列に格納することができ、sliceメソッドを使用することができるようになりました。

HTMLドキュメントから取得したデータを扱う場合は、上記の様な方法でデータを扱える状態にしてから処理するようにしましょう。

まとめ

いかがでしたか？
今回は、sliceメソッドの使用方法について解説しました。

上記でも解説した様に、文字列や配列にはそれぞれ似た様な特徴を持つメソッドがいくつか用意されています。
sliceメソッドの使い方はもちろん、その他のメソッドについても理解を深め、用途に合わせて適切に使い分けできるようにすると、より良いコードが記述できるようになります。

今回紹介した sliceメソッドと合わせて、使い方をしっかりとマスターしていきましょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。