フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
4.2 (962 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.
5,112 students enrolled

フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

RESTful APIサーバと連携する実践的なCRUDアプリケーション開発手法を学び、今後のフロントエンドWeb開発の標準になり得るReact・Reduxアプリケーション開発をマスターし、もう一段階上のJavsScriptエンジニアになろう
Bestseller
4.2 (962 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.
5,112 students enrolled
Last updated 1/2019
Japanese
Current price: $119.99 Original price: $199.99 Discount: 40% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 1 article
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 実践的かつモダンなフロントエンド開発手法を学ぶことができる
  • CRUDが実行できる動的なReact・Reduxアプリケーションの実装方法を学ぶことができる
  • 外部のRESTful APIと連携するReactアプリケーションの開発手順及び開発方法を体得することができる
  • Material-UIを使用した美しいUIの実装ができるようになる
  • ES2017を利用した可読性の高いコードの書き方が身に付く
Course content
Expand all 47 lectures 07:14:36
+ はじめに
2 lectures 08:42
本コースの全ソースコードはこちら
02:48
+ 開発環境構築編
6 lectures 23:44

このレクチャーではNodeをインストールします。

何かご不明な点がありましたら遠慮無くQ&Aに投稿してください。

では、引き続き頑張っていきましょう!

Dive into Hacking!

はむ

Preview 06:05

プログラミング開発でよく使用されるエディターを紹介します。

以下はいずれも、macOS、Windows、Linuxのどのプラットフォームでも動作する人気のあるテキストエディターです。

本講座では私が一番使い慣れているVimを使用しますが、どのエディターで作業されても構いません。お好きなものをリンク先よりダウンロードしてお使いください。

エディターの紹介
00:41
Yarnのインストール
01:06
GitHubのリポジトリ作成
01:33
create-react-appのインストール
07:14
自分専用のboilerplateを作成しよう
07:05
+ Reactアプリケーション基礎編
9 lectures 01:18:30
Reactの概要について
01:59
JSX
06:24
トランスパイラー
05:01
webpack
03:34
Component
05:20
props
11:16
prop-types
09:01
State
21:26
+ Reduxアプリケーション基礎編
5 lectures 45:41
Reduxイントロダクション
00:57
Action
09:59
Reducer
12:03
connectでstateとactionsとの関連付けを行う
14:57
+ React・Reduxアプリケーション実践編
22 lectures 03:58:53
イントロダクション
01:24
React CRUDアプリケーションの仕様
04:23
ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - 全データ取得時
06:35
ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - 特定のデータ取得時、データ更新時
07:51
ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - データ作成時、データ削除時
07:08
APIサーバの仕様をcurlで確認する
07:22
アクションでイベント一覧を取得する
20:00
イベント一覧を画面に表示する
16:55
イベント新規作成画面への画面遷移を実装する
11:28
イベント新規作成画面のコンポーネントをreduxFormでdecorateする
19:54
APIサーバにイベント新規作成要求を送信する
21:39
送信ボタンのdisabled状態を調整する
06:57
Redux DevToolsを導入しデバッグし易い環境を整える
07:23
イベント更新画面用のコンポーネントを作成する
10:12
イベント削除機能を実装する
16:24
イベントの詳細情報を更新画面に表示する
14:16
イベント更新機能を実装する
17:32
Material-UI概説
03:29
【注意喚起】material-uiのインストール時、動画内で使用しているバージョンと同じものを必ず指定してください
00:37
Material-UIの適用(一覧画面)
18:11
Material-UIの適用(新規作成画面、編集画面)
13:45
+ レシピ編
1 lecture 25:12
React v16.3 Context API
25:12
+ Q&A編
1 lecture 12:16
質問 #5994878 - redux-formのenableReinitializeについて
12:16
+ おわりに
1 lecture 01:37
おわりのご挨拶
01:37
Requirements
  • HTML、CSS、JavaScriptの基礎知識
  • gitの基礎知識及び基本操作
  • macOSあるいはLinux
  • ブラウザ、Google Chromeの最新版を推奨
  • テキストエディタ(Visual Studio Code、Atom、vim等お好みのもの)
  • 動画で紹介する手順の通りにならない場合でも、諦めることなく質問して解決しようとする意欲や積極性
Description

本コースでは、フロントエンドUser Interface開発のためJavaScriptのライブラとして多くの開発者に支持されているReactを題材にし、実際にコーディングを進めながらReactプログラミング技術を習得するという内容になっています。 また、よくReactとセットで用いられる状態管理のためのライブラリであるReduxについても学んで頂けるコースとなっています。

プログラミング習得のための最大の近道は、「とにかく書いて動かすこと!」というのが私の信念です。ReactReduxの習得の学習コストは高いと言われていますが、 とにかく、コードを書いて、その挙動を目で確認しながら、まるでゲームをしているかのごとく体得してもらうことが最も効率的だと私は考えており、このコースの内容もその信念に基づいて設計しています。

本コースの中では受講生の皆様に外部サーバと連携するアプリケーションを開発して頂きます。それはいわゆるCRUDアプリケーションで自在に外部のRESTful APIサーバと連携しながらデータを外部サーバに永続化できる実用的なアプリケーションで現実世界にもよく見かける形態の一つですので、実際の業務にも応用できる技術と言えます。

こんなアプリケーションの実装について興味を持たれた方は是非本コースをご受講ください。

また、何か問題が起きた場合もご安心ください。UdemyではQ&Aを通じて講師と共にその問題を解決しながらコースに取り組んで頂ける仕組みがあります。是非この仕組も十分に活用頂き本コースを通じて皆様の成長のために貢献できるよう頑張ります!

では、本コースでお会いできるのを楽しみにしております!

Who this course is for:
  • モダンなフロントエンド開発の知識を身に付けたい方
  • jQueryの使用経験はあるがReactの使用経験はなく、Reactを使用してみたいとお考えの方
  • Reduxによる状態の管理の方法を学びたいとお考えの方
  • Reactを使用したウェブアプリケーションの開発経験はあるが複雑なUIの実装経験は無い方