WEBVTT

1
00:00:00.000 --> 00:00:01.167
こんにちは。

2
00:00:01.167 --> 00:00:03.890
今回はスライスを紹介します。

3
00:00:03.890 --> 00:00:10.502
これは、配列の一部を取り出すための、配列のインスタンスメソッドです。

4
00:00:10.502 --> 00:00:15.753
指定した範囲の要素を集めて、新しい配列として返します。

5
00:00:15.753 --> 00:00:20.810
大きな特徴は、元の配列そのものが変わらないことです。

6
00:00:20.810 --> 00:00:30.923
たとえば、一覧データから表示する分だけを取り出したり、履歴の末尾だけを取り出したりする場面で役立ちます。

7
00:00:30.923 --> 00:00:38.994
この動画では、書き方と引数、戻り値、記事の基本例、終了位置の扱い、負の位置の指定、

8
00:00:38.994 --> 00:00:47.065
浅いコピーの注意点、そして名前が似たメソッドとの違いまで、実行結果と一緒に学びます。

9
00:00:47.065 --> 00:00:52.900
取り出すだけ、という性質を押さえると、使い方が見えてきます。

10
00:00:52.900 --> 00:00:54.693
まず動作環境を確認します。

11
00:00:54.693 --> 00:00:58.970
記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、

12
00:00:58.970 --> 00:01:03.246
サファリでは一以降で使えます。

13
00:01:03.246 --> 00:01:07.385
ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。

14
00:01:07.385 --> 00:01:11.523
これらの数値はエムディーエヌの互換性データに基づく目安です。

15
00:01:11.523 --> 00:01:16.489
スライスは古くからある基本的な機能で、現在の主要な環境では広く使えます。

16
00:01:16.489 --> 00:01:22.559
追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。

17
00:01:22.559 --> 00:01:26.835
対応開始の版は、推奨版という意味ではない点にも注意しましょう。

18
00:01:26.835 --> 00:01:30.008
長く使われている機能なので、安心して学べます。

19
00:01:30.008 --> 00:01:31.746
書き方を確認します。

20
00:01:31.746 --> 00:01:38.871
対象の配列に続けてスライスと書き、カッコの中に、開始位置と終了位置の順で渡します。

21
00:01:38.871 --> 00:01:45.648
リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。

22
00:01:45.648 --> 00:01:48.950
開始位置は、取り出しを始める添字です。

23
00:01:48.950 --> 00:01:55.554
終了位置は、そこで取り出しを終える目印で、その位置の要素自体は含まれません。

24
00:01:55.554 --> 00:02:00.072
戻り値は、取り出した要素だけを集めた新しい配列です。

25
00:02:00.072 --> 00:02:09.108
スライドの例では、一、二、三、四から二と三が取り出され、元の配列はそのまま残ることを実機で確認しました。

26
00:02:09.108 --> 00:02:14.148
まずは、開始と終了と新しい配列、この三つを押さえましょう。

27
00:02:14.148 --> 00:02:15.829
記事の基本例を見ます。

28
00:02:15.829 --> 00:02:20.720
エー、ビー、シー、ディーという四つの要素が入った配列があります。

29
00:02:20.720 --> 00:02:24.082
開始位置一、終了位置三でスライスを呼びます。

30
00:02:24.082 --> 00:02:31.572
実行すると、ビーとシーだけが取り出され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

31
00:02:31.572 --> 00:02:37.379
続けて長さを調べると四のままで、元の配列が変わっていないことも確認できます。

32
00:02:37.379 --> 00:02:41.812
ポイントは、終了位置三は件数ではなく位置だということです。

33
00:02:41.812 --> 00:02:46.397
位置一から、位置三の手前まで、と読むと間違えにくくなります。

34
00:02:46.397 --> 00:02:52.816
ページ表示で、二件目から三件目だけを見せる、といった場面でこの形がそのまま使えます。

35
00:02:52.816 --> 00:02:54.480
引数の省略を見ます。

36
00:02:54.480 --> 00:02:59.804
まず終了位置を省略すると、開始位置から末尾までが取り出されます。

37
00:02:59.804 --> 00:03:08.289
スライドの例では、一から五までの配列で位置二から省略すると、三、四、五が返ることを実機で確認しました。

38
00:03:08.289 --> 00:03:13.280
次に、引数を両方とも省略すると、配列全体のコピーになります。

39
00:03:13.280 --> 00:03:17.522
結果は元の配列とは別の新しい配列なので、コピー側を並べ替えたり編集したりしても、

40
00:03:17.522 --> 00:03:21.765
元の並びは守られます。

41
00:03:21.765 --> 00:03:28.586
元のデータを残したまま作業用の配列がほしいとき、この全体コピーは定番の使い方です。

42
00:03:28.586 --> 00:03:34.076
ただし、中身の共有については、後のセクションで注意点を確認します。

43
00:03:34.076 --> 00:03:36.036
負の位置の指定を見ます。

44
00:03:36.036 --> 00:03:41.916
開始位置や終了位置に負の数を渡すと、末尾から数えた位置として扱われます。

45
00:03:41.916 --> 00:03:43.713
まず記事の境界例です。

46
00:03:43.713 --> 00:03:49.103
一、二、三という配列にマイナス二を指定すると、末尾から二つ、つまり二と三が取り出され、

47
00:03:49.103 --> 00:03:54.493
記事の期待出力と一致し、実機でも確認しました。

48
00:03:54.493 --> 00:03:58.250
次に、一から五までの配列でマイナス三からマイナス一の手前までを指定すると、

49
00:03:58.250 --> 00:04:02.007
三と四が返ります。

50
00:04:02.007 --> 00:04:07.724
末尾の履歴を取り出すような場面では、長さを数えなくてよいので便利です。

51
00:04:07.724 --> 00:04:12.624
ただし、読み手に意図が伝わるよう、使いどころは選びましょう。

52
00:04:12.624 --> 00:04:17.088
実例として、ページ表示と履歴の取り出しを見ます。

53
00:04:17.088 --> 00:04:20.251
一から六までの要素があるとします。

54
00:04:20.251 --> 00:04:29.179
一ページ目は位置ゼロから二の手前で一と二、二ページ目は位置二から四の手前で三と四が取り出せます。

55
00:04:29.179 --> 00:04:31.784
どちらも実機で確認しました。

56
00:04:31.784 --> 00:04:40.154
さらに、直近の履歴として末尾の二件がほしい場合は、マイナス二を指定すると五と六が返ります。

57
00:04:40.154 --> 00:04:49.269
このように、開始位置と終了位置をずらすだけで、同じ元データから必要な分だけを何度でも取り出せます。

58
00:04:49.269 --> 00:04:56.152
記事でも、ページ表示用の範囲や末尾の履歴が活用場面として挙げられています。

59
00:04:56.152 --> 00:05:01.732
元の全データは手つかずで残るので、安心して繰り返し使えます。

60
00:05:01.732 --> 00:05:04.097
浅いコピーの注意点を確認します。

61
00:05:04.097 --> 00:05:07.939
スライスの戻り値は、元の配列とは別の新しい配列です。

62
00:05:07.939 --> 00:05:16.068
スライドの例では、オブジェクトが二つ入った配列をコピーし、コピー側の先頭オブジェクトの値を九十九へ変えました。

63
00:05:16.068 --> 00:05:21.093
すると、元の配列の中身まで九十九に変わったことを実機で確認しました。

64
00:05:21.093 --> 00:05:27.005
配列自体は別物でも、中に入っているオブジェクトは同じものを共有しているためです。

65
00:05:27.005 --> 00:05:29.074
これを浅いコピーと呼びます。

66
00:05:29.074 --> 00:05:33.508
記事でも、内部のオブジェクトは共有する、と注意されています。

67
00:05:33.508 --> 00:05:37.794
数値や文字列だけの配列なら心配は少ないですが、オブジェクトを含む場合は、

68
00:05:37.794 --> 00:05:42.080
変更の影響が元へ届く点を知っておきましょう。

69
00:05:42.080 --> 00:05:46.145
名前が似ているスプライスとの違いを整理します。

70
00:05:46.145 --> 00:05:52.860
スライスは、指定した範囲を取り出して新しい配列を返し、元の配列は変えません。

71
00:05:52.860 --> 00:06:01.166
スライドの例では、一、二、三から先頭だけを取り出し、元はそのまま残ることを実機で確認しました。

72
00:06:01.166 --> 00:06:07.882
一方、前回学んだスプライスは、元の配列自体を編集して、削除した分を返します。

73
00:06:07.882 --> 00:06:13.360
名前は似ていても、元の配列を変えるかどうかが決定的に違います。

74
00:06:13.360 --> 00:06:19.546
記事でも、スプライスとは異なり元配列を変更しない、と明記されています。

75
00:06:19.546 --> 00:06:27.852
取り出したいだけならスライス、配列自体を編集したいならスプライス、と目的で使い分けてください。

76
00:06:27.852 --> 00:06:30.062
注意点を三つ確認します。

77
00:06:30.062 --> 00:06:33.930
まず、開始位置が配列の長さ以上の場合です。

78
00:06:33.930 --> 00:06:42.402
スライドの例では、長さ五の配列に位置十を指定すると、空の配列が返ることを実機で確認しました。

79
00:06:42.402 --> 00:06:47.744
次に、開始位置が終了位置以上の場合も、空の配列が返ります。

80
00:06:47.744 --> 00:06:53.269
そして大切なのは、どちらの場合もエラーにはならないことです。

81
00:06:53.269 --> 00:07:01.741
想定と違う範囲を指定しても処理は止まらないので、結果が空でも気づきにくい点に注意が必要です。

82
00:07:01.741 --> 00:07:12.424
終了位置は件数ではなく位置であること、本人を含まないことと合わせて、境界では実行前に結果を予測する習慣が役立ちます。

83
00:07:12.424 --> 00:07:13.519
まとめです。

84
00:07:13.519 --> 00:07:18.900
スライスは、開始位置と終了位置を指定して、配列の一部を新しい配列として取り出すメソッドで、

85
00:07:18.900 --> 00:07:24.282
元の配列自体は変更しません。

86
00:07:24.282 --> 00:07:26.106
ポイントは三つです。

87
00:07:26.106 --> 00:07:35.228
まず、終了位置の要素は含まれず、終了位置を省略すると末尾まで、両方省略すると全体のコピーになること。

88
00:07:35.228 --> 00:07:40.883
次に、負の位置は末尾から数えられ、末尾の取り出しに便利なこと。

89
00:07:40.883 --> 00:07:47.451
そして、戻り値は浅いコピーで、中のオブジェクトは元と共有されることです。

90
00:07:47.451 --> 00:07:55.477
まずは記事の基本例と境界例を実行し、取り出される範囲を予測してから確かめてみてください。

91
00:07:55.477 --> 00:07:57.119
お疲れさまでした。

92
00:07:57.119 --> 00:08:01.498
開始と終了と、元が変わらないか、この三点を言葉で説明できるようになれば、

93
00:08:01.498 --> 00:08:05.876
理解が深まった証拠です。