カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-1

この教材について

この教材では、React/Redux を用いて Google カレンダーのクローンアプリを作成していきます。

「チュートリアルをやってみて react について学んだけど、実際の大規模なプロジェクトでどのように設計したらいいか分からない」「非同期処理の扱い方は分かったけど、実際の API を使う際ににどのようにしてコードを書いたらいいかわからない」「複雑なロジックを含んだアプリケーションを開発しようとしたらどこから作っていいかわからない」といった思いをした経験はないでしょうか?

実際に僕が初めて React を学んだときは上記のようなことを感じ、初学者の方が挫折してしまう大きな原因になっていると痛感しました。その後苦労しながら独学で習得したのですが、なかなか体系的に学べる教材もなく大規模なプロジェクトの設計手法を学べる教材もありませんでしたし、今でもオープンになっている情報は少ないように感じます。

そこでこれから React を学ぶ人が僕と同じ思いをせずに最速で React を用いたアプリケーションの構築方法を習得していただくためにこの教材を作ろうと決心しました。

他では学べないこの教材の強みとして以下のことが挙げられます。

  • React/Redux を用いた開発の設計手法の習得
  • 実践的な API(教材として提供)を使った非同期処理の習得
  • 複雑なロジックを含むアプリケーションの構築方法の習得

これらの内容でどれかひとつ1つでも当てはまる方は騙されたと思って買って作ってみてください。きっとあなたの課題が解決されるはずです!

学習内容

  • react を使った実践的な開発スキル
  • redux による状態管理
  • 実践的な API サーバーとの通信(非同期処理)
  • react/redux を用いた開発の設計手法
  • インタラクティブな UI を持つアプリケーション開発

受講における前提知識

  • javascript の基礎知識(es6 含む)
  • react の基礎知識
  • git の基礎知識

まだ react を触ったことがない人は、事前に progate の javascript, es6, react の講座の受講をおすすめします。git に関しては github からプロジェクトをクローンするだけなのでそれほど深い知識は必要ありません。(zip でのダウンロードも可能なので全く知識がなくても大丈夫です。)

より実践的な部分にフォーカスしたかったため他でも学べる部分については詳しく説明していないのでその点はご了承ください。progate で React の基礎について理解していれば十分この教材を進めることは可能です。

また、redux については詳細に説明しているので触ったことがなくても大丈夫です。(redux の習得にフォーカスしたチュートリアルも用意しています。)

この教材の対象者

  • React の基本概念はなんとなく理解したけど何を作ったらいいかわからない人
  • Redux による状態管理がいまいちまだよくわかっていない人
  • 実践的な設計や API を使った開発を経験してみたい人

学ばないこと

  • API 開発の詳細
  • docker を用いた環境構築
  • HTML/CSS によるコーディング
  • git の詳細な使い方

本教材の対応バージョン

  • React v16.8 以降
  • Node v12

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が出るようにしよう