SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのDOMとイベント：入力・追加・削除ができるメモ一覧を作るの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00ジャバスクリプト入門、実践連載の第四回です。
  3. 0:04今回のテーマは、ドムとイベントです。
  4. 0:07前回まではデータを処理してきましたが、今回はその処理を画面とつなげます。
  5. 0:13入力欄にメモを書いて追加ボタンを押すと一覧に並び、不要になったメモは削除ボタンで消せる、
  6. 0:18そんな小さなアプリを作ります。
  7. 0:23使うのは、要素を取り出す、操作をきっかけに処理を動かす、新しい要素を作って並べる、
  8. 0:27という基本の流れだけです。
  9. 0:32フレームワークは使いません。
  10. 0:34素のジャバスクリプトで画面が動く仕組みを確かめることが、今回の目標です。
  11. 0:40まず土台になるエイチティーエムエルを用意します。
  12. 0:43中心は四つの部品です。
  13. 0:45入力を受け付けるフォーム、その中の入力欄、一覧を表示するリスト、そして件数を知らせる領域です。
  14. 0:51入力欄にはラベルを関連付け、どの欄に何を書くのかが分かるようにします。
  15. 0:56最大で百文字まで、という制限も入力欄に付けます。
  16. 0:59一覧は最初は空です。
  17. 1:01メモは後からジャバスクリプトが作って入れます。
  18. 1:04各部品にはアイディーを付けておきます。
  19. 1:06このアイディーが、次のステップで要素を見つけるための目印になります。
  20. 1:11見た目よりも、部品の役割と名前をそろえることが大切です。
  21. 1:15ここでドムとは何かを押さえます。
  22. 1:17ドムは、エイチティーエムエルをジャバスクリプトから扱える形に表したものです。
  23. 1:23ページ全体は、大きな見出し、フォーム、段落、リストといった要素が入れ子になった、
  24. 1:27木のような階層になっています。
  25. 1:31ブラウザーはこの構造をオブジェクトとして持ち、プログラムはそれを読んだり、
  26. 1:35書き換えたり、要素を足したり消したりできます。
  27. 1:40つまり、画面を直接触るのではなく、ドムという画面の写しを操作すると、表示が変わる、
  28. 1:43という仕組みです。
  29. 1:47このイメージがあると、要素の取得も追加も、木の一部を扱う作業として理解できます。
  30. 1:53ドムから部品を取り出すには、ゲットエレメントバイアイディーを使います。
  31. 1:58アイディーを文字列で渡すと、対応する要素が一つ返ります。
  32. 2:02フォーム、入力欄、リスト、件数の領域、この四つを取得して、それぞれ名前の付いた定数に入れます。
  33. 2:08ここで大事なのが、存在チェックです。
  34. 2:11アイディーを書き間違えると、結果はヌルという、値がない状態になります。
  35. 2:16そのまま使うとエラーになるので、どれか一つでも欠けたら、必要な要素がないというエラーを出して止めます。
  36. 2:23早い段階で失敗に気付ける書き方です。
  37. 2:26また、スクリプトをモジュールとして読み込むと、エイチティーエムエルの解析後に実行されるため、
  38. 2:31先に書いた要素を確実に取得できます。
  39. 2:35次にイベントです。
  40. 2:37イベントとは、クリックされた、送信された、文字が入力された、といった起きた出来事のことです。
  41. 2:44アドイベントリスナーを使うと、ある要素でその出来事が起きたときに、どの処理を実行するかを登録できます。
  42. 2:52今回はボタンのクリックではなく、フォームのサブミットというイベントを使います。
  43. 2:58これがポイントで、送信ボタンだけでなく、入力欄でエンターキーを押しても同じ処理が動きます。
  44. 3:05キーボードで操作する人にも自然な作りになります。
  45. 3:09イベントが起きるまでは処理は実行されません。
  46. 3:12登録しておいて、起きたら呼ばれる、という待ち受けの形を覚えてください。
  47. 3:17サブミットの処理の最初に、プリベントデフォルトを呼びます。
  48. 3:22これは、フォーム本来の動作である、サーバーへの送信と画面の移動を止めるための呼び出しです。
  49. 3:30これがないとページが再読み込みされ、せっかくのメモが消えてしまいます。
  50. 3:35次に、入力欄の値をトリムで整えます。
  51. 3:38トリムは前後の空白を取り除く処理です。
  52. 3:41整えた結果が空なら、空白だけのメモは追加できないと知らせ、入力欄へフォーカスを戻して処理を終えます。
  53. 3:49空欄そのものは入力欄の必須チェックが防ぎ、空白だけの入力はジャバスクリプト側で防ぐ、
  54. 3:53二段構えです。
  55. 3:57おかしな入力を一覧に入れる前に止めることが大切です。
  56. 4:02入力が正しければ、メモの一行を作ります。
  57. 4:05クリエイトエレメントで、リストの行、文字を入れる範囲、削除ボタンという三つの要素を新しく作ります。
  58. 4:12メモの文字は、テキストコンテンツに入れます。
  59. 4:15テキストコンテンツは、入力を文字としてそのまま表示する仕組みです。
  60. 4:20たとえば太字に見える記号付きの文字を入力しても、エイチティーエムエルとして解釈されず、
  61. 4:23文字のまま出ます。
  62. 4:27ユーザー入力をインナーエイチティーエムエルに入れると、意図しないエイチティーエムエルとして扱われる危険があるため、
  63. 4:32ここでは使いません。
  64. 4:37最後に、行の中に文字とボタンを入れ、その行を一覧へ追加します。
  65. 4:41追加後は入力欄を空にし、件数を更新して、フォーカスを入力欄へ戻します。
  66. 4:46削除の仕組みは、行を作るときに一緒に用意します。
  67. 4:50各行の削除ボタンに、クリックのイベントを登録しておきます。
  68. 4:55押されたら、そのボタンがある行自身を取り除くリムーブを呼び、件数を更新し、
  69. 4:59入力欄へフォーカスを戻します。
  70. 5:03件数は、一覧の子要素の数を数えて表示します。
  71. 5:06追加したときも削除したときも、同じ件数更新の関数を呼ぶことで、表示がずれるのを防ぎます。
  72. 5:13削除ボタンには、何を削除するのかが分かるラベルも付けます。
  73. 5:18ボタンの文字だけでは分かりにくい場合でも、読み上げなどで対象が伝わるようにする配慮です。
  74. 5:25一行ごとに自分の削除処理を持つ、という作りが今回の小さな工夫です。
  75. 5:30作ったページは、ローカルサーバー経由で開いて確認します。
  76. 5:34ファイルを直接開く方法では、モジュールの読み込みに制約が出ることがあるため、
  77. 5:40小さなサーバーを立てて、エイチティーティーピーで表示するのが記事の進め方です。
  78. 5:45確認の観点は四つです。
  79. 5:47メモを追加すると一覧と件数が増えること。
  80. 5:50削除すると件数が減ってフォーカスが戻ること。
  81. 5:53空白だけでは追加されないこと。
  82. 5:55そして、エイチティーエムエルに見える文字を入れても、文字として表示されることです。
  83. 6:02なお、再読み込みするとメモは消えます。
  84. 6:04今回の例には保存機能はなく、ドムの中だけに状態がある、という限界も一緒に確かめてください。
  85. 6:11この例は小さく分かりやすい反面、広げるときには注意があります。
  86. 6:16一つ目は、ドムを一覧の状態として使っている点です。
  87. 6:20並び替えや、保存して次回も表示するような機能が必要になったら、配列をデータの本体として持ち、
  88. 6:25その内容からドムを作り直す構成の方が扱いやすくなります。
  89. 6:31二つ目は、イベント登録の寿命です。
  90. 6:33今回はページが開いている間だけ使うので問題は小さいですが、画面を何度も作り直す構成では、
  91. 6:38同じ要素へ同じ処理を二重に登録しないこと、不要になった登録を解除すること、
  92. 6:43といった設計が必要になります。
  93. 6:48小さな例のままで済む条件と、設計を変える条件を分けて考えることが大切です。
  94. 6:54まとめです。
  95. 6:55今回の流れは、要素を取得する、イベントを登録する、入力を確かめる、要素を作って追加する、
  96. 7:00削除と件数更新を行う、という五つの手順でした。
  97. 7:06中でも、サブミットを使えばエンターキーでも動くこと、入力はテキストコンテンツで文字として表示すること、
  98. 7:11この二つは実務でもそのまま役立ちます。
  99. 7:17練習として、メモを三件追加して一件を削除し、件数が正しく変わること、空白だけの入力が断られること、
  100. 7:23記号入りの文字がそのまま表示されることを確かめてみてください。
  101. 7:30次回は非同期処理で、時間のかかる通信と失敗への備えを学びます。
  102. 7:35これで第四回を終わります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

JavaScriptで入力・追加・削除ができるメモ一覧を実装。DOM取得、createElement、submitイベント、textContent、フォーカスの扱いを学びます。

解説記事・サンプルコードを読む：JavaScriptのDOMとイベント：入力・追加・削除ができるメモ一覧を作る →