このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 学習環境を整えよう (02:37) 無料公開中
- 完成版の確認
- 学習環境の確認
- 作業用フォルダの設定
- index.htmlの作成
-
#02 HTMLのマークアップを進めよう (02:06) 無料公開中
- 完成版の確認
- 要素の配置
-
#03 CSSでスタイリングを進めていこう (02:39) 無料公開中
- style.cssの作成
- 余白のリセット
- .containerのスタイリング
-
#04 見出しとフォームのスタイルを整えよう (02:59) 無料公開中
- h1のスタイリング
- formのスタイリング
-
#05 リストのスタイルを整えよう (02:31) 無料公開中
- フレックスボックスの設定
- 余白の設定
-
#06 チェックしたときのスタイルを整えよう (02:25)
- span要素の追加
- 擬似クラス
- 隣接兄弟結合子
-
#07 JavaScriptの実装を進めていこう (02:25)
- main.jsの作成
- todosの宣言
- renderTodos関数の定義
-
#08 配列から要素を作っていこう (02:06)
- renderTodo関数の定義
- 構造の確認
-
#09 label内の要素を構築していこう (02:23)
- input要素の構築
- spn要素の構築
- label要素の構築
-
#10 li要素を描画していこう (02:08)
- button要素の構築
- li要素の構築
- リストの描画
-
#11 スタイリングを仕上げていこう (01:57)
- todosの変更
- 表示の確認
- 余白の設定
-
#12 フォームから投稿できるようにしよう (02:43)
- id属性の設定
- イベントリスナーの追加
- 項目の追加
-
#13 フォームを使いやすくしよう (02:31)
- フォームのクリアー
- focus()
- 余白の設定
-
#14 項目を削除できるようにしよう (02:35)
- イベントリスナーの追加
- 項目の削除
- confirmの設定
-
#15 localStorageを使ってみよう (02:32)
- localStorage.setItem()
- 開発者ツールによる確認
- localStorage.getItem()
-
#16 localStorageで複雑なデータを管理しよう (02:49)
- JSON.stringify()
- JSON.parse()
-
#17 追加されたデータを保存しよう (02:47)
- todosの設定
- todosの更新
-
#18 ユニークなIDを設定していこう (02:50)
- idプロパティの設定
- Date.now()
- コンソールでの確認
- インデックスに関する注意点
-
#19 削除処理を完成させよう (02:51)
- filterによる配列の更新
- 動作確認
-
#20 チェック処理を完成させよう (02:40)
- イベントリスナーの追加
- todosの更新
- 真偽値の反転
- localStorageの更新
-
#21 チェックした項目をまとめて削除しよう (02:52)
- イベントリスナーの追加
- todosの更新
- saveTodos関数の定義
-
#22 Todo管理アプリを完成させよう (02:33)
- li要素の削除
- renderTodos()の実行
