WEBVTT

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

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

3
00:00:04.611 --> 00:00:07.576
今回のテーマは、ドムとイベントです。

4
00:00:07.576 --> 00:00:13.504
前回まではデータを処理してきましたが、今回はその処理を画面とつなげます。

5
00:00:13.504 --> 00:00:18.362
入力欄にメモを書いて追加ボタンを押すと一覧に並び、不要になったメモは削除ボタンで消せる、

6
00:00:18.362 --> 00:00:23.221
そんな小さなアプリを作ります。

7
00:00:23.221 --> 00:00:27.667
使うのは、要素を取り出す、操作をきっかけに処理を動かす、新しい要素を作って並べる、

8
00:00:27.667 --> 00:00:32.114
という基本の流れだけです。

9
00:00:32.114 --> 00:00:34.419
フレームワークは使いません。

10
00:00:34.419 --> 00:00:40.348
素のジャバスクリプトで画面が動く仕組みを確かめることが、今回の目標です。

11
00:00:40.348 --> 00:00:43.660
まず土台になるエイチティーエムエルを用意します。

12
00:00:43.660 --> 00:00:45.178
中心は四つの部品です。

13
00:00:45.178 --> 00:00:51.663
入力を受け付けるフォーム、その中の入力欄、一覧を表示するリスト、そして件数を知らせる領域です。

14
00:00:51.663 --> 00:00:56.493
入力欄にはラベルを関連付け、どの欄に何を書くのかが分かるようにします。

15
00:00:56.493 --> 00:00:59.805
最大で百文字まで、という制限も入力欄に付けます。

16
00:00:59.805 --> 00:01:01.185
一覧は最初は空です。

17
00:01:01.185 --> 00:01:04.359
メモは後からジャバスクリプトが作って入れます。

18
00:01:04.359 --> 00:01:06.980
各部品にはアイディーを付けておきます。

19
00:01:06.980 --> 00:01:11.672
このアイディーが、次のステップで要素を見つけるための目印になります。

20
00:01:11.672 --> 00:01:15.536
見た目よりも、部品の役割と名前をそろえることが大切です。

21
00:01:15.536 --> 00:01:17.858
ここでドムとは何かを押さえます。

22
00:01:17.858 --> 00:01:23.373
ドムは、エイチティーエムエルをジャバスクリプトから扱える形に表したものです。

23
00:01:23.373 --> 00:01:27.364
ページ全体は、大きな見出し、フォーム、段落、リストといった要素が入れ子になった、

24
00:01:27.364 --> 00:01:31.355
木のような階層になっています。

25
00:01:31.355 --> 00:01:35.709
ブラウザーはこの構造をオブジェクトとして持ち、プログラムはそれを読んだり、

26
00:01:35.709 --> 00:01:40.063
書き換えたり、要素を足したり消したりできます。

27
00:01:40.063 --> 00:01:43.691
つまり、画面を直接触るのではなく、ドムという画面の写しを操作すると、表示が変わる、

28
00:01:43.691 --> 00:01:47.319
という仕組みです。

29
00:01:47.319 --> 00:01:53.124
このイメージがあると、要素の取得も追加も、木の一部を扱う作業として理解できます。

30
00:01:53.124 --> 00:01:58.170
ドムから部品を取り出すには、ゲットエレメントバイアイディーを使います。

31
00:01:58.170 --> 00:02:02.207
アイディーを文字列で渡すと、対応する要素が一つ返ります。

32
00:02:02.207 --> 00:02:08.983
フォーム、入力欄、リスト、件数の領域、この四つを取得して、それぞれ名前の付いた定数に入れます。

33
00:02:08.983 --> 00:02:11.578
ここで大事なのが、存在チェックです。

34
00:02:11.578 --> 00:02:16.625
アイディーを書き間違えると、結果はヌルという、値がない状態になります。

35
00:02:16.625 --> 00:02:23.978
そのまま使うとエラーになるので、どれか一つでも欠けたら、必要な要素がないというエラーを出して止めます。

36
00:02:23.978 --> 00:02:26.573
早い段階で失敗に気付ける書き方です。

37
00:02:26.573 --> 00:02:31.186
また、スクリプトをモジュールとして読み込むと、エイチティーエムエルの解析後に実行されるため、

38
00:02:31.186 --> 00:02:35.800
先に書いた要素を確実に取得できます。

39
00:02:35.800 --> 00:02:37.200
次にイベントです。

40
00:02:37.200 --> 00:02:44.354
イベントとは、クリックされた、送信された、文字が入力された、といった起きた出来事のことです。

41
00:02:44.354 --> 00:02:52.286
アドイベントリスナーを使うと、ある要素でその出来事が起きたときに、どの処理を実行するかを登録できます。

42
00:02:52.286 --> 00:02:58.352
今回はボタンのクリックではなく、フォームのサブミットというイベントを使います。

43
00:02:58.352 --> 00:03:05.350
これがポイントで、送信ボタンだけでなく、入力欄でエンターキーを押しても同じ処理が動きます。

44
00:03:05.350 --> 00:03:09.083
キーボードで操作する人にも自然な作りになります。

45
00:03:09.083 --> 00:03:12.505
イベントが起きるまでは処理は実行されません。

46
00:03:12.505 --> 00:03:17.948
登録しておいて、起きたら呼ばれる、という待ち受けの形を覚えてください。

47
00:03:17.948 --> 00:03:22.677
サブミットの処理の最初に、プリベントデフォルトを呼びます。

48
00:03:22.677 --> 00:03:30.014
これは、フォーム本来の動作である、サーバーへの送信と画面の移動を止めるための呼び出しです。

49
00:03:30.014 --> 00:03:35.721
これがないとページが再読み込みされ、せっかくのメモが消えてしまいます。

50
00:03:35.721 --> 00:03:38.656
次に、入力欄の値をトリムで整えます。

51
00:03:38.656 --> 00:03:41.754
トリムは前後の空白を取り除く処理です。

52
00:03:41.754 --> 00:03:49.907
整えた結果が空なら、空白だけのメモは追加できないと知らせ、入力欄へフォーカスを戻して処理を終えます。

53
00:03:49.907 --> 00:03:53.902
空欄そのものは入力欄の必須チェックが防ぎ、空白だけの入力はジャバスクリプト側で防ぐ、

54
00:03:53.902 --> 00:03:57.897
二段構えです。

55
00:03:57.897 --> 00:04:02.136
おかしな入力を一覧に入れる前に止めることが大切です。

56
00:04:02.136 --> 00:04:05.040
入力が正しければ、メモの一行を作ります。

57
00:04:05.040 --> 00:04:12.153
クリエイトエレメントで、リストの行、文字を入れる範囲、削除ボタンという三つの要素を新しく作ります。

58
00:04:12.153 --> 00:04:15.347
メモの文字は、テキストコンテンツに入れます。

59
00:04:15.347 --> 00:04:20.138
テキストコンテンツは、入力を文字としてそのまま表示する仕組みです。

60
00:04:20.138 --> 00:04:23.913
たとえば太字に見える記号付きの文字を入力しても、エイチティーエムエルとして解釈されず、

61
00:04:23.913 --> 00:04:27.687
文字のまま出ます。

62
00:04:27.687 --> 00:04:32.551
ユーザー入力をインナーエイチティーエムエルに入れると、意図しないエイチティーエムエルとして扱われる危険があるため、

63
00:04:32.551 --> 00:04:37.414
ここでは使いません。

64
00:04:37.414 --> 00:04:41.915
最後に、行の中に文字とボタンを入れ、その行を一覧へ追加します。

65
00:04:41.915 --> 00:04:46.996
追加後は入力欄を空にし、件数を更新して、フォーカスを入力欄へ戻します。

66
00:04:46.996 --> 00:04:50.743
削除の仕組みは、行を作るときに一緒に用意します。

67
00:04:50.743 --> 00:04:55.272
各行の削除ボタンに、クリックのイベントを登録しておきます。

68
00:04:55.272 --> 00:04:59.331
押されたら、そのボタンがある行自身を取り除くリムーブを呼び、件数を更新し、

69
00:04:59.331 --> 00:05:03.391
入力欄へフォーカスを戻します。

70
00:05:03.391 --> 00:05:06.826
件数は、一覧の子要素の数を数えて表示します。

71
00:05:06.826 --> 00:05:13.697
追加したときも削除したときも、同じ件数更新の関数を呼ぶことで、表示がずれるのを防ぎます。

72
00:05:13.697 --> 00:05:18.225
削除ボタンには、何を削除するのかが分かるラベルも付けます。

73
00:05:18.225 --> 00:05:25.095
ボタンの文字だけでは分かりにくい場合でも、読み上げなどで対象が伝わるようにする配慮です。

74
00:05:25.095 --> 00:05:30.248
一行ごとに自分の削除処理を持つ、という作りが今回の小さな工夫です。

75
00:05:30.248 --> 00:05:34.416
作ったページは、ローカルサーバー経由で開いて確認します。

76
00:05:34.416 --> 00:05:40.146
ファイルを直接開く方法では、モジュールの読み込みに制約が出ることがあるため、

77
00:05:40.146 --> 00:05:45.877
小さなサーバーを立てて、エイチティーティーピーで表示するのが記事の進め方です。

78
00:05:45.877 --> 00:05:47.514
確認の観点は四つです。

79
00:05:47.514 --> 00:05:50.491
メモを追加すると一覧と件数が増えること。

80
00:05:50.491 --> 00:05:53.766
削除すると件数が減ってフォーカスが戻ること。

81
00:05:53.766 --> 00:05:55.999
空白だけでは追加されないこと。

82
00:05:55.999 --> 00:06:02.102
そして、エイチティーエムエルに見える文字を入れても、文字として表示されることです。

83
00:06:02.102 --> 00:06:04.930
なお、再読み込みするとメモは消えます。

84
00:06:04.930 --> 00:06:11.628
今回の例には保存機能はなく、ドムの中だけに状態がある、という限界も一緒に確かめてください。

85
00:06:11.628 --> 00:06:16.334
この例は小さく分かりやすい反面、広げるときには注意があります。

86
00:06:16.334 --> 00:06:20.130
一つ目は、ドムを一覧の状態として使っている点です。

87
00:06:20.130 --> 00:06:25.747
並び替えや、保存して次回も表示するような機能が必要になったら、配列をデータの本体として持ち、

88
00:06:25.747 --> 00:06:31.364
その内容からドムを作り直す構成の方が扱いやすくなります。

89
00:06:31.364 --> 00:06:33.945
二つ目は、イベント登録の寿命です。

90
00:06:33.945 --> 00:06:38.803
今回はページが開いている間だけ使うので問題は小さいですが、画面を何度も作り直す構成では、

91
00:06:38.803 --> 00:06:43.661
同じ要素へ同じ処理を二重に登録しないこと、不要になった登録を解除すること、

92
00:06:43.661 --> 00:06:48.519
といった設計が必要になります。

93
00:06:48.519 --> 00:06:54.136
小さな例のままで済む条件と、設計を変える条件を分けて考えることが大切です。

94
00:06:54.136 --> 00:06:55.113
まとめです。

95
00:06:55.113 --> 00:07:00.567
今回の流れは、要素を取得する、イベントを登録する、入力を確かめる、要素を作って追加する、

96
00:07:00.567 --> 00:07:06.021
削除と件数更新を行う、という五つの手順でした。

97
00:07:06.021 --> 00:07:11.719
中でも、サブミットを使えばエンターキーでも動くこと、入力はテキストコンテンツで文字として表示すること、

98
00:07:11.719 --> 00:07:17.417
この二つは実務でもそのまま役立ちます。

99
00:07:17.417 --> 00:07:23.929
練習として、メモを三件追加して一件を削除し、件数が正しく変わること、空白だけの入力が断られること、

100
00:07:23.929 --> 00:07:30.441
記号入りの文字がそのまま表示されることを確かめてみてください。

101
00:07:30.441 --> 00:07:35.488
次回は非同期処理で、時間のかかる通信と失敗への備えを学びます。

102
00:07:35.488 --> 00:07:37.604
これで第四回を終わります。