最短で学ぶReactとReduxの基礎から実践まで
3.8 (401 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,307 students enrolled

最短で学ぶReactとReduxの基礎から実践まで

近年急速にJavaScript開発のスタンダードとなりつつあるReact.jsとReduxをゼロからコードを書きながら学びます。基本的な考え方から実用に耐え得るリファクタリングまでカバーしているので、すぐにでも実践で使えるようになります。
3.8 (401 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,307 students enrolled
Created by 佑介 村田
Last updated 12/2018
Japanese
Current price: $11.99 Original price: $199.99 Discount: 94% off
4 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6.5 hours on-demand video
  • 8 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • React・Reduxの基礎が理解できるようになります
  • 実践的なコードの書き方やリファクタリング方法が身につきます

  • React・Reduxでより大規模なアプリケーションを構築できるようになります

Course content
Expand all 49 lectures 06:33:59
+ 環境構築とHello world
15 lectures 38:35
完成版のソースコード
00:01
講座内で利用するエイリアスコマンド
00:09
エディタのインストール(atom)とプロジェクトの作成
02:42
パッケージマネージャー(yarn)のインストール
01:04
yarnでインストールするパッケージのバージョンについて
00:09
ES2015に必要なパッケージのインストール(bable・webpack)
04:41
次のレクチャーで利用するソースコード
00:14
ES2015でのHello world
07:40
[ご確認ください] eslintの実行ファイルが消えるエラーについて
00:03
静的解析ツール(eslint)の導入
07:10
次のレクチャーで利用するソースコード
00:29
sass/scssを用いたスタイルシートの導入
05:11
[ご確認ください] reactとreact-domのバージョンについて
00:03
+ Reactの基礎
4 lectures 27:12
propsを用いたcomponent間の情報伝達
06:12
stateを用いてcomponentに状態を持たせる
06:40
ユーザーの入力情報を取得する
08:01
+ Reactを使った実践的なWEBアプリケーションの作成
13 lectures 02:36:53
緯度経度検索サービスの概要と設計
02:37
jsxファイル上でのタグの自動補完
00:01
SearchFormコンポーネントの実装
13:09
GeocodeResultコンポーネントの実装
06:20
APIから緯度経度を取得する
13:06
Google Mapの導入
18:39
componentからロジックを逃がすリファクタリング
16:00
ホテル検索機能の概要と設計
13:30
ホテル検索機能のコンポーネント実装とバーチャルDOMの仕組みの解説
14:59
2つのAPIの連結
19:16
表示する情報の追加
13:24
ソート機能の作成
19:39
componentのライフサイクル
06:13
+ React Routerを使った複数ページのアプリケーション
6 lectures 44:12
作成するページの概要
01:14
SearchPageの切り出しと左ナビの追加
07:06
React RouterのインストールとAboutページの作成
09:14
React Routerの仕組み
04:40
history.pushでgetパラメータをつける
04:21
getパラメータをアプリ内で利用する
17:37
+ Reduxを使ったスケーラブルなアプリケーション
10 lectures 01:57:33
Flux・Reduxの概要
07:39
ReduxでのHello World
17:23
Presentational ComponentとContainer Componentの振り分け
10:23
Providerとconnect()を使って記述を簡略化する
15:41
redux-devtoolsのインストール
06:23
Reducerの分割とAjaxからのdispatch
16:16
Action Creatorの分割
12:26
Middlewareとthunkの解説
08:46
ホテル一覧部分のRedux化
14:58
React Routerの復活
07:38
+ 最後に
1 lecture 05:11
今後の学習に向けて
05:11
Requirements
  • HTML/CSSの基礎知識
  • JavaScriptの基本的な構文理解
  • UNIXコマンドの基礎知識
Description

JavaScriptを使ったリッチなWEBアプリケーションが増えるにつれて、千差万別なjQueryでの状態管理はメンテナンスの非常に難しいプロジェクトを量産しました。

そんな中で状態と表示の関係を宣言的に記述できるReact.jsは、大規模化するフロントエンドで保守性の高いコードを書くための強力なツールとして瞬く間に広まりました。

この講座は、ベンチャーのCTOとして2年前からReact.jsで自社サービスを開発している経験を元に、React.jsを基礎から学び、状態管理のライブラリであるReduxと共に現場で活躍できるレベルでの習得を目指して作られています。

サンプルを動かすだけではなく、どういう発想でコンポーネントを作成していくか、どういったトレードオフが発生するか、どこまでリファクタリングするかなど、実際に開発チームに教えていることも交えながらレクチャーを進めていきます。

React.jsでの手続き型から宣言型への発想の転換、Reduxの関数型プログラミングの考え方などはJavaScriptに限らずプログラミングのあらゆるレイヤーに応用できる思考法なので、ぜひそのエッセンスも一緒に学び取っていただければ幸いです。

Who this course is for:
  • Reactで実践的なWEBアプリケーションを作れるようになりたい方
  • jQueryでの開発に限界を感じている方