このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 アプリを使いやすくしていこう (02:20) 無料公開中
- クラス編までの振り返り
- 現在の実装における問題点
-
#02 fetch()を使ってみよう (01:56) 無料公開中
- フォルダ構成の確認
- fetch()
-
#03 fetch()でデータを送信してみよう (01:36) 無料公開中
- URLSearchParams()
- 必要なパラメータの設定
-
#04 カスタムデータ属性を設定しよう (02:16) 無料公開中
- カスタムデータ属性の設定
- id、tokenの取得
- コードの整理
-
#05 JavaScriptでページを書き換えよう (02:44) 無料公開中
- toggle()メソッドの変更
- doneクラスの付け替え
-
#06 非同期処理について理解しよう (02:33)
- 同期処理
- 非同期処理
- 非同期処理の利点
-
#07 CSSのセレクタを工夫してみよう (01:28)
- CSSセレクタによる実装
- 動作確認
-
#08 削除処理を書き換えていこう (01:54)
- 削除処理の書き換え
- CSSの整理
-
#09 削除処理を完成させよう (01:47)
- fetch()
- Todoの削除
-
#10 Purge処理を書き換えていこう (02:20)
- Purge処理の書き換え
- スタイルの整理
-
#11 チェックされたTodoを削除しよう (01:56)
- Todoの一括削除
-
#12 token関連のコードを整理しよう (02:27)
- token関連のコードを整理
- 動作確認
-
#13 id関連のコードを整理しよう (02:24)
- id関連のコードを整理
- 動作確認
-
#14 追加処理について見ていこう (02:39)
- 追加処理の流れ
-
#15 then()で値を受け取ろう (02:14)
- then()
- response.json()
- 結果の取得
-
#16 フォームにイベントを設定しよう (02:09)
- イベントリスナーの追加
- preventDefault()
- fetch()
-
#17 JSON形式でデータを送信しよう (01:53)
- lastInsertId()
- header()
- json_encode()
-
#18 JSONデータを取得していこう (01:58)
- response.json()
- JSONデータの取得
-
#19 非同期処理の流れを確認しよう (02:22)
- 入力値のクリア
- focus()
- 処理順の確認
-
#20 Todoを追加していこう (01:24)
- addTodo()
- 必要な要素の確認
-
#21 必要な要素を作っていこう (02:06)
- 必要な要素の作成
-
#22 li要素をページに追加しよう (02:09)
- li要素の組み立て
- ul要素への追加
-
#23 不具合を修正していこう (02:23)
- 処理順の確認
- 不具合の修正
-
#24 イベントの伝播を活用しよう (02:51)
- イベントの伝播
- 要素に応じた条件分岐
-
#25 イベントを動作させていこう (01:59)
- イベント処理の修正
- 動作確認
-
#26 複数ウィンドウでの挙動を確認しよう (02:47)
- 複数ウィンドウでの挙動確認
- 対処すべき2つのパターン
-
#27 Todoが削除されたか調べよう (02:49)
- Todoのチェック
- header('HTTP', true, 404)
- HTTP status code
-
#28 通信エラーに対処していこう (02:40)
- response.ok
- catch()
- Errorオブジェクト
-
#29 最新のチェック状態を取得してみよう (02:25)
- チェック状態の取得
- JSONデータの送信
-
#30 Todoのチェック状態を修正しよう (02:28)
- JSONデータの取得
- UIの更新
2021年3月18日
2021年3月23日
2021年3月23日
2021年3月18日
2021年4月15日
2021年3月23日
