WEBVTT

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

2
00:00:00.912 --> 00:00:04.863
エイチティーエムエル、シーエスエス入門、第九回です。

3
00:00:04.863 --> 00:00:08.358
今回のテーマは、ジャバスクリプトとの連携です。

4
00:00:08.358 --> 00:00:15.348
これまで、エイチティーエムエルで意味と入力部品を作り、シーエスエスで見た目を整えてきました。

5
00:00:15.348 --> 00:00:21.426
今回はそこへ、状態と操作を担当するジャバスクリプトを加えて、サイトを動かします。

6
00:00:21.426 --> 00:00:29.480
目標は、クリックのたびに画面全体を作り直すのではなく、必要な属性や文字だけを変更できるようになることです。

7
00:00:29.480 --> 00:00:30.696
作る機能は三つ。

8
00:00:30.696 --> 00:00:36.166
メニューの開閉、テーマの切り替え、そして送信しない入力確認フォームです。

9
00:00:36.166 --> 00:00:40.117
元になる記事は、エスイーの部屋の、エイチティーエムエル、シーエスエスとジャバスクリプトを連携する、

10
00:00:40.117 --> 00:00:44.068
です。

11
00:00:44.068 --> 00:00:47.519
まず、ジャバスクリプトのファイルを読み込みます。

12
00:00:47.519 --> 00:00:51.473
インデックス、エイチティーエムエルと同じフォルダーに、スクリプト、ドット、

13
00:00:51.473 --> 00:00:55.427
ジェイエスというファイルを作ります。

14
00:00:55.427 --> 00:00:59.309
そして、エイチティーエムエルのヘッドの中、シーエスエスの読み込み行の後ろに、

15
00:00:59.309 --> 00:01:03.191
スクリプトタグを一行追加します。

16
00:01:03.191 --> 00:01:05.923
画面に表示しているのが、その一行です。

17
00:01:05.923 --> 00:01:08.654
ポイントは、ディファーという属性です。

18
00:01:08.654 --> 00:01:14.693
これを付けた外部スクリプトは、エイチティーエムエルの解析が終わった後に実行されます。

19
00:01:14.693 --> 00:01:19.725
そのため、本文の中のボタンやフォームなどの要素を、確実に取得できます。

20
00:01:19.725 --> 00:01:24.614
なお、今回使うドキュメントや画面のイベントは、ブラウザーの機能です。

21
00:01:24.614 --> 00:01:28.496
ノードで実行しても、ページを操作することはできません。

22
00:01:28.496 --> 00:01:30.861
登場する二つの言葉を押さえます。

23
00:01:30.861 --> 00:01:32.339
一つ目は、ドムです。

24
00:01:32.339 --> 00:01:37.513
ブラウザーは、エイチティーエムエルを読み込むと、要素の構造を作ります。

25
00:01:37.513 --> 00:01:39.139
これをドムと呼びます。

26
00:01:39.139 --> 00:01:43.278
ジャバスクリプトは、このドムを通してページを操作します。

27
00:01:43.278 --> 00:01:44.904
二つ目がイベントです。

28
00:01:44.904 --> 00:01:49.117
クエリセレクターで要素を取得し、アドイベントリスナーで、クリックされたとき、

29
00:01:49.117 --> 00:01:53.330
入力されたときに呼ぶ処理を登録します。

30
00:01:53.330 --> 00:01:54.808
ここで注意点が一つ。

31
00:01:54.808 --> 00:02:00.130
指定したアイディーがエイチティーエムエル側にない場合、取得結果はヌル、つまり空っぽになり、

32
00:02:00.130 --> 00:02:05.451
そのまま操作しようとするとエラーで止まってしまいます。

33
00:02:05.451 --> 00:02:11.364
複数のファイルを組み合わせるときは、アイディーの綴りを一致させることが大切です。

34
00:02:11.364 --> 00:02:15.457
一つ目の機能は、スマートフォン向けメニューの開閉です。

35
00:02:15.457 --> 00:02:18.337
設計のポイントは、状態の置き場所です。

36
00:02:18.337 --> 00:02:24.703
開いているか閉じているかは、ボタンの、アリア、エクスパンデッドという属性に入れます。

37
00:02:24.703 --> 00:02:30.160
そして、表示するかしないかは、ナビゲーションのヒドゥン属性に反映します。

38
00:02:30.160 --> 00:02:37.285
さらに、マッチメディアという機能で、シーエスエスと同じ、四十八レムという幅の境界を確認します。

39
00:02:37.285 --> 00:02:42.060
ピーシー幅ではナビゲーションを常に表示し、スマートフォンで閉じたまま画面を広げても、

40
00:02:42.060 --> 00:02:46.835
リンクが消えたままにならないようにします。

41
00:02:46.835 --> 00:02:53.656
エスケープキーで閉じたときは、操作していたボタンへフォーカスを戻す、という配慮も入れます。

42
00:02:53.656 --> 00:02:56.036
メニューの中心部分のコードです。

43
00:02:56.036 --> 00:03:03.174
上の三行で、ボタンとナビゲーションを取得し、広い画面かどうかを判定するオブジェクトを用意します。

44
00:03:03.174 --> 00:03:06.000
中心は、セットメニューという関数です。

45
00:03:06.000 --> 00:03:10.164
開いているかどうかを真偽値で受け取り、ボタンの属性と表示する文字、ナビゲーションの非表示を、

46
00:03:10.164 --> 00:03:14.328
まとめて更新します。

47
00:03:14.328 --> 00:03:20.723
ボタンがクリックされたら、今の状態の反対をセットメニューへ渡して、開閉を切り替えます。

48
00:03:20.723 --> 00:03:25.780
状態の変更を一つの関数に集めておくことで、エスケープキーやリンクのクリックなど、

49
00:03:25.780 --> 00:03:30.836
ほかの閉じる操作からも、同じ処理を呼べるようになります。

50
00:03:30.836 --> 00:03:33.736
二つ目の機能は、テーマの切り替えです。

51
00:03:33.736 --> 00:03:42.437
エイチティーエムエル要素の、データテーマという属性を切り替えると、第八回で定義した色の変数が丸ごと入れ替わります。

52
00:03:42.437 --> 00:03:49.000
ボタン側では、アリア、プレストという属性で、ダークモードが選ばれている状態を表します。

53
00:03:49.000 --> 00:03:54.801
選んだテーマは、ローカルストレージに保存して、次に開いたときも引き継ぎます。

54
00:03:54.801 --> 00:03:59.838
ただし、ブラウザーの設定によっては、保存が使えない場合があります。

55
00:03:59.838 --> 00:04:03.654
そこで、保存の処理を、トライ、キャッチで囲みます。

56
00:04:03.654 --> 00:04:08.386
保存に失敗しても、切り替え自体は止まらないようにするためです。

57
00:04:08.386 --> 00:04:10.828
保存するのは配色の選択だけです。

58
00:04:10.828 --> 00:04:13.728
名前やフォームの入力値は保存しません。

59
00:04:13.728 --> 00:04:15.857
テーマ切り替えのコードです。

60
00:04:15.857 --> 00:04:21.786
アプライテーマという関数が、データテーマ属性とボタンの状態を更新する中心です。

61
00:04:21.786 --> 00:04:26.348
ページを開いたら、まず保存済みの値を読み込むことを試みます。

62
00:04:26.348 --> 00:04:30.453
ダークが保存されていれば、初期テーマをダークにします。

63
00:04:30.453 --> 00:04:36.078
読み込みに失敗しても、キャッチで受け止めて、明るいテーマのまま続行します。

64
00:04:36.078 --> 00:04:41.552
その後、初期テーマを適用し、それまで隠していたテーマボタンを表示します。

65
00:04:41.552 --> 00:04:46.874
ボタンが押されるたびに、今と反対のテーマへ切り替えて、保存も試みます。

66
00:04:46.874 --> 00:04:55.540
ジャバスクリプトが動いた時点でボタンを出すやり方なら、動かない環境で、押せないボタンが表示されることもありません。

67
00:04:55.540 --> 00:04:59.077
三つ目の機能は、入力確認だけを行うフォームです。

68
00:04:59.077 --> 00:05:04.825
申し込みの送信は行わず、入力内容のチェックだけをジャバスクリプトで体験します。

69
00:05:04.825 --> 00:05:08.951
送信ボタンが押されると、サブミットイベントが発生します。

70
00:05:08.951 --> 00:05:14.110
ここで、プリベントデフォルトを呼び、ブラウザーの通常の送信を止めます。

71
00:05:14.110 --> 00:05:15.878
チェックは二段構えです。

72
00:05:15.878 --> 00:05:22.510
必須項目の確認に加えて、スペースだけの名前も、セットカスタムバリディティでエラーにします。

73
00:05:22.510 --> 00:05:27.668
大切なのは、入力し直したときに、エラーを空の文字列で解除する処理です。

74
00:05:27.668 --> 00:05:31.058
これを忘れると、正しく直しても先へ進めません。

75
00:05:31.058 --> 00:05:34.448
結果の表示には、テキストコンテンツを使います。

76
00:05:34.448 --> 00:05:43.880
入力した文字列をインナーエイチティーエムエルへ直接入れると、文字がエイチティーエムエルとして解釈されてしまう問題があるからです。

77
00:05:43.880 --> 00:05:45.424
フォームのコードです。

78
00:05:45.424 --> 00:05:47.530
大きく二つの処理に分かれます。

79
00:05:47.530 --> 00:05:49.495
一つ目は、入力イベントです。

80
00:05:49.495 --> 00:05:54.408
名前を打ち直すたびに、カスタムエラーを空にして、結果の表示も消します。

81
00:05:54.408 --> 00:05:56.374
二つ目が、送信イベントです。

82
00:05:56.374 --> 00:05:59.883
まず、プリベントデフォルトで通常の送信を止めます。

83
00:05:59.883 --> 00:06:04.656
次に、名前の前後の空白を取り除き、空ならエラーメッセージを付けます。

84
00:06:04.656 --> 00:06:09.007
最後に、レポートバリディティで検証の結果を表示し、問題がなければ、結果を表示する欄へ、

85
00:06:09.007 --> 00:06:13.359
確認のメッセージをテキストで入れます。

86
00:06:13.359 --> 00:06:18.132
エラーを付ける処理と外す処理が、対になっている点を確認してください。

87
00:06:18.132 --> 00:06:21.611
動くことを確認したら、正常時以外も試しましょう。

88
00:06:21.611 --> 00:06:24.799
名前が空欄なら、必須チェックの表示が出ます。

89
00:06:24.799 --> 00:06:28.568
空白だけなら、独自のエラーメッセージが出るはずです。

90
00:06:28.568 --> 00:06:36.250
名前に、太字タグのような文字列を入力して確認を押すと、太字にはならず、入力した文字がそのまま表示されます。

91
00:06:36.250 --> 00:06:39.293
テキストコンテンツで表示している効果です。

92
00:06:39.293 --> 00:06:44.511
最後に、ブラウザーでジャバスクリプトを無効にして読み込んでみてください。

93
00:06:44.511 --> 00:06:49.584
ナビゲーションは表示されたままで、学習内容やページ内リンクは使えます。

94
00:06:49.584 --> 00:06:55.672
基本の内容はエイチティーエムエルで提供し、便利な機能をジャバスクリプトで足していく。

95
00:06:55.672 --> 00:06:59.440
この考え方が、壊れにくいサイト作りの土台になります。

96
00:06:59.440 --> 00:07:00.535
まとめです。

97
00:07:00.535 --> 00:07:09.201
練習として、画面の幅を変えながらメニューの表示を確認すること、ダークモードへ切り替えて再読み込みし、

98
00:07:09.201 --> 00:07:17.867
テーマが残っているか確かめること、空白だけの名前で送信して、エラーの表示と解除を試すこと。

99
00:07:17.867 --> 00:07:20.603
この三つをやってみてください。

100
00:07:20.603 --> 00:07:23.158
今回の要点は、役割分担です。

101
00:07:23.158 --> 00:07:31.368
エイチティーエムエルは意味と入力部品、シーエスエスは見た目、ジャバスクリプトは状態と操作。

102
00:07:31.368 --> 00:07:39.760
状態を変えるときは、属性やクラス、文字といった小さな変更にとどめ、画面全体は作り直しません。

103
00:07:39.760 --> 00:07:45.324
そして、保存の失敗やジャバスクリプトが使えない状況でも、基本の内容が読めるようにしておくことが、

104
00:07:45.324 --> 00:07:50.889
実務でも大切な考え方です。

105
00:07:50.889 --> 00:07:55.450
次回は最終回、完成したサイトを検証して公開します。

106
00:07:55.450 --> 00:07:57.092
お疲れさまでした。