SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTML・CSSとJavaScriptを連携する：メニュー・テーマ切り替え・入力確認を実装の解説動画

再生時間 7:57動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、第九回です。
  3. 0:04今回のテーマは、ジャバスクリプトとの連携です。
  4. 0:08これまで、エイチティーエムエルで意味と入力部品を作り、シーエスエスで見た目を整えてきました。
  5. 0:15今回はそこへ、状態と操作を担当するジャバスクリプトを加えて、サイトを動かします。
  6. 0:21目標は、クリックのたびに画面全体を作り直すのではなく、必要な属性や文字だけを変更できるようになることです。
  7. 0:29作る機能は三つ。
  8. 0:30メニューの開閉、テーマの切り替え、そして送信しない入力確認フォームです。
  9. 0:36元になる記事は、エスイーの部屋の、エイチティーエムエル、シーエスエスとジャバスクリプトを連携する、
  10. 0:40です。
  11. 0:44まず、ジャバスクリプトのファイルを読み込みます。
  12. 0:47インデックス、エイチティーエムエルと同じフォルダーに、スクリプト、ドット、
  13. 0:51ジェイエスというファイルを作ります。
  14. 0:55そして、エイチティーエムエルのヘッドの中、シーエスエスの読み込み行の後ろに、
  15. 0:59スクリプトタグを一行追加します。
  16. 1:03画面に表示しているのが、その一行です。
  17. 1:05ポイントは、ディファーという属性です。
  18. 1:08これを付けた外部スクリプトは、エイチティーエムエルの解析が終わった後に実行されます。
  19. 1:14そのため、本文の中のボタンやフォームなどの要素を、確実に取得できます。
  20. 1:19なお、今回使うドキュメントや画面のイベントは、ブラウザーの機能です。
  21. 1:24ノードで実行しても、ページを操作することはできません。
  22. 1:28登場する二つの言葉を押さえます。
  23. 1:30一つ目は、ドムです。
  24. 1:32ブラウザーは、エイチティーエムエルを読み込むと、要素の構造を作ります。
  25. 1:37これをドムと呼びます。
  26. 1:39ジャバスクリプトは、このドムを通してページを操作します。
  27. 1:43二つ目がイベントです。
  28. 1:44クエリセレクターで要素を取得し、アドイベントリスナーで、クリックされたとき、
  29. 1:49入力されたときに呼ぶ処理を登録します。
  30. 1:53ここで注意点が一つ。
  31. 1:54指定したアイディーがエイチティーエムエル側にない場合、取得結果はヌル、つまり空っぽになり、
  32. 2:00そのまま操作しようとするとエラーで止まってしまいます。
  33. 2:05複数のファイルを組み合わせるときは、アイディーの綴りを一致させることが大切です。
  34. 2:11一つ目の機能は、スマートフォン向けメニューの開閉です。
  35. 2:15設計のポイントは、状態の置き場所です。
  36. 2:18開いているか閉じているかは、ボタンの、アリア、エクスパンデッドという属性に入れます。
  37. 2:24そして、表示するかしないかは、ナビゲーションのヒドゥン属性に反映します。
  38. 2:30さらに、マッチメディアという機能で、シーエスエスと同じ、四十八レムという幅の境界を確認します。
  39. 2:37ピーシー幅ではナビゲーションを常に表示し、スマートフォンで閉じたまま画面を広げても、
  40. 2:42リンクが消えたままにならないようにします。
  41. 2:46エスケープキーで閉じたときは、操作していたボタンへフォーカスを戻す、という配慮も入れます。
  42. 2:53メニューの中心部分のコードです。
  43. 2:56上の三行で、ボタンとナビゲーションを取得し、広い画面かどうかを判定するオブジェクトを用意します。
  44. 3:03中心は、セットメニューという関数です。
  45. 3:06開いているかどうかを真偽値で受け取り、ボタンの属性と表示する文字、ナビゲーションの非表示を、
  46. 3:10まとめて更新します。
  47. 3:14ボタンがクリックされたら、今の状態の反対をセットメニューへ渡して、開閉を切り替えます。
  48. 3:20状態の変更を一つの関数に集めておくことで、エスケープキーやリンクのクリックなど、
  49. 3:25ほかの閉じる操作からも、同じ処理を呼べるようになります。
  50. 3:30二つ目の機能は、テーマの切り替えです。
  51. 3:33エイチティーエムエル要素の、データテーマという属性を切り替えると、第八回で定義した色の変数が丸ごと入れ替わります。
  52. 3:42ボタン側では、アリア、プレストという属性で、ダークモードが選ばれている状態を表します。
  53. 3:49選んだテーマは、ローカルストレージに保存して、次に開いたときも引き継ぎます。
  54. 3:54ただし、ブラウザーの設定によっては、保存が使えない場合があります。
  55. 3:59そこで、保存の処理を、トライ、キャッチで囲みます。
  56. 4:03保存に失敗しても、切り替え自体は止まらないようにするためです。
  57. 4:08保存するのは配色の選択だけです。
  58. 4:10名前やフォームの入力値は保存しません。
  59. 4:13テーマ切り替えのコードです。
  60. 4:15アプライテーマという関数が、データテーマ属性とボタンの状態を更新する中心です。
  61. 4:21ページを開いたら、まず保存済みの値を読み込むことを試みます。
  62. 4:26ダークが保存されていれば、初期テーマをダークにします。
  63. 4:30読み込みに失敗しても、キャッチで受け止めて、明るいテーマのまま続行します。
  64. 4:36その後、初期テーマを適用し、それまで隠していたテーマボタンを表示します。
  65. 4:41ボタンが押されるたびに、今と反対のテーマへ切り替えて、保存も試みます。
  66. 4:46ジャバスクリプトが動いた時点でボタンを出すやり方なら、動かない環境で、押せないボタンが表示されることもありません。
  67. 4:55三つ目の機能は、入力確認だけを行うフォームです。
  68. 4:59申し込みの送信は行わず、入力内容のチェックだけをジャバスクリプトで体験します。
  69. 5:04送信ボタンが押されると、サブミットイベントが発生します。
  70. 5:08ここで、プリベントデフォルトを呼び、ブラウザーの通常の送信を止めます。
  71. 5:14チェックは二段構えです。
  72. 5:15必須項目の確認に加えて、スペースだけの名前も、セットカスタムバリディティでエラーにします。
  73. 5:22大切なのは、入力し直したときに、エラーを空の文字列で解除する処理です。
  74. 5:27これを忘れると、正しく直しても先へ進めません。
  75. 5:31結果の表示には、テキストコンテンツを使います。
  76. 5:34入力した文字列をインナーエイチティーエムエルへ直接入れると、文字がエイチティーエムエルとして解釈されてしまう問題があるからです。
  77. 5:43フォームのコードです。
  78. 5:45大きく二つの処理に分かれます。
  79. 5:47一つ目は、入力イベントです。
  80. 5:49名前を打ち直すたびに、カスタムエラーを空にして、結果の表示も消します。
  81. 5:54二つ目が、送信イベントです。
  82. 5:56まず、プリベントデフォルトで通常の送信を止めます。
  83. 5:59次に、名前の前後の空白を取り除き、空ならエラーメッセージを付けます。
  84. 6:04最後に、レポートバリディティで検証の結果を表示し、問題がなければ、結果を表示する欄へ、
  85. 6:09確認のメッセージをテキストで入れます。
  86. 6:13エラーを付ける処理と外す処理が、対になっている点を確認してください。
  87. 6:18動くことを確認したら、正常時以外も試しましょう。
  88. 6:21名前が空欄なら、必須チェックの表示が出ます。
  89. 6:24空白だけなら、独自のエラーメッセージが出るはずです。
  90. 6:28名前に、太字タグのような文字列を入力して確認を押すと、太字にはならず、入力した文字がそのまま表示されます。
  91. 6:36テキストコンテンツで表示している効果です。
  92. 6:39最後に、ブラウザーでジャバスクリプトを無効にして読み込んでみてください。
  93. 6:44ナビゲーションは表示されたままで、学習内容やページ内リンクは使えます。
  94. 6:49基本の内容はエイチティーエムエルで提供し、便利な機能をジャバスクリプトで足していく。
  95. 6:55この考え方が、壊れにくいサイト作りの土台になります。
  96. 6:59まとめです。
  97. 7:00練習として、画面の幅を変えながらメニューの表示を確認すること、ダークモードへ切り替えて再読み込みし、
  98. 7:09テーマが残っているか確かめること、空白だけの名前で送信して、エラーの表示と解除を試すこと。
  99. 7:17この三つをやってみてください。
  100. 7:20今回の要点は、役割分担です。
  101. 7:23エイチティーエムエルは意味と入力部品、シーエスエスは見た目、ジャバスクリプトは状態と操作。
  102. 7:31状態を変えるときは、属性やクラス、文字といった小さな変更にとどめ、画面全体は作り直しません。
  103. 7:39そして、保存の失敗やジャバスクリプトが使えない状況でも、基本の内容が読めるようにしておくことが、
  104. 7:45実務でも大切な考え方です。
  105. 7:50次回は最終回、完成したサイトを検証して公開します。
  106. 7:55お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

HTMLとCSSにJavaScriptを連携。レスポンシブメニュー、ダークモード、保存失敗への対応、送信しない入力確認フォームを実装します。

解説記事・サンプルコードを読む：HTML・CSSとJavaScriptを連携する：メニュー・テーマ切り替え・入力確認を実装 →