WEBVTT

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

2
00:00:01.039 --> 00:00:03.635
今回はスプライスを紹介します。

3
00:00:03.635 --> 00:00:11.598
これは、配列の途中で要素を削除したり、挿入したりするための、配列のインスタンスメソッドです。

4
00:00:11.598 --> 00:00:21.292
途中の要素を取り除くだけでなく、同じ場所へ新しい要素を差し込んだり、既存の要素を別の要素へ置き換えたりできます。

5
00:00:21.292 --> 00:00:28.909
たとえば、タスクの一覧で、確認という項目をレビューへ置き換える、という場面で役立ちます。

6
00:00:28.909 --> 00:00:35.833
この動画では、書き方と引数、戻り値と元の配列への影響、記事の基本例、挿入だけの使い方、

7
00:00:35.833 --> 00:00:42.758
負の位置の指定、範囲外の扱い、そして注意点まで、実行結果と一緒に学びます。

8
00:00:42.758 --> 00:00:46.393
元の配列自体が変わる点が、大きな特徴です。

9
00:00:46.393 --> 00:00:53.144
削除と挿入を分けて考えるより、一つの編集として捉えると、使い方が見えてきます。

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

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

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

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

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

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

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

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

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

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

20
00:01:34.616 --> 00:01:41.887
対象の配列に続けてスプライスと書き、カッコの中に、開始位置、削除件数、追加する要素の順で渡します。

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

22
00:01:47.675 --> 00:01:50.197
開始位置は、編集を始める添字です。

23
00:01:50.197 --> 00:01:53.165
削除件数は、そこから何個取り除くかです。

24
00:01:53.165 --> 00:01:56.727
追加する要素は、取り除いた場所へ差し込まれます。

25
00:01:56.727 --> 00:02:00.437
戻り値は、削除した要素だけを集めた新しい配列です。

26
00:02:00.437 --> 00:02:04.889
スライドの例では、一、二、三、四から二と三が取り除かれ、エックスが入り、

27
00:02:04.889 --> 00:02:09.340
一、エックス、四になることを実機で確認しました。

28
00:02:09.340 --> 00:02:12.160
まずはこの三つの役割を押さえましょう。

29
00:02:12.160 --> 00:02:13.831
記事の基本例を見ます。

30
00:02:13.831 --> 00:02:18.389
下書き、確認、公開という三つのタスクが入った配列があります。

31
00:02:18.389 --> 00:02:23.555
開始位置一、削除件数一、追加する要素レビューでスプライスを呼びます。

32
00:02:23.555 --> 00:02:27.581
実行すると、配列は下書き、レビュー、公開になり、記事の期待出力と一致し、

33
00:02:27.581 --> 00:02:31.607
ノードの実機結果とも一致しました。

34
00:02:31.607 --> 00:02:36.925
戻り値として受け取ったリムーブドには、取り除かれた確認だけが入ります。

35
00:02:36.925 --> 00:02:41.939
ポイントは、削除と追加を一度に行うことで、置き換えになることです。

36
00:02:41.939 --> 00:02:48.624
変更前の値が戻り値で手に入るので、元に戻す処理や、変更履歴を残す処理にもつなげられます。

37
00:02:48.624 --> 00:02:54.397
タスク管理のように、順番が大切な一覧では、この置き換えの形がよく登場します。

38
00:02:54.397 --> 00:02:57.554
挿入だけと、削除だけの使い方を見ます。

39
00:02:57.554 --> 00:02:59.381
まず記事の境界例です。

40
00:02:59.381 --> 00:03:03.037
一と三の間に、削除件数ゼロで二を挿入します。

41
00:03:03.037 --> 00:03:07.273
削除件数がゼロなので何も消えず、結果は一、二、三になり、記事の期待出力と一致し、

42
00:03:07.273 --> 00:03:11.510
実機でも確認しました。

43
00:03:11.510 --> 00:03:13.006
次に削除だけです。

44
00:03:13.006 --> 00:03:21.479
一、二、三、四から、位置一から二件を取り除くと、戻り値は二と三になり、元の配列は一と四だけが残ります。

45
00:03:21.479 --> 00:03:29.288
このように、削除件数と追加要素の組み合わせで、挿入、削除、置き換えの三通りを使い分けられます。

46
00:03:29.288 --> 00:03:33.276
やりたい編集に合わせて、数字を選ぶのがコツです。

47
00:03:33.276 --> 00:03:40.420
どちらの場合も、開始位置を間違えると別の要素まで消えるので、位置の確認が欠かせません。

48
00:03:40.420 --> 00:03:43.013
開始位置の指定を詳しく見ます。

49
00:03:43.013 --> 00:03:49.238
削除件数を省略すると、開始位置から末尾までの要素がすべて取り除かれます。

50
00:03:49.238 --> 00:03:54.857
スライドの例では、一から五までの配列で位置二から省略すると、三、四、五が戻り、

51
00:03:54.857 --> 00:04:00.476
元の配列は一と二だけになることを実機で確認しました。

52
00:04:00.476 --> 00:04:05.836
次に、開始位置に負の数を渡すと、末尾から数えた位置になります。

53
00:04:05.836 --> 00:04:11.714
マイナス一は最後の要素を指すので、一、二、三から三が取り除かれます。

54
00:04:11.714 --> 00:04:16.901
末尾に近い要素を扱うとき、長さを数えなくてよいので便利です。

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

56
00:04:22.088 --> 00:04:25.083
途中へ複数の要素を挿入する実例を見ます。

57
00:04:25.083 --> 00:04:31.372
エー、ビー、シーという配列の位置一へ、削除件数ゼロでエックスとワイの二つを渡します。

58
00:04:31.372 --> 00:04:37.361
実行すると、エー、エックス、ワイ、ビー、シーという順になり、実機で確認しました。

59
00:04:37.361 --> 00:04:41.704
このとき削除はしていないので、戻り値は空の配列になります。

60
00:04:41.704 --> 00:04:45.297
戻り値が空でも失敗ではない、という点が大切です。

61
00:04:45.297 --> 00:04:48.442
追加する要素は、渡した順番のまま並びます。

62
00:04:48.442 --> 00:04:55.629
メニューの途中へ項目を差し込む、行の途中へ列を加える、といった編集で、この形がそのまま使えます。

63
00:04:55.629 --> 00:05:01.020
挿入位置を一つずらすだけで結果が変わるので、実行前に予測してみましょう。

64
00:05:01.020 --> 00:05:03.464
元の配列への影響を確認します。

65
00:05:03.464 --> 00:05:07.538
スプライスは、元の配列を直接変更するメソッドです。

66
00:05:07.538 --> 00:05:16.663
スライドの例では、ジーという配列をエイチという別の変数でも参照し、ジーに対してスプライスで先頭を取り除きました。

67
00:05:16.663 --> 00:05:23.507
すると、ジーだけでなくエイチの方も、二十と三十だけになったことを実機で確認しました。

68
00:05:23.507 --> 00:05:26.114
同じ配列を共有しているためです。

69
00:05:26.114 --> 00:05:31.002
記事でも、状態更新ではコピーを検討する、と注意されています。

70
00:05:31.002 --> 00:05:36.706
元の並びや内容が後でも必要なら、先にコピーを作ってから編集しましょう。

71
00:05:36.706 --> 00:05:41.920
この性質を知らずに使うと、別の画面や処理で思わぬ変化が起きます。

72
00:05:41.920 --> 00:05:45.206
名前が似ているスライスとの違いを整理します。

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

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

75
00:05:57.904 --> 00:06:01.788
一方、スプライスは元を編集し、削除した分を返します。

76
00:06:01.788 --> 00:06:06.717
名前は一文字違いでも、元の配列を変えるかどうかが決定的に違います。

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

78
00:06:13.738 --> 00:06:18.668
間違えやすい組み合わせなので、この機会に区別を固めておきましょう。

79
00:06:18.668 --> 00:06:20.576
注意点を三つ確認します。

80
00:06:20.576 --> 00:06:23.915
まず、戻り値は変更後の全体ではありません。

81
00:06:23.915 --> 00:06:26.141
削除した要素だけの配列です。

82
00:06:26.141 --> 00:06:31.070
変更後の内容を知りたい場合は、元の配列の方を確認してください。

83
00:06:31.070 --> 00:06:34.091
次に、開始位置が長さを超えた場合です。

84
00:06:34.091 --> 00:06:39.736
スライドの例では、長さ三の配列に位置十を指定すると、末尾への追加として扱われ、

85
00:06:39.736 --> 00:06:45.381
ゼットが最後に加わり、戻り値は空になることを実機で確認しました。

86
00:06:45.381 --> 00:06:51.105
エラーにはならないので、意図しない追加に気づきにくい点に注意が必要です。

87
00:06:51.105 --> 00:06:56.193
そして、削除件数が残りの要素数を超えても、末尾までで止まります。

88
00:06:56.193 --> 00:07:00.168
境界では、実行前に結果を予測する習慣が役立ちます。

89
00:07:00.168 --> 00:07:01.176
まとめです。

90
00:07:01.176 --> 00:07:07.305
スプライスは、開始位置と削除件数を指定して、配列の途中で削除、挿入、置き換えを行うメソッドで、

91
00:07:07.305 --> 00:07:13.435
削除した要素の配列を返し、元の配列自体を変更します。

92
00:07:13.435 --> 00:07:15.114
ポイントは三つです。

93
00:07:15.114 --> 00:07:21.160
まず、削除件数ゼロで挿入、追加なしで削除、その両方で置き換えになること。

94
00:07:21.160 --> 00:07:28.213
次に、開始位置は負の数で末尾から数えられ、削除件数を省略すると末尾まで削除すること。

95
00:07:28.213 --> 00:07:34.427
そして、元の配列が直接変わるので、残したい場合はコピーを検討することです。

96
00:07:34.427 --> 00:07:42.152
まずは記事の基本例と境界例を実行し、戻り値と変更後の配列を予測してから確かめてみてください。

97
00:07:42.152 --> 00:07:43.663
お疲れさまでした。

98
00:07:43.663 --> 00:07:51.556
開始位置と削除件数と追加要素、この三つを言葉で説明できるようになれば、理解が深まった証拠です。