ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/03/24
NEW
『Nuxt入門 基礎編』をリリースしました
2025/03/20
NEW
【週刊ドットインストール】 レッスン制作の進捗、社内開発のススメ
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
【旧版】ReactでTodo管理アプリを作ろう
Reactを使ってTodoを管理するアプリを作っていきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
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日
リリース情報(note)
『ReactでTodo管理アプリを作ろう』を追加しました
詳細情報
最終更新日
2018年3月29日
バージョン情報
React 16.2.0