学習時間 | 20時間 |
---|---|
難易度 | 中級 |
質問投稿 | 可 |
【React/Redux】カンバンボードを実装して Web フロントエンド上級者を目指そう!
React/Reduxでカンバンボードの開発!ReduxをReactに導入する方法や、Reduxを使った設計のベストプラクティス、Reduxのアクションをユニットテストする方法までをわかりやすく解説。
現場レベルのスキルを初学者目線でわかりやすく解説
本教材は、React + Redux によるカンバンボード(ToDoリスト)の実装を通じて、web フロントエンドの本格的な開発手法を学ぶためのものです。 3 章まで終えることで初級者の方は中級者に、最後まで終えることで中級者の方は上級者になれるよう構成されています。
React と Redux の組み合わせは、一見難解なものの、最近は TypeScript と React Hooks によって劇的に書きやすくなっています。 小規模なプロトタイプから大規模なプロダクトまで適用できる強力なフレームワークセットのため、武器のひとつとして携える価値があります。
章の途中まででも十分なので、ぜひ取り組んでみてください。
この教材を終えたらどのような状態になっているか
✔︎ React (+ React Hooks, TypeScript) を使って web アプリを実装できる
✔︎ Redux を使わない状態管理と Redux を使った状態管理、どちらも実装できる
✔︎ Reducer のテストが書ける
✔︎ Redux を使った状態管理の設計ができる
✔︎ 状態管理の設計改善によって、レンダリング性能の最適化ができる
本教材は、React も JavaScript も初めてという開発チームに教えていた過去の自分を助けるつもりで作成しました。そのためこの教材を終えたころには、技術的にもメンタリティ的にも、実プロジェクトで働けるエンジニアになっているはずです。「教材だから」といってコード品質を落とした点はなく、また、どの web 開発現場でも汎用的に使えるツールセットを選びました。Reactを学習中の方は、ぜひチャレンジしてみてください!
学習内容
- Node.js, Visual Studio Code を使った、汎用的な web 開発環境の構築方法を学びます
- TypeScript + React で web アプリケーションを実装する方法を学びます
- Redux を React に導入する方法と、Redux を使った設計のベストプラクティスを学びます
- Redux のアクションをユニットテストする方法を学びます
作成するアプリケーションのイメージをつかむ
こちらのリンクから実際に触れます。
https://nb1ew.sse.codesandbox.io/
カンバンボードの機能は次のとおりです。
- カードを列ごとに表示できる
- カードを追加できる
- カードを並べ替えられる
- カードを削除できる
- カードをフィルタリングできる
この教材の対象者
- jQuery, Vue.js, Angular などを使ったことがあるが、React は使ったことのない方
- React は使ったことがあるが、Redux は使ったことのない方
- Redux は使ったことがあるが、React Hooks での書き方が初めての方
- React アプリケーションにおける状態管理の設計手法を知ってみたい方
受講における必要条件
- HTML/CSS の基礎知識
- JavaScript (ES2015), TypeScript の基礎知識
教材内で使う文法と JSX は解説します
ターミナルが使えること
と言ってもnpm
コマンドを実行するだけです
学ばないこと
- HTML/CSS の基礎知識
- React コンポーネントのスタイリングについて最小限の解説に留めます
- HTML ドラッグ&ドロップ API (https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API)
- 最終的な実装を解説するだけに留めます
- React コンポーネントや UI のテスト
- Reducer と util 関数のテストに留めます
- React のクラスコンポーネントや Redux の connect (HOC) を使った書き方
- 関数コンポーネントと React Hooks のみを使います
- クラスコンポーネントと React Hooks の共存方法には言及します
- React Router の使い方
- ページ遷移は実装しません
この教材の対応バージョン
- Node.js v12 以上(最新の文法を利用するため)
- TypeScript v3.8.0 以上(最新の文法を利用するため)
- React v16.8 以上(React Hooks を利用するため)
- React Redux v7.1.0 以上(React Hooks を利用するため)
本教材で質問対応可能なOSや環境
- Mac OS
本教材の構成
0 章: はじめに
この教材を進めるための環境を準備します。 カンバンボードの機能と設計の概要を把握します。
1 章: React のプロジェクトを準備する
Parcel, TypeScript, React をインストールします。
2 章: 静的なモック画面を作る
TypeScript と JSX の基礎文法を習得します。 インタラクションのない画面を作り、最終的なデザインに仕上げます。
3 章: useState でモックにインタラクションを加える
useState
を導入し、動きのあるアプリケーションにします。
4 章: JSON API とつないで機能を完成させる
API バックエンドと通信し、データの CRUD ができるようにします。 アプリケーションを完成させます。
5 章: Redux を導入してメンテナンス性を高める
Redux を導入し、アプリケーション状態の見通しを良くします。 Redux のデバッグ手法とテスト手法を学びます。
useSelector
をチューニングしてレンダリング性能を改善します。