WEBVTT

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

2
00:00:01.028 --> 00:00:03.939
今回はアレイ・フロムを紹介します。

3
00:00:03.939 --> 00:00:11.304
これは、反復可能な値や配列風オブジェクトから、新しい配列を作るための静的メソッドです。

4
00:00:11.304 --> 00:00:16.014
文字列やセットのように順番に取り出せる値も、長さを持つだけのオブジェクトも、

5
00:00:16.014 --> 00:00:20.724
どちらも本物の配列へ変換できます。

6
00:00:20.724 --> 00:00:26.548
この動画では、書き方と三つの引数、戻り値、記事の基本例である長さ指定による連番生成、

7
00:00:26.548 --> 00:00:32.371
文字列や配列風オブジェクトからの変換、変換関数との組み合わせ、そして絵文字に関する境界例まで、

8
00:00:32.371 --> 00:00:38.194
実行結果と一緒に学びます。

9
00:00:38.194 --> 00:00:47.272
配列のメソッドを使いたいのに、持っているデータが配列ではない、という場面で最初に思い出したいメソッドです。

10
00:00:47.272 --> 00:00:54.294
変換後の配列には、マップやフィルターといった配列専用のメソッドをそのまま使えます。

11
00:00:54.294 --> 00:01:00.460
つまり、形をそろえることが、後の処理を素直に書くための第一歩になります。

12
00:01:00.460 --> 00:01:02.224
まず動作環境を確認します。

13
00:01:02.224 --> 00:01:07.516
アレイ・フロムは、エスシックスと呼ばれる世代で導入された基本的なメソッドです。

14
00:01:07.516 --> 00:01:11.994
記事の互換性情報では、クロームでは四十五以降、エッジでは十二以降、ファイアーフォックスでは三十二以降、

15
00:01:11.994 --> 00:01:16.472
サファリでは九以降で使えます。

16
00:01:16.472 --> 00:01:20.407
ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。

17
00:01:20.407 --> 00:01:24.478
これらの数値はエムディーエヌの互換性データに基づく目安ですが、対応範囲は広く、

18
00:01:24.478 --> 00:01:28.549
現在の環境で使えない場面はまずありません。

19
00:01:28.549 --> 00:01:34.520
追加の読み込みは不要で、アレイに最初から関数として備わっていることを実機で確認済みです。

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

21
00:01:36.254 --> 00:01:43.190
大文字で始まるアレイに続けて、フロムと書き、カッコの中に変換したい値を渡します。

22
00:01:43.190 --> 00:01:50.647
個々の配列から呼び出すのではなく、アレイという型そのものに付いている静的メソッドです。

23
00:01:50.647 --> 00:01:56.196
引数は三つありますが、必須なのは第一引数の変換したい値だけです。

24
00:01:56.196 --> 00:02:00.704
第二引数には各要素を加工する変換関数、第三引数にはその関数の中で使うディスを指定でき、

25
00:02:00.704 --> 00:02:05.213
どちらも任意です。

26
00:02:05.213 --> 00:02:09.201
戻り値は新しい配列で、元の値は変更されません。

27
00:02:09.201 --> 00:02:17.004
スライドの例では、文字列エー・ビー・シーが一文字ずつの配列になることを実機で確認しました。

28
00:02:17.004 --> 00:02:18.854
記事の基本例を見ます。

29
00:02:18.854 --> 00:02:27.262
レングスが四という配列風オブジェクトを渡し、変換関数でインデックスに一を足した値を要素にしています。

30
00:02:27.262 --> 00:02:32.139
アンダースコアは、元の要素を使わないことを示す書き方です。

31
00:02:32.139 --> 00:02:37.521
もとの要素は値が入っていないため、アンディファインドになります。

32
00:02:37.521 --> 00:02:42.818
実行すると、一、二、三、四という連番の配列が文字列化されて表示され、記事の期待出力と一致し、

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

34
00:02:48.115 --> 00:02:53.497
記事が説明するように、これはページ番号の連番を生成する場面です。

35
00:02:53.497 --> 00:02:59.215
長さだけが決まっていて、中身を順番に作りたいときに便利な使い方です。

36
00:02:59.215 --> 00:03:08.632
ページ番号以外にも、カレンダーの日付や、表の行番号のように、決まった長さの並びを機械的に作る場面で応用できます。

37
00:03:08.632 --> 00:03:11.093
文字列からの変換を確認します。

38
00:03:11.093 --> 00:03:18.806
文字列は反復可能な値の代表例で、アレイ・フロムに渡すと、一文字ずつに分解された配列が返ります。

39
00:03:18.806 --> 00:03:25.534
ジャバスクリプトという十文字の文字列なら、長さは十になることを実機で確認しました。

40
00:03:25.534 --> 00:03:29.800
ここで大切なのは、後で見る境界例にもつながる点です。

41
00:03:29.800 --> 00:03:34.641
アレイ・フロムは文字列をユニコードのコードポイントという単位で扱うため、

42
00:03:34.641 --> 00:03:39.482
絵文字のような文字も一つの要素として数えます。

43
00:03:39.482 --> 00:03:49.820
空文字で分割するスプリットとは扱いが異なる場合があるので、文字を数える目的ではアレイ・フロムのほうが意図に合うことが多いです。

44
00:03:49.820 --> 00:03:52.666
配列風オブジェクトからの変換を見ます。

45
00:03:52.666 --> 00:04:00.606
ゼロから始まる添字と、レングスという長さの項目を持つオブジェクトは、反復可能でなくても配列へ変換できます。

46
00:04:00.606 --> 00:04:07.496
スライドの例では、エーとビーの二要素が取り出され、結果が配列になることを実機で確認しました。

47
00:04:07.496 --> 00:04:11.167
関数のなかで使えるアーギュメンツや、ブラウザーで要素を集めたノードリストも、

48
00:04:11.167 --> 00:04:14.837
この配列風の仲間です。

49
00:04:14.837 --> 00:04:19.630
記事も、ドムのノードリストを配列へ変換する用途を紹介しています。

50
00:04:19.630 --> 00:04:26.821
添字が足りない場所はアンディファインドで埋まるため、長さと中身がそろっているか確認してください。

51
00:04:26.821 --> 00:04:31.614
配列風のままでは、マップやフィルターといった配列のメソッドを直接呼べないことが多いため、

52
00:04:31.614 --> 00:04:36.408
変換してから処理するのが定番の流れです。

53
00:04:36.408 --> 00:04:38.710
第二引数の変換関数を見ます。

54
00:04:38.710 --> 00:04:45.286
変換関数は、要素とインデックスを受け取り、返した値が新しい配列の要素になります。

55
00:04:45.286 --> 00:04:53.671
スライドの例では、一、二、三の各要素を二倍にして、二、四、六という配列を作ることを実機で確認しました。

56
00:04:53.671 --> 00:04:58.275
基本例の連番生成も、実はこの変換関数を使った応用でした。

57
00:04:58.275 --> 00:05:05.509
いったん配列を作ってからマップで加工する、という二段階を一度で済ませられる点が利点です。

58
00:05:05.509 --> 00:05:10.112
変換関数を使わない場合は要素がそのまま入り、使う場合は加工後の値が入る、

59
00:05:10.112 --> 00:05:14.716
という違いを意識して使い分けてください。

60
00:05:14.716 --> 00:05:18.885
反復可能な値の例として、セットからの変換を紹介します。

61
00:05:18.885 --> 00:05:26.143
セットは重複しない値だけを保持する仕組みで、一、二、二、三を入れても、二は一度しか残りません。

62
00:05:26.143 --> 00:05:33.710
これをアレイ・フロムで配列に戻すと、一、二、三という重複のない配列になることを実機で確認しました。

63
00:05:33.710 --> 00:05:38.652
重複を取り除きたいときに、セットを経由する方法はよく使われます。

64
00:05:38.652 --> 00:05:43.439
また、マップから変換すると、キーと値の組が要素として並びます。

65
00:05:43.439 --> 00:05:49.616
反復可能な値であれば種類を問わず扱える点が、アレイ・フロムの守備範囲の広さです。

66
00:05:49.616 --> 00:05:51.792
記事の境界例を確認します。

67
00:05:51.792 --> 00:05:55.975
エーという文字と、笑顔の絵文字を並べた文字列を、アレイ・フロムで変換し、

68
00:05:55.975 --> 00:06:00.159
その長さを調べるコードです。

69
00:06:00.159 --> 00:06:06.519
実行すると長さは二になり、記事の期待出力と一致し、実機結果とも一致しました。

70
00:06:06.519 --> 00:06:13.882
スライドでは絵文字をユニコードエスケープ表記で書いていますが、同じ文字列を表しています。

71
00:06:13.882 --> 00:06:20.074
記事が注意するように、文字列はユニコードのコードポイント単位で扱われます。

72
00:06:20.074 --> 00:06:26.099
ただし、複数のコードポイントで構成される見た目の一文字とは一致しない場合があるため、

73
00:06:26.099 --> 00:06:32.124
表示上の文字数と完全に同じとは限らない点に注意してください。

74
00:06:32.124 --> 00:06:33.998
注意点を三つ確認します。

75
00:06:33.998 --> 00:06:40.243
まず、変換関数なしで長さだけを渡すと、中身はすべてアンディファインドになります。

76
00:06:40.243 --> 00:06:46.019
連番が欲しい場合は、基本例のように変換関数でインデックスを使ってください。

77
00:06:46.019 --> 00:06:51.796
次に、アレイ・フロムで作った配列は新しい配列ですが、入れ子になったオブジェクトまでは複製されず、

78
00:06:51.796 --> 00:06:57.573
元のものと参照が共有される、いわゆる浅いコピーです。

79
00:06:57.573 --> 00:07:02.413
要素のオブジェクトを変更すると、元にも影響する場合があります。

80
00:07:02.413 --> 00:07:05.847
そして、変換元の値そのものは変更されません。

81
00:07:05.847 --> 00:07:11.936
新しい配列が返ることと、中身まで独立していることは別だ、と覚えておきましょう。

82
00:07:11.936 --> 00:07:21.304
また、第一引数にヌルやアンディファインドを渡すと例外になるため、値が入っていることを先に確かめる場面では注意が必要です。

83
00:07:21.304 --> 00:07:22.276
まとめです。

84
00:07:22.276 --> 00:07:29.567
アレイ・フロムは、反復可能な値や配列風オブジェクトから、新しい配列を作る静的メソッドです。

85
00:07:29.567 --> 00:07:31.187
ポイントは三つです。

86
00:07:31.187 --> 00:07:38.963
まず、第一引数には文字列やセットのような反復可能な値か、長さを持つ配列風オブジェクトを渡すこと。

87
00:07:38.963 --> 00:07:45.444
次に、第二引数の変換関数を使うと、連番の生成や値の加工を変換と同時にできること。

88
00:07:45.444 --> 00:07:52.249
そして、文字列はコードポイント単位で扱われ、作られる配列は浅いコピーであることです。

89
00:07:52.249 --> 00:08:00.349
まずは記事の基本例と境界例を実行し、長さや入力を一つ変えて、結果を予測してから確かめてみてください。

90
00:08:00.349 --> 00:08:01.807
お疲れさまでした。

91
00:08:01.807 --> 00:08:10.556
データの形がそろっていないと感じたら、まずアレイ・フロムで配列に直す、という入口の役割を思い出してください。