fix: 「Todoアイテムの追加を実装する」の章で、ulを追加

[kupuma-ru21]

#1316
上記、issueの対応を致しました。

以下、対応後の表示確認です。

• chrome

chrome.mov

• firefox

firefox.mov

[bot-user]

✔️ Deploy Preview for js-primer ready!

🔨 Explore the source changes: 585b6e2

🔍 Inspect the deploy log: https://app.netlify.com/sites/js-primer/deploys/620330ae51f2640007a14472

😎 Browse the preview: https://deploy-preview-1385--js-primer.netlify.app

[azu]

PRありがとうございます！

js-primer/source/use-case/todoapp/cypress/integration/form-event/add-todo-item/add-todo-item-spec.js

Lines 8 to 11 in 74e1ab7

	// ulはない
	cy.get("#js-todo-list ul").should(items => {
	expect(items).to.have.length(0);
	});

このテストも修正が必要っぽいですね。

            // ulがある
            cy.get("#js-todo-list ul").should(ul => {
                expect(ul).to.have.length(1);
            });

になるかなと思います。

[azu]

js-primer/source/use-case/todoapp/form-event/README.md

Line 173 in 74e1ab7

このセクションではまだ利用しませんが、`html-util.js`には`render`という関数を定義しています。

render関数を使っているので、ここは削除する必要がありますね

js-primer/source/use-case/todoapp/form-event/README.md

Lines 188 to 192 in 74e1ab7

	最後に、この`element`タグ関数を使って、フォームから送信された入力内容をTodoリストに要素として追加してみます。
	`App.js`から先ほど作成した`html-util.js`の`element`タグ関数を`import`します。
	次に`submit`イベントのリスナー関数で、Todoアイテムを表現する要素を作成し、Todoリスト（`#js-todo-list`）の子要素として追加（`appendChild`）します。
	最後にTodoアイテム数（`#js-todo-count`）のテキスト（`textContent`）を更新します。

ここの文章も変更が必要ですね。
2ステップが3ステップになって少し長くなるので、文もちょっと分けたほうが良さそうですね。

最初に大きく分けて何をやるか概要を出して、その中身を説明する感じですかね。

• Listへの追加と描画
• カウントの更新

最後に、この`element`タグ関数と`render`関数を使って、フォームから送信された入力内容をTodoリストに要素として追加してみます。

まず最初に、`App.js`から先ほど作成した`html-util.js`の`element`タグ関数と`render`関数を`import`します。
次に、Todoアイテムをまとめるリストを`todoListElement`として定義し、表示されているTodoアイテムの数を`todoItemCount`として定義します。

`submit`イベントのリスナー関数で、入力された内容をもとにTodoリストとTodoアイテム数の表示を更新していきます。
Todoアイテムを表現する要素を作成し、Todoリストの子要素として追加（`appendChild`）して、`render`関数でコンテナ要素の中身をTodoリストで上書き(再描画?)します。
最後にTodoアイテムの数を1増やして、Todoアイテム数（`#js-todo-count`）のテキスト（`textContent`）を更新します。

イメージはこういう感じになるのかなと思います。(ちょっと書いてみて読みやすいかの確認が必要そう)
ちょっとカッコが多くなりがちなので、ちょっと意図的に抑えないといけない感じがしますね…

[kupuma-ru21]

#1385 (comment)

このテストも修正が必要っぽいですね。

修正例を記載していただき、ありがとうございます！
修正いたしました。

de1e4c1

[kupuma-ru21]

#1385 (comment)

js-primer/source/use-case/todoapp/form-event/README.md

Line 173 in 74e1ab7

このセクションではまだ利用しませんが、`html-util.js`には`render`という関数を定義しています。

render関数を使っているので、ここは削除する必要がありますね

すみません、確認不足でした。
文言を削除いたしました。

2f95767

---

js-primer/source/use-case/todoapp/form-event/README.md

Lines 188 to 192 in 74e1ab7

	最後に、この`element`タグ関数を使って、フォームから送信された入力内容をTodoリストに要素として追加してみます。
	`App.js`から先ほど作成した`html-util.js`の`element`タグ関数を`import`します。
	次に`submit`イベントのリスナー関数で、Todoアイテムを表現する要素を作成し、Todoリスト（`#js-todo-list`）の子要素として追加（`appendChild`）します。
	最後にTodoアイテム数（`#js-todo-count`）のテキスト（`textContent`）を更新します。

イメージはこういう感じになるのかなと思います。(ちょっと書いてみて読みやすいかの確認が必要そう)
ちょっとカッコが多くなりがちなので、ちょっと意図的に抑えないといけない感じがしますね…

こちら、記載していただいた文章をもとに修正いたしましたので
確認して頂ければと思います。

cfd11b2

[azu]

📝 書籍版からも参照してるので、書籍版では liの問題は再発はするけど、リリース時もそういう感じだったので、まあいいかな。

[azu]

LGTMです！

ありがとうございました！

[kupuma-ru21]

LGTMです！

ありがとうございました！

---

確認していただき、ありがとうございました！