GitBookjs-primerTodoアイテムの追加を実装するここからはJavaScriptでTodoアプリの機能を作成していきます。このセクションでは、前のセクションでHTMLに目印をつけたTodoリスト(#js-todo-list)に対してTodoアイテムを追加する処理を実装します。Todoアイテムの追加まず、Todoアプリではどのような操作をしたら、Todoアイテムを追加できるかを見ていきます。Todoアプリでは、ユーザーが次のような操作を行った場合に、Todoアイテムを追加します。入力欄にTodoアイテムのタイトルを入力する入力欄でEnterキーを押して送信するTodoリストにTodoアイテムが追加されるこれをJavaScriptで実現するには次のことが必要です。Todoアイテムのタイトルを取得するために、input要素(入力欄)から内容を取得するEnterキーで送信されたことを知るために、form要素のsubmitイベント(送信)を監視する入力内容をタイトルにしたTodoアイテムを作成し、Todoリスト(#js-todo-list)にTodoアイテム要素を追加するまずは、form要素から送信されたイベントを受け取り、入力内容をコンソールログに表示してみることからはじめてみましょう。入力内容をコンソールに表示するform要素でEnterキーを押して送信するとsubmitイベントが発生します。このsubmitイベントはHTML要素のaddEventListenerメソッドを利用することで受け取れます。次のコードでは、指定したform要素からsubmitイベントが発生したときに呼び出されるコールバック関数を登録しています。イベントが発生したときに呼ばれるコールバック関数(イベントリスナー)});このようなイベントが発生した際に呼ばれるコールバック関数のことをイベントリスナー(イベントをリッスンするものという意味)と呼びます。イベントリスナーはイベントハンドラーとも呼ばれることがありますが、この書籍ではこの2つの言葉は同じ意味として扱います。APIで出力すればよいことになります。入力内容はinput要素のvalueプロパティから取得できます。"input要素の入力内容"これらを組み合わせてApp.jsに「入力内容をコンソールに表示」する機能を実装してみましょう。Appクラスにmountというメソッドを定義して、その中に処理を書いていきましょう。次のコードでは、フォーム(#js-form)をEnterで送信すると、input要素(#js-form-input)の内容をコンソールへ表示する処理を実装しています。}}このままでは、App#mountは呼び出されないため何も行われません。そのため、index.jsも変更して、Appクラスのmountメソッドを呼び出すようにします。App();app.mount();これらの変更後にブラウザでページをリロードすると、App#mountメソッドが実行されるようになります。submitイベントがリッスンされているので、入力欄に何か入力してEnterで送信してみるとその内容がコンソールに表示されます。先ほどのApp#mountメソッドでは、submitイベントのイベントリスナー内でevent.preventDefaultメソッドを呼び出しています。event.preventDefaultメソッドは、submitイベントの発生元であるフォームが持つデフォルトの動作をキャンセルするメソッドです。フォームが持つデフォルトの動作とは、フォームの内容を指定したURLへ送信するという動作です。ここではform要素に送信先が指定されていないため、現在のURLに対してフォームの内容を送信します。この動作は邪魔になるため、event.preventDefaultメソッドを呼び出すことで、このデフォルトの動作をキャンセルしています。${inputElement.value}`);});現在のURLに対してフォームの送信が行われると、結果的にページがリロードされてしまいます。そのため、event.preventDefault()を呼び出し、デフォルトの動作をキャンセルしていました。event.preventDefault()をコメントアウトすると、ページがリロードされてしまうことが確認できます。${inputElement.value}`);});ここまででtodoappディレクトリに、次のような変更を加えました。(App#mountの実装)ここまでのTodoアプリは次のURLで確認できます。https://jsprimer.net/use-case/todoapp/form-event/prevent-event/入力内容をTodoリストに表示するフォーム送信時に入力内容を取得する方法がわかったので、次はその入力内容をTodoリスト(#js-todo-list)に表示します。HTMLではリストのアイテムを記述する際には<li>タグを使います。後ほどTodoリストに表示するTodoアイテムの要素には、完了状態を表すチェックボックスや削除ボタンなども含めたいです。APIで作成すると見通しが悪くなるため、HTML文字列からHTML要素を生成するユーティリティモジュールを作成しましょう。次のhtml-util.jsというファイルをsrc/view/html-util.jsというパスに作成します。HTML文字列をDOMに追加する」でも利用したescapeSpecialCharsをベースにしています。ajaxappでのescapeHTMLタグ関数では出力はHTML文字列でしたが、今回作成するelementタグ関数の出力はHTML要素(Element)です。Todoリスト(#js-todo-list)というすでに存在する要素に対して要素を追加するには、HTML文字列ではなくHTML要素が必要になります。HTML文字列に対してはaddEventListenerでイベントをリッスンできません。そのため、チェックボックスの状態が変わったことや削除ボタンが押されたことを知る必要があるTodoアプリではHTML要素が必要になります。containerElement.appendChild(bodyElement);}elementタグ関数では、同じファイルに定義したhtmlToElement関数を使ってHTML文字列からHTML要素を作成しています。htmlToElement関数の中で利用しているtemplate要素はHTML5で追加された、HTML文字列の断片からHTML要素を作成できる要素です。このelementタグ関数を使うことで、次のようにHTML文字列からHTML要素を作成できます。作成した要素は、appendChildメソッドなどで既存の要素に子要素として追加できます。作成した要素を`document.body`の子要素として追加(appendChild)するdocument.body.appendChild(newElement);ブラウザが提供するappendChildメソッドは子要素を追加するだけなので、すでに別の要素がある場合は末尾に追加されます。このセクションではまだ利用しませんが、html-util.jsにはrenderという関数を定義しています。render関数は指定したコンテナ要素(親となる要素)の子要素を上書きする関数となります。動作的には一度子要素をすべて消したあとにappendChildで子要素として追加しています。document.body);最後に、このelementタグ関数を使って、フォームから送信された入力内容をTodoリストに要素として追加してみます。App.jsから先ほど作成したhtml-util.jsのelementタグ関数をimportします。次にsubmitイベントのリスナー関数で、Todoアイテムを表現する要素を作成し、Todoリスト(#js-todo-list)の子要素として追加(appendChild)します。最後にTodoアイテム数(#js-todo-count)のテキスト(textContent)を更新します。}}これらの変更後にブラウザでページをリロードし、フォームに入力してからEnterを押すとTodoリストにTodoアイテムが追加されます。入力内容を送信するたびにtodoItemCountが加算され、Todoアイテム数の表示も更新されます。このセクションでの変更点は次のとおりです。html-util.js(新規追加)ここまでのTodoアプリは次のURLで確認できます。https://jsprimer.net/use-case/todoapp/form-event/add-todo-item/まとめこのセクションではform要素のsubmitイベントをリッスンし、入力内容を元にTodoアイテムを作成し、これをTodoリストに追加する機能を実装しました。今回のTodoアイテムの追加のように、多くのウェブアプリは何らかのイベントをリッスンして表示を更新します。このような、イベントが発生したことを元に処理を進める方法をイベント駆動(イベントドリブン)と呼びます。今回のTodoアイテムの追加では、submitイベントを入力にして、Todoリスト要素を直接HTML要素として追加するという方法を取っていました。このように直接DOMを更新するという方法はコードが短くなりますが、DOMのみにしか状態が残らないため柔軟性がなくなるという問題があります。次のセクションでは、実際に起きる問題やそれを解決するための仕組みを見ていきます。このセクションのチェックリストフォームの送信をsubmitイベントで受け取り、入力内容を確認したHTML文字列からHTML要素を作成するhtml-util.jsを実装したフォームからTodoアイテムを追加したTodoアイテムの追加に合わせてTodoアイテム数を更新したこのセクションで、TodoアプリにTodoアイテムを追加する機能が実装できました。Todoアイテムを追加できるTodoアプリに実装する残りの機能は次のとおりです。Todoアイテムの完了状態を更新できるTodoアイテムを削除できる。