最短で学ぶReactとReduxの基礎から実践まで
4.7 (20 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
190 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 最短で学ぶReactとReduxの基礎から実践まで to your Wishlist.

Add to Wishlist

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

近年急速にJavaScript開発のスタンダードとなりつつあるReact.jsとReduxをゼロからコードを書きながら学びます。基本的な考え方から実用に耐え得るリファクタリングまでカバーしているので、すぐにでも実践で使えるようになります。
New
4.7 (20 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
190 students enrolled
Created by 佑介 村田
Last updated 9/2017
Japanese
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • 6 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • React・Reduxの基礎が理解できるようになります
  • 実践的なコードの書き方やリファクタリング方法が身につきます
  • React・Reduxでより大規模なアプリケーションを構築できるようになります
View Curriculum
Requirements
  • HTML/CSSの基礎知識
  • JavaScriptの基本的な構文理解
  • UNIXコマンドの基礎知識
Description

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

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

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

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

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

Who is the target audience?
  • Reactで実践的なWEBアプリケーションを作れるようになりたい方
  • jQueryでの開発に限界を感じている方
Compare to Other Web Development Courses
Curriculum For This Course
47 Lectures
06:32:53
+
環境構築とHello world
13 Lectures 38:36

完成版のソースコード
00:01

講座内で利用するエイリアスコマンド
00:09

エディタのインストール(atom)とプロジェクトの作成
02:42

パッケージマネージャー(yarn)のインストール
01:04

yarnでインストールするパッケージのバージョンについて
00:17

ES2015に必要なパッケージのインストール(bable・webpack)
04:41

次のレクチャーで利用するソースコード
00:14

ES2015でのHello world
07:40

静的解析ツール(eslint)の導入
07:10

次のレクチャーで利用するソースコード
00:29

sass/scssを用いたスタイルシートの導入
05:11

+
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
About the Instructor
佑介 村田
4.7 Average rating
19 Reviews
190 Students
1 Course
Ruby, React, Swift

株式会社AIトラベルでCTOを務めています。

京都大学経済学部を卒業後、新卒で楽天株式会社に入社。1年間新卒採用を経験した後、希望してエンジニアに転身。3年間開発を経験した後、今の会社の社長に誘われ一緒に起業。

楽天時代から多数の言語・フレームワークが混在するチームで技術を磨き、現在はRuby on RailsとReactを主に使っています。

インフラからフロントまでもりもり開発中です。