この記事では、sliceメソッドの使い方について解説しています。文字列や配列など基本的な使い方から応用的な使い方まで幅広く解説しています。また、sliceメソッドと同様の動作をするメソッドについてもいくつか紹介しました。それぞれの特徴をしっかり理解しましょう。
JavaScriptのsliceメソッドとは
JavaScriptのsliceメソッドとは、配列または文字列の一部を切り出して新しい配列、文字列を作成するメソッドです。JavaScriptをプログラミングしていると、配列や文字列の一部のみ抜き出したい場面が度々登場します。
そういった場合に利用すると便利なメソッドがsliceメソッドです。
文字列型でのsliceメソッドの基本的な構文と書き方
長い文章を複数に分けて処理したり、文字列の一部だけを切り取って使いたいということがあります。sliceメソッドを使うと、文字列の特定の位置を指定し、抽出することができます。
sliceで文字列を切り抜く方法
sliceで文字列を切り抜く場合は、「文字列.slice(切り抜き開始位置)」と指定します。開始位置は、文字列の一番左の文字を0番目として切り抜き開始の番号を指定します。
例えば「Thank you」という文字列の場合、一番左のTを0番目として数えます。また、切り抜かれる範囲は開始位置〜末尾となります。以下にコード例を示します
var sample = 'あいうえおかきくけこ';
var result = sample.slice(5);
console.log(result); //かきくけこまた、sliceメソッドの引数にマイナスの整数を指定した場合は右からの位置を示すことになります。この時、-1を指定すると一番右の文字を取得することになります。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(-6);
console.log(result); //おかきくけこ右から数えて6番目の「お」から右の文字列が取得できてるのがわかります。
また、整数ではない数を指定すると小数点以下が省かれます。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(3.4);
var result2 = sample.slice(-3.4);
console.log(result); //えおかきくけこ
console.log(result2); //くけこsliceメソッドで文字列の任意の範囲を切り抜く方法
sliceメソッドは、切り抜きの終了位置も指定することができます。「文字列.slice(開始位置, 終了位置)」と指定します。
終了位置に関しては、指定した番号の文字は含まれず、その直前の文字まで切り抜かれます。この点が間違えやすいので注意が必要です。
また、文字数よりも大きな数を終了位置に指定すると、開始位置から末尾まで切り抜いた文字列を取得できます。
以下にコード例を示します。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(2, 9);
var result2 = sample.slice(2, 20);
console.log(result); //うえおかきくけ
console.log(result); //うえおかきくけこ開始位置の文字は切り抜き対象に含まれていますが、終了位置の文字（上記の例の「こ」）は切り抜き対象に含まれていないことがわかります。
また、開始位置よりも小さな数を終了位置に指定すると空文字列が返されます。（条件を満たす文字列が存在しないため）また、開始位置、終了位置の両方にマイナスの整数を指定することもでき、右からの文字番号を表します。また、整数以外の数字は小数点以下が省かれます。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(-6, 8); //右から6番目の文字から左から8番目直前の文字
var result2 = sample.slice(-6, -2); //右から6番目の文字から右から2番目の文字
var result3 = sample.slice(4, -2); //左から4番目の文字から右から2番目の文字
console.log(result); //おかきく
console.log(result2); //おかきく
console.log(result3); //おかきく配列型でのsliceメソッドの基本的な構文と使い方
sliceメソッドは文字列だけでなく、配列にも使うことができます。配列の一部を分けて、新しい配列を作るなどのことができます。
ソートと組み合わせると使いやすいかもしれません。
sliceで配列要素を切り抜く方法
JavaScriptにおける配列型のsliceメソッドの使い方は、基本的には文字列の場合と同じです。「配列.slice(開始位置)」または「配列.slice(開始位置, 終了位置)」の形で指定します。開始位置、終了位置は配列のインデックス番号を指定します。
「配列.slice(開始位置)」で指定した場合、”配列の開始位置のインデックス番号”から最後までの要素の配列が新しく作られます。
「配列.slice(開始位置, 終了位置)」で指定した場合、”配列の開始位置のインデックス番号”から、”終了位置で指定したインデックス番号-1″までの要素の配列が新しく作られます。
文字列の場合と同様、終了位置で指定したインデックス番号を持つ配列要素が切り抜き対象にならず、その直前までが切り抜かれることに注意してください。
以下にコード例を示します。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];
var result = sample.slice(2);
var result2 = sample.slice(2, 3);
console.log(result); //[ 'コーラ', 'ハンバーガー' ]
console.log(result2); //[ 'コーラ' ]また文字列型の場合と同様に、マイナスの整数を指定すると右からの要素番号指定になります。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];
var result = sample.slice(-2);
var result2 = sample.slice(-3, -1);
console.log(result); //[ 'コーラ', 'ハンバーガー' ]
console.log(result2); //[ 'ナゲット', 'コーラ' ]なお、終了位置に配列の要素数以上の数字を渡すと開始位置から末尾要素までの配列が返されること、整数以外の数字を渡すと小数点以下が省かれるのも文字列型の場合と同様です。
応用的なsliceメソッドの使い方
次に、応用的なsliceメソッドの使い方を見ていきます。
callで他のデータ型を切り抜く方法
JavaScriptには、一見配列型に見えるのですが、配列型に適用できるメソッドが使えない型というものが存在します。
例えば、HTMLの要素を取得する場合にdocument.getElementByTagNameというメソッドを利用するのですが、その戻り値の型はHTMLCollectionという型になります。見た目は配列型に見えるのですが、この型では配列型に利用できるメソッドが利用できません。
こういった型に対して、別の型（今回は配列型）のメソッドを適用できるようにするのがJavaScriptのcallメソッドになります。
callメソッドは、呼び出したいメソッドを持つオブジェクト.prototype.呼び出したいメソッド.call(対象のオブジェクト, 呼び出したいメソッドに渡す引数)と指定します。
例えば、HTMLCollection型であるcollection変数に対して、sliceを適用させたい場合は、
Array.prototype.slice.call(collection, 2, 4)というように指定します。
以下にコード例を示します。
var collection = document. getElementsByTagName('li');
var result = Array.protorype.slice.call(collection, 2, 4);
console.log(result);mapによる繰り返し処理例
JavaScriptにはメソッドチェーンという考え方があります。これは、メソッドを繋げて複数の処理を一行で記述することができ、プログラムがスマートになります。
このメソッドチェーンと言う考え方を使って、sliceメソッドで抜き出した配列をmapメソッドで繰り返し処理して新しい配列を作成する方法を紹介します。
以下のコードを見て下さい。
var list = ['id list', 'id=1', 'id=4', 'id=7', 'id=11'];
var result = list.slice(1).map(item => item.slice(3));
console.log(result); //[ '1', '4', '7', '11' ]このコードの処理の流れを説明します。まず、list.slice(1)でlistの0番目の要素を削除した配列が返されます。
そしてその配列に対して、mapメソッドで繰り返し処理を行っていきます。itemには配列の各要素が渡され、その各要素の文字列に対してsliceメソッドで文字列の切り出しを行っています。
このように、sliceメソッドで新しく作成した配列に対して別のメソッドを適用する場面は、JavaScriptプログラムにおいてたくさんあります。
また、配列要素が文字列の場合、そこに対してmapメソッド内でsliceを利用する場面なども多いです。これは一つの例ですが、しっかりと処理の流れを理解できるようにしましょう。
sliceに似た処理ができるJavaScriptのメソッド
最後に、sliceメソッドと似た処理ができるJavaScriptのメソッドを紹介します。
substringメソッド
JavaScriptのsubstringメソッドは、文字列型に対するsliceメソッドと同じ用途で利用できるメソッドです。文字列.substring(開始位置, 終了位置)で指定します。
終了位置はその位置の文字は含まず、その文字の直前の文字までを返します。また。終了位置は省略でき、省略した場合は文字列の末尾までを返します。
sliceメソッドの文字列限定バージョンという認識でOKです。
var sample = 'あいうえおかきくけこ';
var result = sample.substring(6);
var result2 = sample.substring(2, 8);
console.log(result); //きくけこ
console.log(result2); //うえおかきくsubstrメソッド
JavaScriptのsubstrメソッドも、文字列を抜き出すためのメソッドです。しかし、sliceメソッドやsubstringメソッドと引数の指定の仕方が異なります。文字列.substr(開始位置, 切り取る長さ)といった形で指定します。
第二引数が終了位置ではなく切り取る長さを指定することに注意して下さい。第二引数は省略可能で、その場合は開始位置から末尾までの文字列を取得します。
var sample = 'あいうえおかきくけこ';
var result = sample.substr(6);
var result2 = sample.substr(2, 6);
console.log(result); //きくけこ
console.log(result2); //うえおかきくまた、開始位置に負の整数を指定することもできます。その場合は、「文字列の長さ + 指定した負の整数」が開始位置となります。第二引数に負の数や0を指定した場合は空文字列が返されます。
var sample = 'あいうえおかきくけこ';
var result = sample.substr(-4);
var result2 = sample.substr(-4, 2);
var result3 = sample.substr(2, -1);
console.log(result); //きくけこ
console.log(result2); //きく
console.log(result3); //spliceメソッド
JavaScriptのspliceメソッドは、配列から要素を抜き出し新しい配列を作成するメソッドです。配列.splice(開始位置, 抜き出す要素の数)と指定します。
第二引数が終了位置ではなく抜き出す要素の数になることに注意して下さい。また、第二引数は省略でき、その場合は開始位置から配列の末尾までが抜き出されます。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];
var result = sample.splice(2);
var result2 = sample.splice(3, 1);
console.log(result); //[ 'コーラ', 'ハンバーガー' ]
console.log(result2); //[]また、開始位置に負の整数を指定することもできます。その場合は、「配列の長さ + 指定した負の整数」が開始位置となります。第二引数に負の数や0を指定した場合は空配列が返されます。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];
var result = sample.splice(-3, 2);
var result2 = sample.splice(1, -1);
console.log(result); //[ 'ナゲット', 'コーラ' ]
console.log(result2); //[]また注意点として、このメソッドは破壊的メソッドであることが挙げられます。破壊的メソッドとは、メソッドを作用させる対象のオブジェクト自体を変化させてしまうメソッドの事を言います。
以下のコードを見て下さい。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];
var result = sample.slice(2);
console.log(sample); //[ 'ポテト', 'ナゲット', 'コーラ', 'ハンバーガー' ]
var result2 = sample.splice(2);
console.log(sample); //[ 'ポテト', 'ナゲット' ]
console.log(result); //[ 'コーラ', 'ハンバーガー' ]
console.log(result2); //[ 'コーラ', 'ハンバーガー' ]resultとresult2は同じ値になっていますが、それぞれのメソッドを作用させたsampleの値が異なっていることがわかります。sliceメソッドは元の配列を変化させませんが、spliceはもとの配列を変化させてしまいます。
この点は注意しておかないと、JavaScriptのプログラムを書いている際にバグの原因となりやすいので気をつけましょう。
まとめ
今回は、JavaScriptのsliceメソッドの使い方について解説しました。基本的な使い方から、callメソッドやmapメソッドを利用した応用的な使い方まで解説しましたので、それぞれの使い方をしっかり理解して実践で使えるようになりましょう。
また、JavaScriptには似た動きをするメソッドもいくつかありますので、目的に応じて使い分けられるようになると良いです。今回紹介できなかった使い方などもありますので、JavaScriptの公式ドキュメントなどを参照してみると学びが深まります。
