【JavaScript入門】タスクを追加しよう

本章では、ToDoリストのタスクを追加する機能を実装します。

ToDoリストのタスクを追加させるには、入力されたタスクデータを元にHTMLを生成し、それをDOMツリーに追加します。

入力されたデータを取得するには、イベントやイベントハンドラを理解する必要があります。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「タスクを追加しよう」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

ページには「入力欄」と「全てのタスクを削除」というボタンが設置されています。

この「入力欄」にタスクを入力して、リストに追加しましょう。

ToDoタスクを追加する

まず、ToDoリストに新しいタスクを追加するためのステップを見てみましょう。

ToDoアプリでは、ユーザーは次のような操作をしてタスクを追加します。

コードで実装すると次のようなステップになります。

では、一つずつ見てみましょう。

入力した内容を取得する

まずは、入力した内容を取得しましょう。

Enterキーを押下したときに入力した内容を取得するには、「form」要素を使います。

サンプルコードの「スタート」の「index.html」を開いてみましょう。

「入力した内容を取得する」と記述がされています。

<!-- 入力した内容を取得する -->
<form id="form">
  <labelfor="title">タスク</label>
  <inputplaceholder="お掃除..."type="text"class="validate"id="input">
</form>

formタグの中に、inputタグがあります。

inputタグは、タスクの入力欄を表示しています。

このinputタグをfromタグで囲んでEnterキーを押下すると submitというイベントが発生します。

イベントってなに

form要素でEnterキーを押下すると、submit イベントが発生します。

このイベントとは一体なんでしょうか。

JavaScriptにおけるイベントとは、ユーザーがウェブページ上で行うアクション のことを言います。

例えば、ボタンをクリックしたり、フォームを入力したり、Enterキーを押したりなどです。

イベントハンドラとは

ウェブページでは、ユーザーは何かしらのアクションを起こします。

そのアクションをイベントと言います。

そして、そのイベントが起きたらそれに応じた処理をする必要がありますね。

例えば、ボタンをクリックしたらアラートを出すなどです。

そのイベントが起きたときに行う処理を イベントハンドラ と言います。

イベントハンドラは、任意の処理を設定することができます。

イベントハンドラの使い方

イベントハンドラは、イベントリスナー という仕組みを使うと設定することができます。

イベントリスナーは、「addEventListener」を使って設定します。

要素.addEventListener(イベント名, () => {
  イベントが起きたときの処理
})

例えば、ボタンをクリックしたときにコンソールに「こんにちは！」を出してみましょう。

const button = document.getElementById("button");

button.addEventListener('click', () => {
  console.log("こんにちは！")
})

「click」というイベントが発生したら、コンソールに出すという処理を実行しています。

このようにaddEventListenerを使うと、ある要素に対してイベントとそのイベントが発生したときの処理(イベントハンドラ)を指定することができます。

イベントの種類

addEventListenerで使われるイベントの種類はいつくかあります。

一般的に使われるイベントを次の一覧で確認しておきましょう。

本章では、「submit」イベントを使います。

submitのイベントハンドラを設定しよう

では、submitイベントをaddEventListenerで設定しましょう。

サンプルコードの「スタート」の「index.js」を見てみましょう。

「イベントハンドラを設定しよう」と記述がされています。

その真下に、次のように書いてください。

// イベントハンドラを設定しよう
const form = document.getElementById('form')
form.addEventListener("submit", (event) => {
  console.log("Enterキーが押されました！")
})

form要素に対して、subimtイベントとsubmitイベントが発生したときの処理を設定しています。

Enterキーを押下したら、コンソールに「Enterキーが押されました！」が出るはずです。

しかし、何も出てきません。

一体なぜでしょうか。

デフォルトのイベントを止める

何も出てこないのは、デフォルトの処理が動作しているため です。

イベントにはデフォルトのイベントハンドラがあります。

明示的にイベントハンドラを指定しないと、デフォルトの処理が動いてしまいます。

例えば、submitイベントはデフォルトで「指定されたURLへデータを送信する」という処理をします。

これを明示的にキャンセルしない限りはこの処理が実行されます。

では、どのようにデフォルトの処理をキャンセルさせるのでしょうか。

キャンセルさせるには、event.preventDefault を使います。

preventDefaultを設定しよう

event.preventDefault を次のようにイベントハンドラの中で書いてください。

// イベントハンドラを設定しよう
const form = document.getElementById('form')
form.addEventListener("submit", (event) => {
  // デフォルトの処理をキャンセルする
  event.preventDefault()

  console.log("Enterキーが押されました！")
})

これで、submitイベントのデフォルトの動作をキャンセルさせることができました。

実際に動きを見てみましょう。コンソールに「Enterキーが押されました！」が出るはずです。

入力されたデータを取得しよう

sunbmitのイベントハンドラを設定することができたので、次は入力されたデータを取得しましょう。

入力されたデータはinput要素から取得することができます。

サンプルコードの「スタート」の「index.js」を見てみましょう。

先ほどのsubmitのイベントハンドラの中に次のように書いてください。

// イベントハンドラを設定しよう
const form = document.getElementById('form')
form.addEventListener("submit", (event) => {
  // デフォルトの処理をキャンセルする
  event.preventDefault()

  // 入力されたデータを取得しよう
  constinput = document.getElementById('input')
  constvalue = input.value

  if (!value) return

  // 新しいタスクデータを作る
  consttask = { id:tasks.length + 1, name:value }
})

入力されたデータを取得するには、「value」を使います。

const input = document.getElementById('input')
const value = input.value

そして、データが存在しなかったら処理を止めています。

if (!value) return

次に、入力されたデータをもとに新しいタスクデータをオブジェクトで作成しています。

// 新しいタスクデータを作る
const task = { id: tasks.length + 1, name: value }

「id」は既存の配列の数からプラス1しています。

「name」は入力されたデータを入れています。

入力した内容をToDoリストに追加する

最後に、このデータをToDoリストに追加しましょう。

サンプルコードの「スタート」の「index.js」を見てみましょう。

先ほどのsubmitのイベントハンドラの中に次のように書いてください。

form.addEventListener("submit", (event) => {
  // デフォルトの処理をキャンセルする
  event.preventDefault()

  // 入力されたデータを取得しよう
  constinput = document.getElementById('input')
  constvalue = input.value

  if (!value) return

  // 新しいタスクデータを作る
  consttask = { id:tasks.length + 1, name:value }

  // 入力した内容をToDoリストに追加する
  constclone = template.content.cloneNode(true)
  consttr = clone.querySelector("tr")
  constname = clone.querySelector(".name")

  tr.setAttribute("id", task.id)
  name.textContent = task.name

  tbody.appendChild(clone)
})

ToDoリストに追加する部分は、前回と同じですね。

template要素からHTMLを作って、DOMに追加しています。

Chromeで確認してみよう

最後にChromeで動きを確認してみましょう。

入力したタスクが追加されましたね。

まとめ

本章では、ToDoリストのタスクを追加させました。

入力されたデータを取得するためにイベントやイベントハンドラについて学びました。

このようにイベントが発生してから処理をする方法を イベント駆動 と呼びます。

JavaScriptではイベント駆動でコードを書くことが多いので覚えておきましょう。

最後にもう一度、重要なことを確認しましょう。

完成形のコードがあるので見比べてみましょう。

次章は、タスクを削除させてみましょう。