VIDEO LESSON

JavaScriptのArray.prototype.slice()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:06動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はスライスを紹介します。
0:03これは、配列の一部を取り出すための、配列のインスタンスメソッドです。
0:10指定した範囲の要素を集めて、新しい配列として返します。
0:15大きな特徴は、元の配列そのものが変わらないことです。
0:20たとえば、一覧データから表示する分だけを取り出したり、履歴の末尾だけを取り出したりする場面で役立ちます。
0:30この動画では、書き方と引数、戻り値、記事の基本例、終了位置の扱い、負の位置の指定、
0:38浅いコピーの注意点、そして名前が似たメソッドとの違いまで、実行結果と一緒に学びます。
0:47取り出すだけ、という性質を押さえると、使い方が見えてきます。
0:52まず動作環境を確認します。
0:54記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、
0:58サファリでは一以降で使えます。
1:03ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
1:07これらの数値はエムディーエヌの互換性データに基づく目安です。
1:11スライスは古くからある基本的な機能で、現在の主要な環境では広く使えます。
1:16追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:22対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:26長く使われている機能なので、安心して学べます。
1:30書き方を確認します。
1:31対象の配列に続けてスライスと書き、カッコの中に、開始位置と終了位置の順で渡します。
1:38リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:45開始位置は、取り出しを始める添字です。
1:48終了位置は、そこで取り出しを終える目印で、その位置の要素自体は含まれません。
1:55戻り値は、取り出した要素だけを集めた新しい配列です。
2:00スライドの例では、一、二、三、四から二と三が取り出され、元の配列はそのまま残ることを実機で確認しました。
2:09まずは、開始と終了と新しい配列、この三つを押さえましょう。
2:14記事の基本例を見ます。
2:15エー、ビー、シー、ディーという四つの要素が入った配列があります。
2:20開始位置一、終了位置三でスライスを呼びます。
2:24実行すると、ビーとシーだけが取り出され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:31続けて長さを調べると四のままで、元の配列が変わっていないことも確認できます。
2:37ポイントは、終了位置三は件数ではなく位置だということです。
2:41位置一から、位置三の手前まで、と読むと間違えにくくなります。
2:46ページ表示で、二件目から三件目だけを見せる、といった場面でこの形がそのまま使えます。
2:52引数の省略を見ます。
2:54まず終了位置を省略すると、開始位置から末尾までが取り出されます。
2:59スライドの例では、一から五までの配列で位置二から省略すると、三、四、五が返ることを実機で確認しました。
3:08次に、引数を両方とも省略すると、配列全体のコピーになります。
3:13結果は元の配列とは別の新しい配列なので、コピー側を並べ替えたり編集したりしても、
3:17元の並びは守られます。
3:21元のデータを残したまま作業用の配列がほしいとき、この全体コピーは定番の使い方です。
3:28ただし、中身の共有については、後のセクションで注意点を確認します。
3:34負の位置の指定を見ます。
3:36開始位置や終了位置に負の数を渡すと、末尾から数えた位置として扱われます。
3:41まず記事の境界例です。
3:43一、二、三という配列にマイナス二を指定すると、末尾から二つ、つまり二と三が取り出され、
3:49記事の期待出力と一致し、実機でも確認しました。
3:54次に、一から五までの配列でマイナス三からマイナス一の手前までを指定すると、
3:58三と四が返ります。
4:02末尾の履歴を取り出すような場面では、長さを数えなくてよいので便利です。
4:07ただし、読み手に意図が伝わるよう、使いどころは選びましょう。
4:12実例として、ページ表示と履歴の取り出しを見ます。
4:17一から六までの要素があるとします。
4:20一ページ目は位置ゼロから二の手前で一と二、二ページ目は位置二から四の手前で三と四が取り出せます。
4:29どちらも実機で確認しました。
4:31さらに、直近の履歴として末尾の二件がほしい場合は、マイナス二を指定すると五と六が返ります。
4:40このように、開始位置と終了位置をずらすだけで、同じ元データから必要な分だけを何度でも取り出せます。
4:49記事でも、ページ表示用の範囲や末尾の履歴が活用場面として挙げられています。
4:56元の全データは手つかずで残るので、安心して繰り返し使えます。
5:01浅いコピーの注意点を確認します。
5:04スライスの戻り値は、元の配列とは別の新しい配列です。
5:07スライドの例では、オブジェクトが二つ入った配列をコピーし、コピー側の先頭オブジェクトの値を九十九へ変えました。
5:16すると、元の配列の中身まで九十九に変わったことを実機で確認しました。
5:21配列自体は別物でも、中に入っているオブジェクトは同じものを共有しているためです。
5:27これを浅いコピーと呼びます。
5:29記事でも、内部のオブジェクトは共有する、と注意されています。
5:33数値や文字列だけの配列なら心配は少ないですが、オブジェクトを含む場合は、
5:37変更の影響が元へ届く点を知っておきましょう。
5:42名前が似ているスプライスとの違いを整理します。
5:46スライスは、指定した範囲を取り出して新しい配列を返し、元の配列は変えません。
5:52スライドの例では、一、二、三から先頭だけを取り出し、元はそのまま残ることを実機で確認しました。
6:01一方、前回学んだスプライスは、元の配列自体を編集して、削除した分を返します。
6:07名前は似ていても、元の配列を変えるかどうかが決定的に違います。
6:13記事でも、スプライスとは異なり元配列を変更しない、と明記されています。
6:19取り出したいだけならスライス、配列自体を編集したいならスプライス、と目的で使い分けてください。
6:27注意点を三つ確認します。
6:30まず、開始位置が配列の長さ以上の場合です。
6:33スライドの例では、長さ五の配列に位置十を指定すると、空の配列が返ることを実機で確認しました。
6:42次に、開始位置が終了位置以上の場合も、空の配列が返ります。
6:47そして大切なのは、どちらの場合もエラーにはならないことです。
6:53想定と違う範囲を指定しても処理は止まらないので、結果が空でも気づきにくい点に注意が必要です。
7:01終了位置は件数ではなく位置であること、本人を含まないことと合わせて、境界では実行前に結果を予測する習慣が役立ちます。
7:12まとめです。
7:13スライスは、開始位置と終了位置を指定して、配列の一部を新しい配列として取り出すメソッドで、
7:18元の配列自体は変更しません。
7:24ポイントは三つです。
7:26まず、終了位置の要素は含まれず、終了位置を省略すると末尾まで、両方省略すると全体のコピーになること。
7:35次に、負の位置は末尾から数えられ、末尾の取り出しに便利なこと。
7:40そして、戻り値は浅いコピーで、中のオブジェクトは元と共有されることです。
7:47まずは記事の基本例と境界例を実行し、取り出される範囲を予測してから確かめてみてください。
7:55お疲れさまでした。
7:57開始と終了と、元が変わらないか、この三点を言葉で説明できるようになれば、
8:01理解が深まった証拠です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.slice()で配列の一部を元配列を変えずに取り出す方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのArray.prototype.slice()の使い方：引数・戻り値・実例と注意点 →