おためし受講中

React.js実践入門 -よりよいアプリケーションを目指そう-

第5回はより高みを目指すには何をすればよいかをテーマに、「パフォーマンス改善」や「サーバサイドレンダリング」について解説します。

アプリケーション自体の動作を軽くするパフォーマンス改善も重要ですが、ページが表示されるまでをいかに速くするか、ページが表示されてからアプリを動かせるようになるまでをいかに速くするかという視点でサーバサイドレンダリングを実装したり、配信するファイルを軽くするような努力が必要となります。それらを実現する手法やツールの使い方について、解説します。

学生代表

  • 江川 みどり

    江川 みどり

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    授業の概要
    自己紹介
    00:20  (01:03 ~ )
    環境について
    00:35  (01:23 ~ )
    もくじ
    00:37  (01:58 ~ )
    サーバサイド レンダリング
    00:09  (02:35 ~ )
    SPAの課題
    02:16  (02:44 ~ )
    サーバサイドレンダリングとは
    00:48  (05:00 ~ )
    React.jsのSSR
    01:29  (05:48 ~ )
    ブラウザ上で 全く同じDOM構造でReact.renderを実行
    00:41  (07:17 ~ )
    サンプル その1
    06:36  (07:58 ~ )
    react-routerやreduxを 使っている場合
    00:30  (14:34 ~ )
    サーバからブラウザへの データの引き継ぎ方
    01:51  (15:04 ~ )
    サンプル その2
    06:59  (16:55 ~ )
    SSRで気をつけること
    00:07  (23:54 ~ )
    Isomorphicにする
    01:08  (24:01 ~ )
    Reactのライフサイクル
    00:41  (25:09 ~ )
    renderToStringは遅い
    01:04  (25:50 ~ )
    一部だけSSRする
    01:12  (26:54 ~ )
    SSR結果をキャッシュする
    00:22  (28:06 ~ )
    サンプル3
    07:44  (28:28 ~ )
    shouldComponentUpdateと PureComponent
    00:29  (36:12 ~ )
    renderが呼ばれるタイミング
    01:14  (36:41 ~ )
    shouldComponentUpdate
    00:36  (37:55 ~ )
    React.PureComponent
    05:42  (38:31 ~ )
    パフォーマンスの計測
    00:24  (44:13 ~ )
    公式で提供されているツール
    00:10  (44:37 ~ )
    Perf
    06:31  (44:47 ~ )
    ?react_perf
    04:18  (51:18 ~ )
    webpackの コード分割
    00:07  (55:36 ~ )
    webpackの課題
    00:12  (55:43 ~ )
    webpackのコード分割
    00:38  (55:55 ~ )
    サンプル4
    02:11  (56:33 ~ )
    まとめ
    01:15  (58:44 ~ )
    質疑応答
    Q.負荷がかかるというのは、React.jsをフロントで使っている場合、ブラウザやデバイスのメモリに負荷がかかるということでしょうか。
    00:48  (1:00:17 ~ )
    Q.先ほど問い合わせフォームやショッピングカートなどのjsを使ったサーバサイドのwebアプリ制作はherokuでできるそうですが、 これはロリポなどのレンサバのように、ただhtmlやjsファイルをアップロードすれば、 それだけで、問い合わせフォームなども実装できて、AWSなどのように構築やOSなどの管理はレンサバ側に任せられるのでしょうか?
    01:33  (1:01:05 ~ )
    先生から受講生へのメッセージ
    01:07  (1:02:38 ~ )
    Q.SSRでnodejsの負荷が重いリクエストの場合はphpやrubyを使用した方がいいのでしょうか?
      (1:03:45 ~ )