WEBVTT

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

2
00:00:00.956 --> 00:00:04.460
ジャバスクリプト入門、実践連載の第二回です。

3
00:00:04.460 --> 00:00:08.761
今回のテーマは、関数、スコープ、そしてモジュールです。

4
00:00:08.761 --> 00:00:13.300
前回学んだ計算や判定を、その都度書き直すのではなく、名前の付いた部品としてまとめ、

5
00:00:13.300 --> 00:00:17.840
何度でも呼び出せるようにします。

6
00:00:17.840 --> 00:00:24.849
具体的には、点数の配列から平均を求める関数と、呼ぶたびに数が増えるカウンターを作ります。

7
00:00:24.849 --> 00:00:30.344
後半では、変数が使える範囲であるスコープと、外側の値を覚え続けるクロージャー、

8
00:00:30.344 --> 00:00:35.839
そしてファイルを分けるエクスポートとインポートまで進みます。

9
00:00:35.839 --> 00:00:40.777
処理を再利用する考え方は、この先のすべての回の土台になります。

10
00:00:40.777 --> 00:00:47.308
一度作った部品は、テストもしやすく、間違いを見つけやすくなるという利点もあります。

11
00:00:47.308 --> 00:00:49.080
まず関数の基本形です。

12
00:00:49.080 --> 00:00:55.202
関数は、材料を受け取り、処理をして、結果を返す小さな部品だと考えてください。

13
00:00:55.202 --> 00:00:59.068
受け取る材料を引数、返す結果を戻り値と呼びます。

14
00:00:59.068 --> 00:01:01.485
結果を返す合図がリターンです。

15
00:01:01.485 --> 00:01:09.701
画面の例では、名前を受け取り、あいさつの文章を作って返し、呼び出し側がそれを受け取って表示しています。

16
00:01:09.701 --> 00:01:17.273
ここで大切なのは、コンソール・ログは表示するだけの処理で、値を返す処理ではないという区別です。

17
00:01:17.273 --> 00:01:24.200
計算と表示を分けておくと、同じ計算を別の画面や別のファイルからもそのまま使い回せます。

18
00:01:24.200 --> 00:01:29.770
記事の中心となる例、平均を求める関数アベレージを見ます。

19
00:01:29.770 --> 00:01:31.958
引数は点数の配列です。

20
00:01:31.958 --> 00:01:40.314
まず合計をゼロから始め、フォー・オブで要素を一つずつ取り出して合計に加えていきます。

21
00:01:40.314 --> 00:01:45.287
最後に、合計を要素の数で割った値をリターンします。

22
00:01:45.287 --> 00:01:50.459
八十、六十五、九十二の三科目なら、平均は七十九です。

23
00:01:50.459 --> 00:01:57.621
途中の合計を入れる変数トータルは、この関数の中だけで使う作業用の値です。

24
00:01:57.621 --> 00:02:02.594
外に公開するのは、戻り値である平均だけに絞ります。

25
00:02:02.594 --> 00:02:11.148
こうして、関数の内側と外側をはっきり分けることが、読みやすいコードの第一歩になります。

26
00:02:11.148 --> 00:02:16.223
関数を部品として安心して使うには、入り口での確認が欠かせません。

27
00:02:16.223 --> 00:02:22.566
平均の関数では、まず渡されたものが配列かどうか、そして空ではないかを確認します。

28
00:02:22.566 --> 00:02:26.054
空の配列では割る数がゼロになってしまいます。

29
00:02:26.054 --> 00:02:33.349
また、要素の中に文字列や無限大のような値が混ざっていると、計算結果が静かにおかしくなります。

30
00:02:33.349 --> 00:02:39.217
そこで、有限な数値でない要素があれば、タイプエラーを投げて処理を止めます。

31
00:02:39.217 --> 00:02:46.670
練習として、要素がゼロ一つだけの場合や、文字列の九十が混ざった場合を自分で試してみてください。

32
00:02:46.670 --> 00:02:49.841
入力の境界を確かめる習慣が身に付きます。

33
00:02:49.841 --> 00:02:57.136
エラーの文は、どこで何がおかしかったかを知らせる手がかりとして、そのまま残しておきましょう。

34
00:02:57.136 --> 00:02:58.722
次にアロー関数です。

35
00:02:58.722 --> 00:03:04.750
矢印のような記号を使って関数を短く書く方法で、短い変換処理によく使われます。

36
00:03:04.750 --> 00:03:13.316
記事の例、フォーマットアベレージは、数値を受け取り、小数第一位までそろえた平均という文章に変換する関数です。

37
00:03:13.316 --> 00:03:20.612
本体が一つの式だけなら、その式の結果がそのまま戻り値になり、リターンを書く必要はありません。

38
00:03:20.612 --> 00:03:27.274
反対に、波括弧で本体を書いた場合は、返したい値を明示的にリターンする必要があります。

39
00:03:27.274 --> 00:03:32.192
この省略できる条件を混同すると、値が返らないという初歩的なミスにつながるので、

40
00:03:32.192 --> 00:03:37.109
書き方と戻り値の関係をセットで覚えてください。

41
00:03:37.109 --> 00:03:40.978
ここからはスコープ、つまり変数が使える範囲の話です。

42
00:03:40.978 --> 00:03:47.227
平均の関数のトータルのように、関数の中で宣言した変数は、その関数の中だけで使います。

43
00:03:47.227 --> 00:03:51.542
処理の途中の値を全体で共有する変数に置いてしまうと、どこで書き換えられたか分からなくなり、

44
00:03:51.542 --> 00:03:55.857
思わぬ事故の元になります。

45
00:03:55.857 --> 00:03:59.652
レットとコンストで宣言した変数には、波括弧で囲まれたブロックが範囲になる、

46
00:03:59.652 --> 00:04:03.446
ブロックスコープがあります。

47
00:04:03.446 --> 00:04:08.356
条件分岐や繰り返しの中で作った変数は、その外からは参照できません。

48
00:04:08.356 --> 00:04:13.862
画面のように、内側と外側で同じ名前を使っても、別々の変数として扱われます。

49
00:04:13.862 --> 00:04:18.177
範囲を狭く保つほど、プログラム全体の見通しは良くなります。

50
00:04:18.177 --> 00:04:21.225
スコープの応用がクロージャーです。

51
00:04:21.225 --> 00:04:27.320
関数の中で作った別の関数は、外側の変数を参照し続けることができます。

52
00:04:27.320 --> 00:04:35.745
外側の処理が一度終わったあとも、その変数は消えずに残り、内側の関数だけが触れる状態になります。

53
00:04:35.745 --> 00:04:39.331
たとえるなら、専用の金庫付きの道具です。

54
00:04:39.331 --> 00:04:45.964
値は金庫の中に閉じ込められ、外から直接のぞいたり書き換えたりはできません。

55
00:04:45.964 --> 00:04:49.729
決められた操作を通してだけ数が変わります。

56
00:04:49.729 --> 00:04:56.182
この仕組みを使うと、状態を持つ小さな部品を、安全に作れるようになります。

57
00:04:56.182 --> 00:05:01.023
次の画面で、実際に数えるカウンターを作って確かめます。

58
00:05:01.023 --> 00:05:06.580
配列やオブジェクトの処理でも、この考え方は繰り返し登場します。

59
00:05:06.580 --> 00:05:10.016
クロージャーの実例、クリエイトカウンターです。

60
00:05:10.016 --> 00:05:15.842
この関数は、初期値を受け取り、呼ぶたびに一ずつ増える別の関数を作って返します。

61
00:05:15.842 --> 00:05:22.713
内側の関数は、外側の変数カウントを覚え続けているので、呼ぶごとに前回の続きから数えられます。

62
00:05:22.713 --> 00:05:29.137
ポイントは、クリエイトカウンターを呼ぶたびに、新しいカウントが別々に生まれることです。

63
00:05:29.137 --> 00:05:34.365
一つ目のカウンターを二回呼んでも、二つ目のカウンターには影響しません。

64
00:05:34.365 --> 00:05:39.145
初期値を十にして作った二つ目は、最初の呼び出しで十一を返します。

65
00:05:39.145 --> 00:05:43.328
独立した状態を複数持てることが、クロージャーの強みです。

66
00:05:43.328 --> 00:05:44.761
最後にモジュールです。

67
00:05:44.761 --> 00:05:51.666
これまでの関数を、スタッツ・エムジェーエスというファイルにまとめ、エクスポートという印を付けて公開します。

68
00:05:51.666 --> 00:05:58.181
使う側のメイン・エムジェーエスでは、インポートの一文で、必要な関数だけを名前を指定して読み込みます。

69
00:05:58.181 --> 00:06:03.001
読み込む場所を示す相対パスには、拡張子まで含めるのがこの形式の決まりです。

70
00:06:03.001 --> 00:06:07.040
実行は、ターミナルでノード、メイン・エムジェーエスと打ちます。

71
00:06:07.040 --> 00:06:13.555
定義側のファイルには表示処理を置いていないので、読み込んだだけで勝手に例が動き出すことはありません。

72
00:06:13.555 --> 00:06:17.333
役割ごとにファイルを分けることで、再利用しやすくなります。

73
00:06:17.333 --> 00:06:21.372
大きなプログラムほど、この分割の効果がはっきりと現れてきます。

74
00:06:21.372 --> 00:06:27.246
アロー関数と通常の関数は、見た目だけでなく、ディスという値の扱いも違います。

75
00:06:27.246 --> 00:06:32.348
アロー関数には独自のディスがなく、外側のディスをそのまま使います。

76
00:06:32.348 --> 00:06:37.913
一方、通常の関数のディスは、どのように呼び出されたかによって変わります。

77
00:06:37.913 --> 00:06:42.241
今の段階では、短い変換にはアロー関数、名前のあるまとまった処理には通常の関数、

78
00:06:42.241 --> 00:06:46.570
という使い分けから始めてください。

79
00:06:46.570 --> 00:06:54.145
ディスの詳しい違いは、後のクラス入門の回で、メソッドとコールバックの違いと合わせて改めて扱います。

80
00:06:54.145 --> 00:06:59.091
ここでは、同じものではない、という一点を押さえておけば十分です。

81
00:06:59.091 --> 00:07:05.584
迷ったときは、まず通常の関数で書き、短くできる場面でアロー関数を検討すると安全です。

82
00:07:05.584 --> 00:07:06.557
まとめです。

83
00:07:06.557 --> 00:07:11.424
関数は引数を受け取り、リターンで結果を返す再利用の部品です。

84
00:07:11.424 --> 00:07:16.777
計算と表示を分け、入り口で入力を確認すると、安心して使い回せます。

85
00:07:16.777 --> 00:07:20.427
スコープは変数が使える範囲で、関数やブロックの内側に値を閉じ込めることで、

86
00:07:20.427 --> 00:07:24.077
事故を防ぎます。

87
00:07:24.077 --> 00:07:30.241
クロージャーを使えば、独立した状態を持つカウンターのような部品も作れました。

88
00:07:30.241 --> 00:07:36.081
そしてモジュールでファイルを分け、エクスポートとインポートでつなぎます。

89
00:07:36.081 --> 00:07:42.245
練習として、カウンターを三つ作り、値が混ざらないことを確かめてみてください。

90
00:07:42.245 --> 00:07:46.463
次回は配列とオブジェクトで、データの処理を学びます。

91
00:07:46.463 --> 00:07:48.572
これで第二回を終わります。