## 課題
ユーザーが特定のアイテムを追加および削除できる動的リストの作成。
1. `ul`というIDを持つ`dynamic-list`に、**イベントデリゲーション**を使用して1つのクリックイベントリスナーを追加；
2. アイテムがクリックされた場合：
   - クリックされた要素が`<li>`の場合、そのアイテムのテキストをアラートで表示；
   - クリックされた要素が「Delete」ボタンの場合、該当する`<li>`アイテムをリストから削除。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHVsIGlkPSJkeW5hbWljLWxpc3QiPgogICAgICA8bGk+SXRlbSAxIDxidXR0b24gY2xhc3M9ImRlbGV0ZS1idG4iPkRlbGV0ZTwvYnV0dG9uPjwvbGk+CiAgICAgIDxsaT5JdGVtIDIgPGJ1dHRvbiBjbGFzcz0iZGVsZXRlLWJ0biI+RGVsZXRlPC9idXR0b24+PC9saT4KICAgIDwvdWw+CiAgICA8YnV0dG9uIGlkPSJhZGQtaXRlbSI+QWRkIEl0ZW08L2J1dHRvbj4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjRmODsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDIwcHggMDsKICB3aWR0aDogMzAwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA1cHggMTVweCByZ2JhKDAsIDAsIDAsIDAuMSk7Cn0KCiNkeW5hbWljLWxpc3QgbGkgewogIHBhZGRpbmc6IDEycHg7CiAgbWFyZ2luOiA4cHggMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZiOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwogIGNvbG9yOiAjMWYyOTM3Owp9CgojZHluYW1pYy1saXN0IGxpOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTVlZmZmOwp9CgojZHluYW1pYy1saXN0IGJ1dHRvbiB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2VmNDQ0NDsKICBjb2xvcjogI2ZmZmZmZjsKICBib3JkZXI6IG5vbmU7CiAgcGFkZGluZzogNnB4IDEycHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGZvbnQtc2l6ZTogMC45cmVtOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKI2R5bmFtaWMtbGlzdCBidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNkYzI2MjY7Cn0KCiNhZGQtaXRlbSB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjM2I4MmY2OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgojYWRkLWl0ZW06aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyNTYzZWI7Cn0=

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgphZGRJdGVtQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGl0ZW1Db3VudCsrOwogIGNvbnN0IG5ld0l0ZW0gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaScpOwogIG5ld0l0ZW0udGV4dENvbnRlbnQgPSBgSXRlbSAke2l0ZW1Db3VudH0gYDsKCiAgY29uc3QgZGVsZXRlQnV0dG9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgZGVsZXRlQnV0dG9uLnRleHRDb250ZW50ID0gJ0RlbGV0ZSc7CiAgZGVsZXRlQnV0dG9uLmNsYXNzTGlzdC5hZGQoJ2RlbGV0ZS1idG4nKTsKCiAgbmV3SXRlbS5hcHBlbmRDaGlsZChkZWxldGVCdXR0b24pOwogIGR5bmFtaWNMaXN0LmFwcGVuZENoaWxkKG5ld0l0ZW0pOwp9KTsKCi8vIEV2ZW50IGRlbGVnYXRpb24gdG8gaGFuZGxlIGl0ZW0gYW5kIGRlbGV0ZSBidXR0b24gY2xpY2tzCl9fX19fLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZXZlbnQgPT4gewogIGlmIChfX19fXykgewogICAgYWxlcnQoYFlvdSBjbGlja2VkIG9uOiAke2V2ZW50LnRhcmdldC5maXJzdENoaWxkLnRleHRDb250ZW50fWApOwogIH0KCiAgaWYgKGV2ZW50LnRhcmdldC5jbGFzc0xpc3QuY29udGFpbnMoJ2RlbGV0ZS1idG4nKSkgewogICAgY29uc3QgbGlzdEl0ZW0gPSBldmVudC50YXJnZXQucGFyZW50Tm9kZTsKICAgIGR5bmFtaWNMaXN0LnJlbW92ZUNoaWxkKGxpc3RJdGVtKTsKICB9Cn0pOw==

- クリックされた要素が`event.target.tagName === 'LI'`かどうかは、`<li>`で判定；
- クリックされた要素が「Delete」ボタンかどうかは、`event.target.classList.contains('delete-btn')`で判定。

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgovLyBBZGQgbmV3IGl0ZW1zIHRvIHRoZSBsaXN0CmFkZEl0ZW1CdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgaXRlbUNvdW50Kys7CiAgY29uc3QgbmV3SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgbmV3SXRlbS50ZXh0Q29udGVudCA9IGBJdGVtICR7aXRlbUNvdW50fSBgOwoKICBjb25zdCBkZWxldGVCdXR0b24gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdidXR0b24nKTsKICBkZWxldGVCdXR0b24udGV4dENvbnRlbnQgPSAnRGVsZXRlJzsKICBkZWxldGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnZGVsZXRlLWJ0bicpOwoKICBuZXdJdGVtLmFwcGVuZENoaWxkKGRlbGV0ZUJ1dHRvbik7CiAgZHluYW1pY0xpc3QuYXBwZW5kQ2hpbGQobmV3SXRlbSk7Cn0pOwoKLy8gRXZlbnQgZGVsZWdhdGlvbiB0byBoYW5kbGUgaXRlbSBhbmQgZGVsZXRlIGJ1dHRvbiBjbGlja3MKZHluYW1pY0xpc3QuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LnRhcmdldC50YWdOYW1lID09PSAnTEknKSB7CiAgICBhbGVydChgWW91IGNsaWNrZWQgb246ICR7ZXZlbnQudGFyZ2V0LmZpcnN0Q2hpbGQudGV4dENvbnRlbnR9YCk7CiAgfQoKICBpZiAoZXZlbnQudGFyZ2V0LmNsYXNzTGlzdC5jb250YWlucygnZGVsZXRlLWJ0bicpKSB7CiAgICBjb25zdCBsaXN0SXRlbSA9IGV2ZW50LnRhcmdldC5wYXJlbnROb2RlOwogICAgZHluYW1pY0xpc3QucmVtb3ZlQ2hpbGQobGlzdEl0ZW0pOwogIH0KfSk7

クラス、DOM操作、イベント処理、非同期プログラミングなど、JavaScriptの基本概念を習得します。ユーザーインタラクションの管理、データの取得と表示、非同期処理の効率的な実行によって、動的かつインタラクティブなWebアプリケーションの作成方法を学びます。理論、実践的な課題、実例を組み合わせた本コースは、現代のWeb開発に必要な実践的スキルを身につけることができます。

JavaScriptのクラスの基本を学び、クラス宣言から機能を強化するメソッドの定義までを習得します。パラメータオブジェクトの効果的な使用方法、プライベートプロパティの管理、getterおよびsetterによるアクセス制御について解説します。staticプロパティとstaticメソッドを習得し、「extends」と「super()」を用いたクラス継承の力を活用して、スケーラブルで再利用可能なコードを構築します。

DOM操作を習得し、動的でインタラクティブなWebアプリケーションを作成します。DOMの構造をナビゲートおよび変更し、コンテンツを動的に更新し、セキュリティとパフォーマンスのベストプラクティスを実装します。プロパティと属性の違いを理解し、コードを最適化します。

JavaScriptのイベントを習得することで、ウェブアプリケーションのインタラクティビティを引き出します。イベントの伝播を理解し、イベントの挙動を制御し、ユーザーインタラクションのための効率的なイベント処理を実装します。イベントデリゲーションなどの高度な手法でパフォーマンスを最適化します。

コールバック、Promise、async/await を含む非同期 JavaScript を深く学びます。API からのデータ取得、サードパーティライブラリの統合、複数リクエストの効率的な処理方法を習得し、データ駆動型アプリケーションを構築するためのスキルを身につけます。

チャレンジ：イベント伝播とデリゲーションの処理

課題