教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
この教材では、React/Redux を用いて Google カレンダーのクローンアプリを作成していきます。
「チュートリアルをやってみて react について学んだけど、実際の大規模なプロジェクトでどのように設計したらいいか分からない」「非同期処理の扱い方は分かったけど、実際の API を使う際ににどのようにしてコードを書いたらいいかわからない」「複雑なロジックを含んだアプリケーションを開発しようとしたらどこから作っていいかわからない」といった思いをした経験はないでしょうか?
実際に僕が初めて React を学んだときは上記のようなことを感じ、初学者の方が挫折してしまう大きな原因になっていると痛感しました。その後苦労しながら独学で習得したのですが、なかなか体系的に学べる教材もなく大規模なプロジェクトの設計手法を学べる教材もありませんでしたし、今でもオープンになっている情報は少ないように感じます。
そこでこれから React を学ぶ人が僕と同じ思いをせずに最速で React を用いたアプリケーションの構築方法を習得していただくためにこの教材を作ろうと決心しました。
他では学べないこの教材の強みとして以下のことが挙げられます。
これらの内容でどれかひとつ1つでも当てはまる方は騙されたと思って買って作ってみてください。きっとあなたの課題が解決されるはずです!
まだ react を触ったことがない人は、事前に progate の javascript, es6, react の講座の受講をおすすめします。git に関しては github からプロジェクトをクローンするだけなのでそれほど深い知識は必要ありません。(zip でのダウンロードも可能なので全く知識がなくても大丈夫です。)
より実践的な部分にフォーカスしたかったため他でも学べる部分については詳しく説明していないのでその点はご了承ください。progate で React の基礎について理解していれば十分この教材を進めることは可能です。
また、redux については詳細に説明しているので触ったことがなくても大丈夫です。(redux の習得にフォーカスしたチュートリアルも用意しています。)
React は hooks が使えたら問題ないので他のバージョンでも大丈夫です。(デフォルトでこのバージョンの React がインストールされるようにしてあるので特に意識する必要はありません)
Node.js に関しては最新の v12 系で動作することを確認していますが、v8 系以降の最近の他のバージョンでも問題ないと思います。もし問題があった場合は v12 系にアップデートしてみてください。
この教材では以下のような Google カレンダーライクなアプリケーションを作成します。
デモはこちら
また、完成版のコードをGitHub の production ブランチにあげているので購入の検討・学習中の参考にしてください。
コミットは一応章ごとになっていますが実際のコードと若干の差異があったり古いコートがあるのであくまで参考程度にしてください。(動くコードにはなっています。)
Copied!0. 環境構築・設計
0.1 この教材について
0.2 必要なツールの準備(Mac)
0.3 必要なツールの準備(Windows)
0.4 開発環境を作ろう
1. reduxについて知ろう
1.1 reduxとは
1.2 reduxの登場人物
1.3 react-redux
1.4 reduxを触ってみよう(環境構築編)
1.5 reduxの中身を実装しよう
1.6 reactに接続しよう
1.7 表示させて完成させよう
2. カレンダーのUIを作ろう
2.1 必要なライブラリのインストールをしよう
2.2 カレンダーのUIを作成しよう
2.3 日付の配列を作ろう
2.4 リファクタをしよう
2.5 Googleカレンダーに近づけよう
2.6 Googleカレンダーに近づけよう(2)
3. カレンダーをreduxでデータを管理しよう
3.1 calendarの状態を管理するreduxを作ろう
3.2 reduxをreactに接続しよう
3.3 ToolBarを導入しよう
3.4 カレンダーを切り替えられるようにしよう
3.5 DatePickerを導入しよう
4. 予定を追加するdialogを実装しよう
4.1 新しい予定を管理するreduxを作成しよう
4.2 dialogを導入しよう
4.3 入力フォームを作成しよう
4.4 DatePickerで日付を選べるようにしよう
4.5 dialogをリッチにしよう
5. 予定を追加できるようにしよう
5.1 予定を管理するreduxを作成しよう
5.2 保存できるようにしよう
5.3 カレンダーの配列に予定を追加しよう
5.4 予定を表示するUIを作ろう
5.5 予定の詳細を表示する用のreduxを作ろう
5.6 予定の詳細を表示するdialogを実装しよう
6. 非同期処理を実装しよう
6.1 APIの仕様を理解しよう
6.2 reduxにおける非同期処理の実装方法を知ろう
6.3 サーバーから予定を取得しよう
6.4 サーバーに予定をPOSTしよう
6.5 削除機能を実装しよう
7. UXを向上させよう
7.1 バリデーションを追加しよう
7.2 通信のエラーハンドリングを行おう
7.3 エラーを表示させよう
7.4 hoverでボタンの説明を表示するようにしよう
7.5 dialogを閉じるときにconfirmが出るようにしよう