ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/08
NEW
【週刊ドットインストール】 『JavaScript入門 DOM編』リリース、レッスン一覧ページをリニューアルしました
PREMIUM
ReactでTodo管理アプリを作ろう
Reactを使ってTodoを管理するアプリを作っていきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(17)
質問と回答
(18)
未完了
#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
不要なコードの削除
#02 開発の準備をしよう
なぜ即時関数を使用するのですか?
2022年1月27日
#03 TodoListコンポーネントを作ろう
forEach と map の違いはなんですか?
2022年1月27日
なぜTodoListを作る必要があるのでしょうか?
2022年1月27日
データである配列をconstで宣言するのはなぜでしょう?
2022年1月27日
#06 Todoの完了状態を操作しよう
todos[pos].isDone = !todo.isDone; とした方が良いのでは?
2022年1月27日
const pos = todo.id としてもよいのでは?
2022年1月27日
todoがたくさん出てきて混乱しています
2022年1月27日
isDoneを変更すべき要素がどうやって特定できているのかわかりません
2022年1月27日
#09 Todoの削除処理を実装しよう
const pos = todos.indexOf(todo);としてはいけないのでしょうか?
2022年1月27日
slice()は何をしているのですか?
2022年1月27日
this.state.todosはその直前のtodosですか?
2022年1月27日
checkTodo() と deleteTodo() で todos, pos の定義方法が異なるのはなぜですか?
2022年1月27日
#11 値を入力できるようにしよう
以前の動画で this.setState には prevState を利用していたのですが、今回無いのはなぜですか?
2022年1月27日
onChangeでアロー関数を渡したらうまくいきませんでした
2022年1月27日
updateItemメソッドの引数はどこで渡されているのですか?
2022年1月27日
#13 ユニークなIDを生成してみよう
required を使用して、空欄のまま送信した場合のアラートの文章を変更することはできますか?
2022年1月27日
#15 Todoの総数と残数を表示してみよう
filterメソッドのreturnについて教えて下さい
2022年1月27日
#16 完了したTodoをまとめて削除しよう
イベントでアロー関数を使うときと使わないときの違いは何ですか?
2022年1月27日
このレッスンについて
最終更新日
2018年3月29日
バージョン情報
React 16.2.0
関連キーワード
(6)
ミニプログラム
(142)
中級者向け
(115)
HTML5
(32)
CSS
(116)
JavaScript
(148)
React
(2)
このレッスンを共有する