React + Redux を使用したモダンフロントエンド開発
4.0 (228 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.
678 students enrolled

React + Redux を使用したモダンフロントエンド開発

React + Redux + Redux-thunk + Ajax を用いた実践的なアプリケーションを作成します。React 開発を通して、ES2015+ や 非同期処理などモダンフロントエンド開発に必要な基礎知識も身につけられます。
4.0 (228 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.
678 students enrolled
Created by Nakanishi Yusuke
Last updated 3/2019
Japanese
Price: $79.99
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 4 articles
  • 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
  • React と Redux を使用したシングルページアプリケーションを作成します
  • ES2015+ 等を使用したモダンなフロントエンド開発へ移行しましょう
  • ブラウザ上で動く IDE である CodeSandbox を使用するので、開発環境の構築でつまづくことなく、React の開発を学ぶことができます
  • 各レクチャーは、小さくモジュール化してあるので、着実に学習を進めることができます
Course content
Expand all 73 lectures 06:12:22
+ コース概要
1 lecture 01:13

React を学んでいきましょう!

リソースに、テキストのURLを添付しました。該当するレクチャーを見る前に、軽くテキストに目を通してから、動画を確認いただくと、より理解しやすいかと思います。

Preview 01:13
+ State を持った React Component
12 lectures 57:28
ES2015 の class 構文
06:48
React Class Component の書き方
04:22
click された時に setState で state を変更する
06:08
実践1: H20 Component1
06:00
実践1: H20 Component2
02:28
実践1: H20 Component3
05:32
実践1: H20 Component4
02:41
map
05:15
filter
05:29
map と filter の実践 1
05:34
map と filter の実践 2
03:48
+ 実践 TodoApp の作成
7 lectures 41:32
TodoApp の概要
03:47
TodoApp のコンポーネントを配置する
06:28
state を与え、List コンポーネントに渡す
05:19
AddTodo コンポーネントを作り込む
09:11
state を変更するメソッドを作成し、子コンポーネントに渡す
06:59
todo を削除するメソッドを作成し、子コンポーネントに渡す
05:47
リファクタリング
04:01
+ 非同期な HTTP 通信を行う
7 lectures 36:30
HTTP プロトコルと AJAX
05:13
Axios を使った Ajax のデモ
03:37
非同期処理と Promise
08:13
JSON を非同期に取得しレンダリングする React App
04:12
実践1: JSON を取得する
03:02
実践2: state を取得した JSON で変更し、レンダーする
08:36
+ Giphy API を使って GIF 画像を表示する React App を作る
6 lectures 30:40
Giphy API を叩く
05:58
React に組み込む
08:07
img 要素を state を元にレンダリングする
03:39
検索用窓の追加
08:27
CSS でスタイリング
03:31
+ Redux
10 lectures 01:13:51
Redux の概要
04:58
Redux のコードの概要
15:00
createStore で store を作る
08:58
reducer を別ファイルに切り出し、また payload も活用する
04:05
Provider を使って store を React で使用する準備をする
05:00
connect で state と dispatch をコンポーネントに紐づける
11:08
Redux の全体像の確認
04:27
Container Component と Presentational Component
08:53
Action Creator
04:34
Combine reducer
06:48
+ Redux-thunk を使って非同期処理をおこなう
2 lectures 19:55
Redux-thunk で非同期にアクションを発行する
09:40
Promise を Redux-thunk 上で活用する
10:15
+ 実践: React + Redux + Redux-Thunk で GiphyAPI を活用する App
11 lectures 40:30
Store の作成
03:20
Reducer の作成
03:30
コンポーネントに store を connect する
06:27
サーチコンポーネントの作成
02:41
GiphyAPI を叩くメソッドの作成
04:12
redux-thunk を適用する
01:24
Action を作る
05:51
Search コンポーネントにメソッドを connect する
04:06
小さな修正
01:11
ロード状況をボタンに表示する
05:04
CSS でスタイリングをする
02:44
Requirements
  • HTML, CSS の十分な知識
  • JavaScript の基礎的な知識 (簡単な学習者レベルのアプリの作成経験があれば OK です)
  • [不必要] : Git の知識、 Node の開発環境の知識、ES2015+ の高度な理解
Description

昨今、ウェブ制作の環境は 10 年前とは大きく変わりました。特に JavaScript の変化が大きく、ちょっとしたアニメーションを実装するための存在だった JavaScript は、今やフロントエンドの主役として、インタラクティブな UI を提供するための中心的な役割を果たしています。

具体的には本講義で取り上げる React 等の JavaScript によるビューライブラリが盛んに使用されるようになりました。


- React アプリケーション開発の難しさについて

React 自体は JavaScript で書かれた「ライブラリ/フレームワーク」であって、React のために書くコードも React 特有の文法はほぼなく、JavaScript がわかれば React は理解できるものではあります。

しかし、そこで必要な JavaScript の知識は、純粋なウェブサイトの作成では必ずしも必要となるものではないため、ウェブサイト制作の業務から React を用いたウェブアプリケーションの作成に移行する際に、JavaScript の知識が壁となって React への参入が難しくなっているものだと思われます。

実際私はそうでした。ランディングページやシンプルな企業サイトにおいては、HTML と CSS の知識が中心的に必要なものであり、JavaScript は jQeury を使ったアニメーションやトグルやスライドを実装する際に少し必要というレベル感であって、この JavaScript の知識では React に取り組むには足りませんでした。


- React 学習の困難さを減らすための本講義

そしてこのギャップを埋めるためには自学自習するしかないのですが、そのためのちょうどいい資料が日本語ではないと感じていました。特に公式のドキュメントやチュートリアルが日本語では提供されていないことが大きな壁です。幸い私は英語のドキュメントを読むことができたので、学習を進めつつ、その資料の日本語訳をおこないました。

この資料はそういった学習を通して得た知識の日本語へのトランスコンパイルであり、さらに手を動かしてコードを書きやすいように整理したものでもあります。単に知識を羅列するのではなく、初学者が順番にコードを書きながら、順番に知識をつけていくことができることを目的としています。


- 充実した基本的なシンタックスの説明

import, export, class, map, arrow-function といった ES2015+ のシンタックスの説明にもかなりの分量を割き、コードを読んでいく上でつまづかないようにしました。


- CodeSandbox で動くコードを確認できる

動画で説明をされただけでは、なかなか理解できないと思います。そこで、ブラウザ上で提供される CodeSandbox というサービスを使い、全てのコードを動く状態で確認することができるようにしました。

テキストに付属されたリンクをクリックするだけですぐに現状のソースと挙動を確認することができます。


- テキスト

動画に加えて、テキストにも力を入れました。該当レクチャーのテキストに軽く目を通してから、動画を確認し、復習の際にはテキストを見る、というフローになるようにしています。どこが変更されたのか、最終的にまとめて確認できることが、学習を進める上で重要だと考えたからです。


- Webpack, Babel, loader 等の設定の難しさについて

React 開発における難しさのもう一つの側面は開発環境の構築です。React の開発のためには、一般的に Webpack, Babel, Webpack の loder の知識、それからこれらに先行する Node,npm の知識が必要です。

もちろん最近のウェブ制作においては Sass を Gulp を使ってトランスコンパイルする等々、こういった開発環境を用いた開発は浸透していますが、しかし使用することはできても、本質的な意味は理解していない、苦手だという方は多いと思われます。

そのためこういった環境構築は React そのものよりも難しいとさえいえると思われます。

今回の講義では、こういった環境構築の難しさをスキップして、全ての環境が整った CodeSandbox を使用することで React 学習のハードを下げることとしました。


- React エンジニアへの道筋

ですので、まずは CodeSandbox を用いて、動的に変化する要素の少ないコーディングを学習した上で、次に state を動的に変化させる TodoList 的なアプリケーションを開発し、最後に Webpack 等の開発環境を身に付けるのが良いと思います。

その後に Redux 等の state 管理用のフレームワークを身につけ、そして一つの壁である AJAX 通信等の非同期処理をできるようになると、SPA シングルページアプリケーションのエンジニアの入り口に立てるのではないかなと思います。本講義はここまでスムーズに導くことを目標としています。

もちろんこれだけの知識では実務エンジニアになるためには足りません。膨大な知識が必要であって、私も日々吸収するために頑張っています。ただ、それでも一旦 React エンジニアへの道筋がつけば、きっとうまくいくはずです!

Who this course is for:
  • HTML, CSS, jQuery を使ったサイト構築に慣れている方で、React を使ったモダンなフロントエンド開発に興味がある方
  • ゴリゴリ React を書くことはないが、部分的にコーディングをする必要があるデザイナーの方
  • 話題の React を、とにかく自分で書きたいという方
  • バックエンドエンジニアで、フロントエンドの基礎を習得したい方