## 課題
ユーザーが商品を追加および削除できるショッピングカートの構築。
1. **カートに商品を追加する：**
   - 新しい `<li>` 要素の作成；
   - 新しい `<button>` 要素の作成；
   - 新しい `<button>` 要素を新しい `<li>` 要素に追加；
   - 新しい `<li>` 要素を `cart-list` ID を持つ `<ul>` に追加。
2. **カートから商品を削除する：** 対象の `<li>` 要素を `<ul>` から削除。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNob3BwaW5nIENhcnQ8L2gxPgogICAgPGlucHV0CiAgICAgIHR5cGU9InRleHQiCiAgICAgIGlkPSJwcm9kdWN0LW5hbWUtaW5wdXQiCiAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciBwcm9kdWN0IG5hbWUiCiAgICAvPgogICAgPGJ1dHRvbiBpZD0iYWRkLXRvLWNhcnQtYnRuIj5BZGQgdG8gQ2FydDwvYnV0dG9uPgogICAgPHVsIGlkPSJjYXJ0LWxpc3QiPjwvdWw+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdWZXJkYW5hJywgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZjOwogIG1hcmdpbjogMDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4OwogIGNvbG9yOiAjMzMzOwp9CgpoMSB7CiAgZm9udC1zaXplOiAycmVtOwogIGNvbG9yOiAjMDA3YmZmOwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmlucHV0W3R5cGU9J3RleHQnXSB7CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDFyZW07CiAgYm9yZGVyOiAxcHggc29saWQgI2NlZDRkYTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgd2lkdGg6IDI1MHB4OwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmJ1dHRvbiB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyMTg4Mzg7Cn0KCiNhZGQtdG8tY2FydC1idG4gewogIG1hcmdpbi1sZWZ0OiAxMHB4Owp9Cgp1bCB7CiAgbGlzdC1zdHlsZS10eXBlOiBub25lOwogIHBhZGRpbmc6IDA7CiAgd2lkdGg6IDMwMHB4OwogIG1hcmdpbi10b3A6IDFyZW07Cn0KCmxpIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMTBweDsKICBtYXJnaW4tYm90dG9tOiA4cHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjMzMzOwp9CgpsaSBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNkYzM1NDU7CiAgcGFkZGluZzogNXB4IDEwcHg7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmxpIGJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2M4MjMzMzsKfQ==

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50Ll9fX19fKCdsaScpOwogIGNhcnRJdGVtLnRleHRDb250ZW50ID0gcHJvZHVjdE5hbWVJbnB1dC52YWx1ZTsKCiAgLy8gQ3JlYXRlICJSZW1vdmUiIGJ1dHRvbiBmb3IgdGhlIGNhcnQgaXRlbQogIGNvbnN0IHJlbW92ZUJ0biA9IGRvY3VtZW50Ll9fX19fKCdidXR0b24nKTsKICByZW1vdmVCdG4udGV4dENvbnRlbnQgPSAnUmVtb3ZlJzsKCiAgLy8gQXBwZW5kIHRoZSAiUmVtb3ZlIiBidXR0b24gdG8gdGhlIGNhcnQgaXRlbQogIGNhcnRJdGVtLl9fX19fKHJlbW92ZUJ0bik7CgogIC8vIEFwcGVuZCB0aGUgbmV3IGl0ZW0gdG8gdGhlIGNhcnQgbGlzdAogIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsKCiAgLy8gQ2xlYXIgdGhlIGlucHV0IGZpZWxkCiAgcHJvZHVjdE5hbWVJbnB1dC52YWx1ZSA9ICcnOwoKICAvLyBBZGQgY2xpY2sgZXZlbnQgdG8gIlJlbW92ZSIgYnV0dG9uIHRvIGRlbGV0ZSB0aGUgaXRlbQogIHJlbW92ZUJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsgLy8gUmVtb3ZlIHRoZSBzcGVjaWZpYyA8bGk+IGl0ZW0KICB9KTsKfSk7

- `createElement` を使用して新しい `<li>` 要素を作成；
- `createElement` を使用して新しい `<button>` 要素を作成；
- `appendChild` を使用して新しい `<button>` 要素を `<li>` 要素に追加；
- `appendChild` を使用して新しい `<li>` 要素を ID が `<ul>` の `cart-list` に追加；
- `removeChild` を使用して対象の `<li>` 要素を `<ul>` から削除。

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgY2FydEl0ZW0udGV4dENvbnRlbnQgPSBwcm9kdWN0TmFtZUlucHV0LnZhbHVlOwoKICAvLyBDcmVhdGUgIlJlbW92ZSIgYnV0dG9uIGZvciB0aGUgY2FydCBpdGVtCiAgY29uc3QgcmVtb3ZlQnRuID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgcmVtb3ZlQnRuLnRleHRDb250ZW50ID0gJ1JlbW92ZSc7CgogIC8vIEFwcGVuZCB0aGUgIlJlbW92ZSIgYnV0dG9uIHRvIHRoZSBjYXJ0IGl0ZW0KICBjYXJ0SXRlbS5hcHBlbmRDaGlsZChyZW1vdmVCdG4pOwoKICAvLyBBcHBlbmQgdGhlIG5ldyBpdGVtIHRvIHRoZSBjYXJ0IGxpc3QKICBjYXJ0TGlzdC5hcHBlbmRDaGlsZChjYXJ0SXRlbSk7CgogIC8vIENsZWFyIHRoZSBpbnB1dCBmaWVsZAogIHByb2R1Y3ROYW1lSW5wdXQudmFsdWUgPSAnJzsKCiAgLy8gQWRkIGNsaWNrIGV2ZW50IHRvICJSZW1vdmUiIGJ1dHRvbiB0byBkZWxldGUgdGhlIGl0ZW0KICByZW1vdmVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICBjYXJ0TGlzdC5yZW1vdmVDaGlsZChjYXJ0SXRlbSk7IC8vIFJlbW92ZSB0aGUgc3BlY2lmaWMgPGxpPiBpdGVtCiAgfSk7Cn0pOw==

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

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

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

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

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

チャレンジ：DOM要素の追加と削除

課題