「遅いMarkdownアプリを速くする！！Reactアプリのパフォーマンスチューニング」を公開 ※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/

1. 遅いマークダウンアプリを
速くする！！
Reactパフォーマンスチューニング

2. 荒井雄治朗（32）プログラマー GIG所属

3. Classicc
横にマークダウンのメモを並べてかける便利なノート
React+Electronで動いてる
便利

4. パフォーマンスを改善しよう

5. パフォーマンスを改善しよう
1. どこが遅いのかを理解する

6. パフォーマンスを改善しよう
1. どこが遅いのかを理解する
2. 遅い原因を理解する

7. パフォーマンスを改善しよう
1. どこが遅いのかを理解する
2. 遅い原因を理解する
3. 速くする

8. 遅いところを見つける

9. 遅いところを見つける
- 自分自身が本物のユーザーになる
- プログラムを甘やかさない

10. 本当の意味で使わなけ
れば、我々はその遅さ
に気づくことができな
い

11. 本当の意味で使わなけ
れば、我々はその遅さ
に気づくことができな
い ー 荒井 雄治朗

12. 「デバッグ」と「使う」
デバッグをしてるうちは遅いことに気づけな
い！！我々は！！

13. 例）キーを入力してから表示されるまでの時間

14. 例）キーを入力してから表示されるまでの時間
- 200msかかる時がある

15. 例）キーを入力してから表示されるまでの時間
- 200msかかる時がある
- 200msって速い

16. 例）キーを入力してから表示されるまでの時間
- 200msかかる時がある
- 200msって速い
- 問題に気づけない

17. 例）キーを入力してから表示されるまでの時間
- 200msかかる時がある
- 200msって速い
- 問題に気づけない

18. 例）キーを入力してから表示されるまでの時間
- 200msかかる時がある
- 200msって速い
- 問題に気づけない
たまに速い

19. あ

20. あい

21. あいう

22. あいうえ

23. あいうえ

24. あいうえお

25. あいうえおか

26. あいうえおかき

27. あいうえおかきく

28. あいうえおかきく

29. あいうえおかきくけ

30. あいうえおかきくけこ

31. デバッグではこれを問題だと感じられない
機能が正しく動くかを確認するために動かしてもわからない
文章を書くために入力することが重要だ

32. デバッグではこれを問題だと感じられない
機能が正しく動くかを確認するために動かしてもわからない
文章を書くために入力することが重要だ
なぜ？

33. デバッグではこれを問題だと感じられない
機能が正しく動くかを確認するために動かしてもわからない
文章を書くために入力することが重要だ
なぜ？→ わからない

34. デバッグではこれを問題だと感じられない
デバッグではむかつかなかった
自分がユーザーになったときはむかつい
た

35. デバッグではこれを問題だと感じられない
デバッグではむかつかなかった
自分がユーザーになったときはむかついた
むかつくとこに、ちゃんとむかつける

36. プログラムを甘やかさない

37. プログラムを甘やかさない
遅いマシンで動かしてみましょう！
Chromeなら開発者ツールで遅くできます！

38. ここ

39. ここ
4倍遅い状態で動かせる

40. 遅い原因を特定する

41. 特定するときもChromeの開発者ツール！

42. React v16から勝手に記録してくれること
- mount
- update
- unmount

43. React v16から勝手に記録してくれること
- mount（画面に表示）
- update（更新）
- unmount（画面から取り除かれる）

44. 特定するときもChromeの開発者ツール！
ここ

45. 特定するときもChromeの開発者ツール！

46. 特定するときもChromeの開発者ツール！

47. 特定するときもChromeの開発者ツール！

48. 見るべきとこ
更新しなくて良いとこ
更新してない？？

49. 更新しなくて良いとこ更新してない？

50. 更新しなくて良いとこ更新してない？
ここはノート

51. 更新しなくて良いとこ更新してない？
ここはノート
一個一個がページ

52. 更新しなくて良いとこ更新してない？

53. 更新しなくて良いとこ更新してない？
ここはノート
無駄！！

54. 速くする

55. 速くするには
- shouldComponentUpdate を書こう！
- windowingしよう！
ってReactのドキュメントに書いてある！

56. shouldComponentUpdateを書く
- Reactコンポーネントの状態が変わった時に、
呼ばれて、trueを返すとrenderを実行する
- デフォルトはtrueを返す
- trueを返しても、前の状態と値が同じだと判
断できるときはrenderを実行しない

57. shouldComponentUpdateを書く

58. shouldComponentUpdateを書く
参照型だと同じと扱われない。

59. 結果
ここ

60. - 見えてる部分
Windowingをする

61. - 実際のデータ
Windowingをする

62. - 実際のデータ
Windowingをする
無駄

63. - 実際のデータ
Windowingをする
見えないとこはレンダリングしない＝windowing

64. - react-window ってライブラリで実装できる！
Windowingをする

65. 結果
ここ！！

66. まとめ

67. - 本物のユーザーになれ・甘やかすな
まとめ

68. - 本物のユーザーになれ・甘やかすな
- Chromeのパフォーマンスツールすごい
まとめ

69. - 本物のユーザーになれ・甘やかすな
- Chromeのパフォーマンスツールすごい
- shouldComponentUpdateとwindowingしよう
まとめ

70. - 本物のユーザーになれ・甘やかすな
- Chromeのパフォーマンスツールすごい
- shouldComponentUpdateとwindowingしよう
- 結果を数字で見せよう！
まとめ

71. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
のこと