React.js実践入門 -最新のJavaScriptについて知ろう・開発環境を整えよう-

このコースでは、実践でReact.jsを使う上で必要な知識を5回に渡って学びます。

前回のReact.js入門では、React.jsを触ったことが無い方を対象にまずReact.jsを知ってもらうことをゴールとしました。本コースでは、さらに応用編として、ES2015などの新しいJavaScriptの文法や、運用・保守に欠かせないテスト、複雑化する開発環境に関して、なるべく分かりやすく解説していきます。また、Fluxと組み合わせたアプリケーション開発についてもサンプルコードを使って解説します。

詳細を開く
React.js実践入門 -最新のJavaScriptについて知ろう・開発環境を整えよう-
2016年12月17日公開
01:00:00
React.js実践入門 -Flux 後半-
2017年1月28日公開
01:00:00
  • 自己紹介
  • 00:27
  • 環境について
  • 00:39
  • もくじ
  • 00:46
  • Redux
  • 00:32
  • Reduxの特徴
  • 00:56
  • Fluxとの違い
  • 01:32
  • サンプルその1・2
  • 05:02
  • createStore関数
  • 00:43
  • store
  • 00:35
  • Reducer
  • 00:17
  • 複数のReduerを使う
  • 00:14
  • サンプルその3
  • 06:24
  • react-redux
  • 00:42
  • サンプル4
  • 05:47
  • Provider
  • 00:25
  • connect
  • 04:27
  • Redux Middleware
  • 01:34
  • Middlewareの活用が不可欠
  • 01:57
  • redux-thunk
  • 01:50
  • サンプル5
  • 06:27
  • redux-promise
  • 00:45
  • サンプル6
  • 04:53
  • Redux Dev Tools
  • 01:03
  • Redux Dev Toolsの有効化
  • 00:27
  • サンプル7
  • 02:15
  • その他の役立つパッケージ
  • 00:04
  • redux-actions
  • 00:09
  • redux-actionsのcreateAction関数
  • 00:47
  • redux-actionsのcreateActions関数
  • 00:16
  • redux-actionsのhandleActions関数
  • 00:22
  • redux-actionsのhandleAction関数
  • 00:42
  • まとめ
  • 02:07
  • Q.初心者ですけどReducerとは端的に言うとどういう機能ですか?
  • 01:14
  • Q.これからの流れ的にjQueryからreactにスキルを習得しなくちゃならないと思うのですけどreactがデファクトスタンダードになるまでにどの位猶予がある感じでしょうか?
  • 01:44
  • Q.reactの前にやるのであれば、生のJSをES6、jqueryどちらが良いと思いますか? JSは仮にライブラリができたとしても、うまくいかない時に結局そのメソッドがどうなっているか、 JSで確認しないといけなくなるので、jqueryと違って絶対に必要な知識と聞きます。 JSを書けるようにしておくことが、絶対に必要な経験として良いですかね。 ES6になってjqueryがいらないとも聴きます。
開く
React.js実践入門 -テストを書こう-
2017年1月28日公開
01:00:00
  • 自己紹介
  • 00:23
  • 環境について
  • 00:23
  • もくじ
  • 00:48
  • 【先生からの質問】 JavaScriptで テストを書いていますか? (書いたことがありますか?)
  • 02:55
  • Jest
  • 00:57
  • Jestの特徴
  • 01:29
  • なぜJest?
  • 01:18
  • 実行
  • 00:45
  • 監視モード
  • 01:31
  • Babelの対応
  • 00:42
  • create-react-appの場合
  • 01:27
  • JestのAPI
  • 07:21
  • モック
  • 11:21
  • React.jsのテスト
  • 00:12
  • React Test Utils
  • 00:39
  • React Test UtilsのAPI
  • 10:39
  • Jestの Snap Shot Testing機能
  • 03:57
  • enzyme
  • 00:50
  • enzymeのAPI
  • 00:35
  • Shallow RenderingとFull Rendering
  • 01:38
  • まとめ
  • 02:55
  • Q.P51の5行目でバッククォーテーションを使っているのは展開という意味ですか
  • 00:35
  • Q.reactはフレームワークを使うと、アプリ制作も問い合わせフォームなどのサーバサイドもすべてできると聞きます。 ただ、フリーのWEBデザイナーだとレンサバ側がapachの環境しかなく、AWSなどを使って自分でサーバの構築、OSなどの管理をずっと行わないと、 サーバサイドをJSで済ますことが不可能なので、PHPしか選択肢が当分ないと聞きますが、PHPのように簡単に使える環境をご存じないでしょうか?
  • 02:15
  • Q.バックエンドのトラブル回避をするようなフェイクテストライブラリとかありますか
  • 01:56
  • Q.jQueryのajaxを使った、例えばECサイトのカート画面にReactを少しずつ導入するうまい方法などあったりしますでしょうか?全部一気に書き換えるのは途中で挫折しそうで、、
開く
React.js実践入門 -よりよいアプリケーションを目指そう-
2017年1月28日公開
01:00:00
  • 自己紹介
  • 00:20
  • 環境について
  • 00:35
  • もくじ
  • 00:37
  • サーバサイド レンダリング
  • 00:09
  • SPAの課題
  • 02:16
  • サーバサイドレンダリングとは
  • 00:48
  • React.jsのSSR
  • 01:29
  • ブラウザ上で 全く同じDOM構造でReact.renderを実行
  • 00:41
  • サンプル その1
  • 06:36
  • react-routerやreduxを 使っている場合
  • 00:30
  • サーバからブラウザへの データの引き継ぎ方
  • 01:51
  • サンプル その2
  • 06:59
  • SSRで気をつけること
  • 00:07
  • Isomorphicにする
  • 01:08
  • Reactのライフサイクル
  • 00:41
  • renderToStringは遅い
  • 01:04
  • 一部だけSSRする
  • 01:12
  • SSR結果をキャッシュする
  • 00:22
  • サンプル3
  • 07:44
  • shouldComponentUpdateと PureComponent
  • 00:29
  • renderが呼ばれるタイミング
  • 01:14
  • shouldComponentUpdate
  • 00:36
  • React.PureComponent
  • 05:42
  • パフォーマンスの計測
  • 00:24
  • 公式で提供されているツール
  • 00:10
  • Perf
  • 06:31
  • ?react_perf
  • 04:18
  • webpackの コード分割
  • 00:07
  • webpackの課題
  • 00:12
  • webpackのコード分割
  • 00:38
  • サンプル4
  • 02:11
  • まとめ
  • 01:15
  • Q.負荷がかかるというのは、React.jsをフロントで使っている場合、ブラウザやデバイスのメモリに負荷がかかるということでしょうか。
  • 00:48
  • Q.先ほど問い合わせフォームやショッピングカートなどのjsを使ったサーバサイドのwebアプリ制作はherokuでできるそうですが、 これはロリポなどのレンサバのように、ただhtmlやjsファイルをアップロードすれば、 それだけで、問い合わせフォームなども実装できて、AWSなどのように構築やOSなどの管理はレンサバ側に任せられるのでしょうか?
  • 01:33
  • 先生から受講生へのメッセージ
  • 01:07
  • Q.SSRでnodejsの負荷が重いリクエストの場合はphpやrubyを使用した方がいいのでしょうか?
開く
こんな人にオススメ
フロントエンドエンジニア(中級)

React.jsの基本的な知識は持っているが、より実践的な知識を学びたい方

スライド資料
授業で使用するファイル
担当の先生
受講生代表
  • 江川 みどり

    江川 みどり

    スクー放送部

受けたいランキング
新着の生放送授業
関連授業