localStorage を使った、データの保存 & 取得機能を実装する
この章のサンプルコード（実装例）
この章で開発する機能（localStorage を使った）のサンプルコードを用意したので、必要に応じて参考にしていただけたらと思います。
day4 「localStorage を使った、データの保存 & 取得機能を実装する」のサンプルコード
この章での開発の大まかな流れ
- locaStorage を使った Todo データの保存と取得周りの機能を実装する
- 1 で実装した機能を使って、reducer「create, remove, update, restore」内で localStorage に保存する処理を追記する
- localStorage から Todo データを取得する機能を実装する
- 3 で取得した Todo データを表示する（サンプルコードでは非同期処理を使った実装をしているため、データが表示されるまでの間は「読み込み中」と表示している）
動作イメージの確認は「サンプルアプリ」でご確認いただけたらと思います。
3 の「localStorage から Todo データを取得する機能を実装する」について、今回用意したサンプルコード非同期処理を使った実装をしていますが、今回の勉強会で作る Todo アプリでは非同期処理を使う必要はありません。
サンプルコードで、あえて非同期処理を使った実装にした理由については、サンプルコードの「src/features/todos/api/fetch.ts」の 10-16 行目にコメントで記述しているので、そちらをご確認いただけたらと思います。
質問ルール（day4 からは「自己解決力」「自走力」も伸ばす）
day4 「localStorage を使った、データの保存 & 取得機能を実装する」のサンプルコードをご覧いただくとわかると思いますが、変更差分はそこまで多くありません。
コードを読み解く力も身につけていただきたいので、day4 からは、各機能を実装する際に具体的にサンプルコードのどこを見れば良いかは説明しません。
もし、3 時間かけてもどうしてもわからなかった場合は、Discord で質問をいただけたらと思います。
開発の仕事であれば、わからない部分で何時間もかけてしまうと、他の人の開発にも支障がでるので、程よい時間で誰かに質問をした方が良い場面もあるでしょう。
しかし、今回は開発の仕事ではなく「学習」です。
学習初期段階では短い間隔で質問しても問題ないと思います。
ただ、ある程度プログラミングを理解してきたレベルになってきたら、わからない部分を自分で解決する力「自己解決力」「自走力」を鍛える必要があります。
厳しめに言うと「自己解決力」「自走力」が全くないエンジニアは、開発の仕事を継続するのは難しいです。
そのため、時間がかかってでも自分で実装できるようになってもらいたいため、「3 時間」に設定しました。
上記の説明に関することで不明点があれば Discord で質問をいただけたらと思います。
サンプルコードや実装に関しての質問の場合は、先ほども書いたように「最低 3 時間」は自分で色々と調べて自己解決を目指してください。
3 時間かけてもどうしても解決できなかった場合は、Discord で質問をいただけたらと思います。