feat(todo): Todoアプリの課題を追加 (#620)

* fix(todo): JSDocのdestructuringの記法を修正

この書籍の主題ではないので、できるだけコンパクトな方法を採用

- microsoft/TypeScript#24045
- google/closure-compiler#1781
- microsoft/TypeScript#24746

fix #606

* fix(todo): removeEventListerを削除

TODOアプリのユースケースでは解除まで行っていないので削除する

fix #607

* feat(todo): 残った課題を追加

* chore(todo): add comment

* fix(todo): add <!-- doctest:disable -->

Author: azu

source/use-case/todoapp/event-model/event-emitter/src/model/TodoListModel.js

@@ -28,13 +28,9 @@ export class TodoListModel extends EventEmitter {
     /**
      * TodoListの状態が更新されたときに呼び出されるリスナー関数を登録する
      * @param {Function} listener
-     * @returns {Function} イベントリスナーの登録を解除する関数を返す
      */
     onChange(listener) {
         this.addEventLister("change", listener);
-        return () => {
-            this.removeEventLister("change", listener);
-        };
     }
 
     /**

source/use-case/todoapp/event-model/event-emitter/src/view/html-util.js

@@ -15,7 +15,7 @@ export function htmlToElement(html) {
 
 /**
  * HTML文字列からDOM Nodeを作成して返す
- * @return {HTMLElement}
+ * @return {Element}
  */
 export function element(strings, ...values) {
     const htmlString = strings.reduce((result, string, i) => {
@@ -31,8 +31,8 @@ export function element(strings, ...values) {
 
 /**
  * コンテナ要素の中身をbodyElementで上書きする
- * @param {HTMLElement} bodyElement コンテナ要素の中身となる要素
- * @param {HTMLElement} containerElement コンテナ要素
+ * @param {Element} bodyElement コンテナ要素の中身となる要素
+ * @param {Element} containerElement コンテナ要素
  */
 export function render(bodyElement, containerElement) {
     // rootElementの中身を空にする

source/use-case/todoapp/final/README.md

@@ -110,6 +110,39 @@ Todoリストの表示は次の2つの部品（コンポーネント）から成
 
 - <https://jsprimer.net/use-case/todoapp/final/final/>
 
+実はこのTodoアプリはまだいくつかアプリケーションとして、完成していない部分があります。
+
+入力欄でEnterキーを連打すると、空のTodoアイテムが追加されてしまうのは意図しない挙動です。
+また、`App#mount`で`TodoListModel#onChange`などのイベントリスナーを登録していますが、そのイベントリスナーを解除していません。
+このTodoアプリではあまり問題にはなりませんが、イベントリスナーは登録したら解除しないとメモリリークに繋がります。
+
+そのため、余力がある人は次の残ったTodoを完成させてみてください。
+
+- [ ] タイトルが空の場合は、フォームを送信してもTodoアイテムを追加できないようにする
+- [ ] `App#mount`でイベントリスナーを登録に対応して、`App#unmout`を追加しイベントリスナーを解除する
+
+`App#mount`と対応する`App#unmount`を作成するTodoは、アプリケーションのライフサイクルを意識するという課題になります。
+ウェブページにも`load`というページ読み込みが完了した時に発生するイベントと、`unload`というページを破棄した時に発生するイベントがあります。
+Todoアプリも`mount`と`unmount`を実装し、次のようにウェブページのライフサイクルに合わせられます。
+
+<!-- doctest:disable -->
+```js
+const app = new App();
+// ページのロードが完了したときのイベント
+window.addEventListener("load", () => {
+    app.mount();
+});
+// ページがアンロードされたときのイベント
+window.addEventListener(" unload", () => {
+    app.unmount();
+});
+```
+
+残ったTodoも実装したものは、次のURLで確認できます。
+ぜひ、自分で実装してみてウェブページやアプリの動きについて考えてみて下さい。
+
+- <https://jsprimer.net/use-case/todoapp/final/more/>
+
 ## Todoアプリのまとめ {#todo-conclusion}
 
 今回は、Todoアプリを構成する要素をModelとViewという単位でモジュールに分けていました。
@@ -120,9 +153,11 @@ Todoリストの表示は次の2つの部品（コンポーネント）から成
 さまざまなライブラリを使ったTodoアプリの実装が[TodoMVC][]と呼ばれるサイトにまとめられています。
 今回作成したTodoアプリはTodoMVCからフィルター機能などを削ったものをライブラリを使わずに実装しました。[^vanilajs]
 
-現実ではライブラリを使わずウェブアプリケーションを実装することは少なくなってきています。
+現実では、ライブラリを全く使わずウェブアプリケーションを実装することは殆どありません。
+ライブラリを使うことで、`html-util.js`のようなものは自分で書く必要はなくなったり、最後の課題として残ったライフサイクルの問題などは解決しやすくなります。
+
 しかし、ライブラリを使って開発する場合でも、第一部の基本文法や第二部のユースケースで紹介したようなJavaScriptの基礎は重要です。
-なぜならライブラリもこれらの基礎の上に実装されているためです。
+なぜならライブラリも、これらの基礎の上に実装されているためです。
 
 また作るアプリケーションの種類や目的によって適切なライブラリは異なります。
 ライブラリによっては魔法のような機能を提供しているものもありますが、それらも何かしらの基礎となる技術があることは覚えておいてください。

source/use-case/todoapp/final/create-view/src/model/TodoItemModel.js

@@ -3,8 +3,9 @@ let todoIdx = 0;
 
 export class TodoItemModel {
     /**
-     * @param {string} title Todoアイテムのタイトル
-     * @param {boolean} completed Todoアイテムが完了済みならばtrue、そうでない場合はfalse
+     * `title`: Todoアイテムのタイトル
+     * `completed`: Todoアイテムが完了済みならばtrue、そうでない場合はfalse
+     * @param {{ title: string, completed: boolean }}
      */
     constructor({ title, completed }) {
         // idは自動的に連番となりそれぞれのインスタンス毎に異なるものとする

source/use-case/todoapp/final/create-view/src/model/TodoListModel.js

@@ -28,13 +28,9 @@ export class TodoListModel extends EventEmitter {
     /**
      * TodoListの状態が更新されたときに呼び出されるリスナー関数を登録する
      * @param {Function} listener
-     * @returns {Function} イベントリスナーの登録を解除する関数を返す
      */
     onChange(listener) {
         this.addEventLister("change", listener);
-        return () => {
-            this.removeEventLister("change", listener);
-        };
     }
 
     /**
@@ -55,8 +51,7 @@ export class TodoListModel extends EventEmitter {
 
     /**
      * 指定したidのTodoItemのcompletedを更新する
-     * @param {number} id
-     * @param {boolean} completed
+     * @param {{ id:number, completed: boolean }}
      */
     updateTodo({ id, completed }) {
         const todoItem = this.items.find(todo => todo.id === id);
@@ -69,7 +64,7 @@ export class TodoListModel extends EventEmitter {
 
     /**
      * 指定したidのTodoItemを削除する
-     * @param {number} id
+     * @param {{ id: number }}
      */
     deleteTodo({ id }) {
         // `id`が一致するTodoItemを`this.items`から取り除き、削除する

source/use-case/todoapp/final/create-view/src/view/TodoItemView.js

@@ -6,7 +6,7 @@ export class TodoItemView {
      * @param {TodoItemModel} todoItem
      * @param {function({id:string, completed: boolean})} onUpdateTodo チェックボックスの更新イベントリスナー
      * @param {function({id:string)}} onDeleteTodo 削除ボタンのクリックイベントリスナー
-     * @returns {HTMLElement}
+     * @returns {Element}
      */
     createElement(todoItem, { onUpdateTodo, onDeleteTodo }) {
         const todoItemElement = todoItem.completed

source/use-case/todoapp/final/create-view/src/view/TodoListView.js

@@ -7,7 +7,7 @@ export class TodoListView {
      * @param {TodoItemModel[]} todoItems TodoItemModelの配列
      * @param {function({id:string, completed: boolean})} onUpdateTodo チェックボックスの更新イベントリスナー
      * @param {function({id:string)}} onDeleteTodo 削除ボタンのクリックイベントリスナー
-     * @returns {HTMLElement} TodoItemModelの配列に対応したリストのHTML要素
+     * @returns {Element} TodoItemModelの配列に対応したリストのHTML要素
      */
     createElement(todoItems, { onUpdateTodo, onDeleteTodo }) {
         const todoListElement = element`<ul />`;

source/use-case/todoapp/final/create-view/src/view/html-util.js

@@ -15,7 +15,7 @@ export function htmlToElement(html) {
 
 /**
  * HTML文字列からDOM Nodeを作成して返す
- * @return {HTMLElement}
+ * @return {Element}
  */
 export function element(strings, ...values) {
     const htmlString = strings.reduce((result, string, i) => {
@@ -31,8 +31,8 @@ export function element(strings, ...values) {
 
 /**
  * コンテナ要素の中身をbodyElementで上書きする
- * @param {HTMLElement} bodyElement コンテナ要素の中身となる要素
- * @param {HTMLElement} containerElement コンテナ要素
+ * @param {Element} bodyElement コンテナ要素の中身となる要素
+ * @param {Element} containerElement コンテナ要素
  */
 export function render(bodyElement, containerElement) {
     // rootElementの中身を空にする

source/use-case/todoapp/final/final/src/App.js

@@ -19,16 +19,15 @@ export class App {
 
     /**
      * Todoの状態を更新時に呼ばれるリスナー関数
-     * @param {number} id
-     * @param {boolean} completed
+     * @param {{ id:number, completed: boolean }}
      */
     handleUpdate({ id, completed }) {
         this.todoListModel.updateTodo({ id, completed });
     };
 
     /**
      * Todoを削除時に呼ばれるリスナー関数
-     * @param {number} id
+     * @param {{ id: number }}
      */
     handleDelete({ id }) {
         this.todoListModel.deleteTodo({ id });
@@ -56,10 +55,7 @@ export class App {
 
         formElement.addEventListener("submit", (event) => {
             event.preventDefault();
-            this.todoListModel.addTodo(new TodoItemModel({
-                title: inputElement.value,
-                completed: false
-            }));
+            this.handleAdd(inputElement.value);
             inputElement.value = "";
         });
     }

source/use-case/todoapp/final/final/src/model/TodoItemModel.js

@@ -3,8 +3,9 @@ let todoIdx = 0;
 
 export class TodoItemModel {
     /**
-     * @param {string} title Todoアイテムのタイトル
-     * @param {boolean} completed Todoアイテムが完了済みならばtrue、そうでない場合はfalse
+     * `title`: Todoアイテムのタイトル
+     * `completed`: Todoアイテムが完了済みならばtrue、そうでない場合はfalse
+     * @param {{ title: string, completed: boolean }}
      */
     constructor({ title, completed }) {
         // idは自動的に連番となりそれぞれのインスタンス毎に異なるものとする