WEBVTT

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

2
00:00:00.934 --> 00:00:02.957
今回はソートを紹介します。

3
00:00:02.957 --> 00:00:08.403
これは、配列の要素を並べ替えるための、配列のインスタンスメソッドです。

4
00:00:08.403 --> 00:00:15.249
ソートは並べ替えという意味で、数値を小さい順にしたり、文字列を辞書の順にしたりできます。

5
00:00:15.249 --> 00:00:20.229
たとえば、商品の価格を安い順に表示する、という場面で役立ちます。

6
00:00:20.229 --> 00:00:25.468
この動画では、書き方と比較関数の仕組み、戻り値と元の配列への影響、記事の基本例、

7
00:00:25.468 --> 00:00:30.706
降順や文字列の並べ替え、省略したときに起きる落とし穴、オブジェクトの並べ替え、

8
00:00:30.706 --> 00:00:35.945
そして注意点まで、実行結果と一緒に学びます。

9
00:00:35.945 --> 00:00:40.302
元の配列自体が変わる点が、このメソッドの大きな特徴です。

10
00:00:40.302 --> 00:00:44.659
並べ替えの基準を自分で決められる点が、柔軟さの理由です。

11
00:00:44.659 --> 00:00:46.546
まず動作環境を確認します。

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

13
00:00:51.045 --> 00:00:55.544
サファリでは一以降で使えます。

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

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

16
00:01:04.253 --> 00:01:09.333
ソートは古くからある基本的な機能で、現在の主要な環境では広く使えます。

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

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

19
00:01:20.218 --> 00:01:24.427
長く使われている機能なので、学習資料も豊富に見つかります。

20
00:01:24.427 --> 00:01:26.147
書き方を確認します。

21
00:01:26.147 --> 00:01:31.650
対象の配列に続けてソートと書き、カッコの中に比較関数を渡します。

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

23
00:01:38.357 --> 00:01:43.430
比較関数は、二つの要素エーとビーを受け取り、負の数ならエーを先に、正の数ならビーを先に、

24
00:01:43.430 --> 00:01:48.503
ゼロなら同順位として扱います。

25
00:01:48.503 --> 00:01:52.286
戻り値は、並べ替えられた元配列そのものです。

26
00:01:52.286 --> 00:01:56.242
新しい配列が作られるわけではない点が重要です。

27
00:01:56.242 --> 00:02:03.808
スライドの例では、三、一、二が小さい順になり、一、二、三になることを実機で確認しました。

28
00:02:03.808 --> 00:02:06.732
まずはこの基本形を押さえましょう。

29
00:02:06.732 --> 00:02:11.375
省略した場合は、後で学ぶ既定の比較の仕方が使われます。

30
00:02:11.375 --> 00:02:13.195
記事の基本例を見ます。

31
00:02:13.195 --> 00:02:17.498
価格の配列は、百、二十、三という順序になっています。

32
00:02:17.498 --> 00:02:24.946
スプレッド構文でコピーを作り、そのコピーに、エー引くビーという比較関数でソートを呼びます。

33
00:02:24.946 --> 00:02:29.497
実行すると、三、二十、百という昇順の結果が表示され、記事の期待出力と一致し、

34
00:02:29.497 --> 00:02:34.048
ノードの実機結果とも一致しました。

35
00:02:34.048 --> 00:02:42.158
ポイントは、並べ替えたのがコピーの方なので、元の価格の配列は百、二十、三のまま変わらないことです。

36
00:02:42.158 --> 00:02:50.433
元の並びを残したい場合は、このようにコピーしてから並べ替える、という書き方が記事でも使われています。

37
00:02:50.433 --> 00:02:55.563
価格のように、数値の順序が意味を持つ場面で欠かせない処理です。

38
00:02:55.563 --> 00:02:58.405
比較関数の仕組みを詳しく見ます。

39
00:02:58.405 --> 00:03:06.043
エー引くビーという式は、エーの方が小さいとき負の数になり、ソートはエーを先に置きます。

40
00:03:06.043 --> 00:03:11.728
反対に、エーの方が大きいとき正の数になり、ビーが先に置かれます。

41
00:03:11.728 --> 00:03:15.636
等しいときはゼロで、同順位として扱われます。

42
00:03:15.636 --> 00:03:20.432
この単純な引き算が、数値の昇順を作る定番の書き方です。

43
00:03:20.432 --> 00:03:27.004
スライドの例では、五、二、八が、二、五、八になることを実機で確認しました。

44
00:03:27.004 --> 00:03:35.175
比較関数は要素のペアごとに何度も呼ばれ、その都度、一貫した負、ゼロ、正を返す必要があります。

45
00:03:35.175 --> 00:03:38.195
ここがソートを使いこなす核心です。

46
00:03:38.195 --> 00:03:42.991
呼ばれる順序や回数は、エンジンが自動で決めてくれます。

47
00:03:42.991 --> 00:03:45.776
並べ方のバリエーションを見ます。

48
00:03:45.776 --> 00:03:46.995
まず降順です。

49
00:03:46.995 --> 00:03:52.391
比較関数の引き算をビー引くエーに変えると、大きい順になります。

50
00:03:52.391 --> 00:03:58.833
スライドの例では、三、一、二が、三、二、一になることを実機で確認しました。

51
00:03:58.833 --> 00:04:00.225
次に文字列です。

52
00:04:00.225 --> 00:04:05.970
バナナ、アップル、チェリーという配列を、比較関数なしでソートすると、アップル、

53
00:04:05.970 --> 00:04:11.715
バナナ、チェリーという辞書順になることを確認しました。

54
00:04:11.715 --> 00:04:19.723
文字列の並べ替えは省略時の動きと相性がよい一方、数値では次の境界例で見る落とし穴があります。

55
00:04:19.723 --> 00:04:24.423
何を、どの順にしたいかで、比較関数の要否が変わります。

56
00:04:24.423 --> 00:04:29.123
名前の一覧や日付の一覧でも、考え方はまったく同じです。

57
00:04:29.123 --> 00:04:31.394
記事の境界例を確認します。

58
00:04:31.394 --> 00:04:36.811
百、二十、三という配列を、比較関数なしでソートするコードです。

59
00:04:36.811 --> 00:04:44.848
実行すると、百、二十、三という結果になり、記事の期待出力と一致し、実機結果とも一致しました。

60
00:04:44.848 --> 00:04:52.885
数値の順に並んでいないように見えますが、これは省略時に要素が文字列として比較されるためです。

61
00:04:52.885 --> 00:04:57.777
文字列としては、百は二十より前、二十は三より前に来ます。

62
00:04:57.777 --> 00:05:04.940
もう一つの例でも、十、九、二が、十、二、九という文字列順になることを確認しました。

63
00:05:04.940 --> 00:05:10.356
数値を並べ替えるときは、比較関数を必ず書く、と覚えてください。

64
00:05:10.356 --> 00:05:15.423
思った通りに並ばないときは、まずこの仕様を疑ってください。

65
00:05:15.423 --> 00:05:18.788
商品を価格順に並べる実例を見ます。

66
00:05:18.788 --> 00:05:24.926
ペン、ノート、バッグという商品が、それぞれ価格を持っています。

67
00:05:24.926 --> 00:05:31.855
コピーを作り、比較関数の中で各商品の価格同士を引き算してソートします。

68
00:05:31.855 --> 00:05:42.347
並べ替えた後に名前だけを取り出すと、ノート、バッグ、ペンという価格の安い順になることを実機で確認しました。

69
00:05:42.347 --> 00:05:50.266
オブジェクトの配列では、どの項目で比べるかを比較関数の中に書くのがポイントです。

70
00:05:50.266 --> 00:05:58.580
価格ではなく名前や日付で比べたい場合も、比べる項目を変えるだけで、同じ形が使えます。

71
00:05:58.580 --> 00:06:02.936
実際の画面表示の並び替えで、よく使う形です。

72
00:06:02.936 --> 00:06:08.083
並べ替えた結果は、そのまま画面の一覧表示に使えます。

73
00:06:08.083 --> 00:06:10.440
元の配列への影響を確認します。

74
00:06:10.440 --> 00:06:15.940
ソートは、ほかの多くの配列メソッドと違い、元の配列を直接並べ替えます。

75
00:06:15.940 --> 00:06:19.396
戻り値も、元の配列と同じものを指しています。

76
00:06:19.396 --> 00:06:25.289
スライドの例では、スプレッド構文でコピーを作ってから並べ替えたので、結果は一、

77
00:06:25.289 --> 00:06:31.181
二、三になり、元のデータは三、一、二のまま残ることを実機で確認しました。

78
00:06:31.181 --> 00:06:35.895
もしコピーせずにそのままソートすれば、元の順序は失われます。

79
00:06:35.895 --> 00:06:39.981
元の並びが後でも必要かどうかを先に考え、必要ならコピーしてから並べ替える、

80
00:06:39.981 --> 00:06:44.066
という手順を習慣にしましょう。

81
00:06:44.066 --> 00:06:48.623
この性質を知らずに使うと、思わぬ並びの消失につながります。

82
00:06:48.623 --> 00:06:50.578
注意点を三つ確認します。

83
00:06:50.578 --> 00:06:53.510
まず、アンディファインドの扱いです。

84
00:06:53.510 --> 00:06:59.212
アンディファインドの要素は比較関数へ渡されず、結果の末尾に置かれます。

85
00:06:59.212 --> 00:07:06.706
スライドの例では、並べ替え後の最後の要素がアンディファインドになることを実機で確認しました。

86
00:07:06.706 --> 00:07:12.408
次に、現在の仕様では、同じ順位になった要素同士の元の順序は保たれます。

87
00:07:12.408 --> 00:07:15.178
これを安定した並べ替えと言います。

88
00:07:15.178 --> 00:07:21.368
そして、比較関数が呼ばれるたびに矛盾した結果を返すと、並びは予測できません。

89
00:07:21.368 --> 00:07:25.115
負、ゼロ、正の意味を一貫させることが大切です。

90
00:07:25.115 --> 00:07:30.003
対象が配列でない値の場合は、呼び出し自体がエラーになります。

91
00:07:30.003 --> 00:07:35.379
空の要素についても、末尾に集まる扱いになる点を知っておきましょう。

92
00:07:35.379 --> 00:07:36.425
まとめです。

93
00:07:36.425 --> 00:07:43.569
ソートは、配列の要素を比較関数に従って並べ替え、元配列そのものを返すメソッドです。

94
00:07:43.569 --> 00:07:45.312
ポイントは三つです。

95
00:07:45.312 --> 00:07:51.933
まず、数値の昇順はエー引くビー、降順はビー引くエーという比較関数で作ること。

96
00:07:51.933 --> 00:07:58.904
次に、比較関数を省略すると文字列として比較されるため、数値の順にはならないこと。

97
00:07:58.904 --> 00:08:06.048
そして、元の配列が直接変わるので、残したい場合はコピーしてから並べ替えることです。

98
00:08:06.048 --> 00:08:14.413
まずは記事の基本例と境界例を実行し、比較関数ありとなしで結果を予測してから確かめてみてください。

99
00:08:14.413 --> 00:08:15.981
お疲れさまでした。

100
00:08:15.981 --> 00:08:21.731
価格や名前の一覧を並べ替えたい場面で、ソートを思い出してください。

101
00:08:21.731 --> 00:08:26.959
基準を言葉で説明できるようになれば、理解が深まった証拠です。