新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 Todo管理アプリを作ってみよう (02:44) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
-
#02 開発の準備をしよう (02:58) 無料公開中
- 開発用スクリプトの読み込み
- Appコンポーネントの作成
- React Developer Tools
-
#03 TodoListコンポーネントを作ろう (02:54) 無料公開中
- ダミーデータの用意
- TodoListコンポーネントの作成
-
#04 TodoItemコンポーネントを作ろう (01:22) 無料公開中
- TodoItemコンポーネントの作成
- 動作確認
-
#05 チェックボックスをつけよう (02:37)
- チェックボックスの作成
- onChange属性の追加
-
#06 Todoの完了状態を操作しよう (02:49)
- checkTodoの実装
- doneクラスのスタイリング
-
#07 スタイルを整えよう (02:43)
- Todoアプリのスタイリング
- ブラウザでの確認
-
#08 削除のためのリンクを作ろう (02:17)
- 削除リンクの作成
- 削除リンクのスタイリング
- onClick属性の追加
-
#09 Todoの削除処理を実装しよう (02:34)
- deleteTodoの実装
- 確認ダイアログの表示
- Todoが無い時のメッセージ表示
-
#10 フォームを追加していこう (02:02)
- TodoFormコンポーネントの作成
- フォームのスタイリング
-
#11 値を入力できるようにしよう (02:27)
- updateItemの実装
- 動作確認
-
#12 Todoを追加してみよう (02:12)
- onSubmit属性の追加
- addTodoの実装
-
#13 ユニークなIDを生成してみよう (02:52)
- ユニークなIDの生成と付与
- Developer Toolsでの確認
- 空投稿の防止
-
#14 TodoHeaderコンポーネントを作ろう (02:19)
- TodoHeaderコンポーネントの作成
- Todoの残数、総数表示のスタイリング
-
#15 Todoの総数と残数を表示してみよう (01:33)
- 完了状況と連動した総数、残数表示
- 動作確認
-
#16 完了したTodoをまとめて削除しよう (02:53)
- ボタンの作成、スタイリング
- purgeの実装
- 動作確認
-
#17 データの永続化をしてみよう (02:43)
- LocalStorage
- 不要なコードの削除
