カテゴリー
サインイン 新規登録
学習時間 20時間
難易度 中級
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

【React/Redux】カンバンボードを実装して Web フロントエンド上級者を目指そう!

React/Reduxでカンバンボードの開発!ReduxをReactに導入する方法や、Reduxを使った設計のベストプラクティス、Reduxのアクションをユニットテストする方法までをわかりやすく解説。

3.8
最終更新 2021/3
蝦名一真

現場レベルのスキルを初学者目線でわかりやすく解説

本教材は、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 をチューニングしてレンダリング性能を改善します。

カリキュラム

Section 0 はじめに
Section 1 React のプロジェクトを準備する
Section 2 静的なモック画面を作る
  • 2-1 TypeScript と JSX の基礎文法を習得する
  • 2-2 styled-components でデザインを実装し、コンポーネントの実装に慣れる
  • 2-3 App コンポーネントを分割し、コンポーネントの分割に慣れる

講師のプロフィール

教材のレビュー

3.8
8件の評価
50%
0%
37%
0%
12%
takenaka.yuto 1年以上前
コードの解説もなくて意味がわからない点が多すぎる。 自分で調べたらわかるけど、調べる過程があまりにも多いためこの教材で勉強する意味がないと思った。 Techpitで勉強している人がどれくらいのレベルの人か想定した上で解説などをしてほしいと思った。
佐々木千尋 1年以上前
仕事が知財関連で、エンジニアさんの書いたコードを見たりする機会はあるものの、自分で1から書くという経験はありませんでしたが、息子の夏休みの宿題を手伝うために受講しました。こちらの教材は一つひとつの解説もわかりやすく、かつ全体における位置付けも見失わずに済むような構成でした(なんで今こんなコード書いてるんだっけ?みたいなことにならない)ので、最後までやり切ることができました。実務を踏まえたより細かい もっと見る
佐藤樹 1年以上前
説明が気薄で初心者にわかりやすいとは言えないと思いました