Parce que j’aime la React.

レバレジーズ株式会社 社内技術カンファレンス
「テックフェス 2022 秋」
での発表です

タイトル: Parce que j’aime la React.
発表者: 小林　京輔
概要: React18に追加された機能の紹介

Transcript

1. Parce que j’aime la React.
   小林　京輔
   （HRTech）
   

   View Slide

2. table of contents
   1. Who are you ?
   2. SPA FrameWork And Library
   3. React(Basic)
   a. Component
   b. Managing State
   c. Performance tuning
   4. React18
   a. Rendering
   b. Loading
   5. RFC : “use” Hooks
   6. epilogue
   

   View Slide

3. table of contents
   1. Who are you ?
   2. SPA FrameWork And Library
   3. React(Basic)
   a. Component
   b. Managing State
   c. Performance tuning
   4. React18
   a. Rendering
   b. Loading
   5. RFC : “use” Hooks
   6. epilogue
   

   View Slide

4. Who are you ?
   高校：芸術類型（彫刻専攻）
   大学：西洋哲学　時間論
   

   View Slide

5. Art
   

   View Slide

6. Giorgio de Chirico
   The Troubadour
   

   View Slide

7. Georges Braque
   Man with a Guitar
   

   View Slide

8. Philosophy
   

   View Slide

9. Ludwig Josef Johann Wittgenstein
   

   View Slide

10. Tech
    

    View Slide

11. View Slide

12. View Slide

13. テセウスの船のパラドクス
    

    View Slide

14. プルタルコスは全部の部品が置き換えられ
    たとき、その船が同じものと言えるのかと
    いう疑問を投げかけている。また、ここか
    ら派生する問題として置き換えられた古い
    部品を集めて何とか別の船を組み立てた場
    合、どちらがテセウスの船なのかという疑
    問が生じる。
    https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%BB%E3%82%A6%E3%82%B9%E3%81%AE%E8%88%B9
    

    View Slide

15. 仮説：この問題は物質的な観点での対象の
    みに適用されるのか
    （逆に）抽象的な概念といった対象につい
    てもこの問題は成り立つのではないか
    

    View Slide

16. table of contents
    1. Who are you ?
    2. SPA FrameWork And Library
    3. React(Basic)
    a. Component
    b. Managing State
    c. Performance tuning
    4. React18
    a. Rendering
    b. Loading
    5. RFC : “use” Hooks
    6. epilogue
    

    View Slide

17. SPA FrameWork And Library
    

    View Slide

18. View Slide

19. この裁判の聴衆のうち、賢い
    者とそうでないもの、どちら
    が多いであろうか
    ソクラテスの弁明
    

    View Slide

20. Qualities
    Quantities
    

    View Slide

21. Qualities
    Quantities
    

    View Slide

22. Function base
    　・React
    Template base
    　・Angular
    　・Vue
    

    View Slide

23. Qualities
    Quantities
    

    View Slide

24. View Slide

25. table of contents
    1. Who are you ?
    2. SPA FrameWork And Library
    3. React(Basic)
    a. Component
    b. Managing State
    c. Performance tuning
    4. React18
    a. Rendering
    b. Loading
    5. RFC : “use” Hooks
    6. epilogue
    

    View Slide

26. View Slide

27. USER EXPERIENCE
    DEVELOPER EXPERIENCE
    

    View Slide

28. View Slide

29. React is not a framework
    (unlike Angular, which is more
    opinionated).
    ref:https://www.taniarascia.com/getting-started-with-react/
    

    View Slide

30. View Slide

31. 1. 私が明証的に真理であると認めるものでなければ、いかなる事柄
    でもこれを真なりとして認めないこと
    2. 検討しようとする難問をよりよく理解するために、多数の小部分
    に分割すること
    3. もっとも単純なものからもっとも複雑なものの認識へと至り、先
    後のない事物の間に秩序を仮定すること
    4. 最後に完全な列挙と、広範な再検討をすること
    方法序説
    

    View Slide

32. 1.Component
    2.Managing State
    3.Performance tuning(Memoization)
    

    View Slide

33. 1.Component
    2.Managing State
    3.Performance tuning(Memoization)
    

    View Slide

34. Imperative
    Declarative
    

    View Slide

35. Imperative
    Declarative
    

    View Slide

36. const list = document.createElement("ul");
    const apple = document.createElement("li");
    apple.innerText = "リンゴ";
    list.append(apple);
    const orange = document.createElement("li");
    orange.innerText = "オレンジ";
    list.append(orange);
    const grape = document.createElement("li");
    grape.innerText = "ぶどう";
    list.append(grape);
    https://typescriptbook.jp/tutorials/react-like-button-tutorial
    

    View Slide

37. Imperative
    Declarative
    

    View Slide

38. const Component: FC = () => {
    const fruits = ["りんご", "オレンジ", "ぶどう"];
    return (
    
    {fruits.map((fruit) => (
    {fruit}
    ))}
    
    );
    };
    export default Component;
    https://typescriptbook.jp/tutorials/react-like-button-tutorial
    

    View Slide

39. Component Oriented Design
    

    View Slide

40. https://ja.reactjs.org/docs/thinking-in-react.html
    

    View Slide

41. 形相と質料
    

    View Slide

42. 形相：時を刻む
    質料：水時計、日時計、腕時計
    

    View Slide

43. 構造：コンポーネント定義
    情報：定数・変数で定義し注入
    

    View Slide

44. 1.Component
    2.Managing State
    3.Performance tuning
    

    View Slide

45. const InputItem: FC = () => {
    const [value, setValue] = useState("");
    return (
    value={value}
    onChange={(event) => {
    setValue(event.target.value);
    }}
    />
    );
    };
    export default InputItem;
    

    View Slide

46. 1.Component
    2.Managing State
    3.Performance tuning
    

    View Slide

47. import { createRef, FC } from "react";
    const Form: FC = () => {
    const inputFirstRef = createRef();
    const inputSecondRef = createRef();
    return (
    
    
    
    
    );
    };
    export default Form;
    

    View Slide

48. View Slide

49. import { FC, useState } from "react";
    const NoneMemorize: FC = () => {
    const [props, setProps] = useState();
    console.log("rendering");
    return (
    
    
    
    
    
    
    
    
    );
    };
    export default NoneMemorize;
    

    View Slide

50. View Slide

51. React without memo
    Looking further into the future, Xuan Huang (黄玄)
    shared an update from our React Labs research into an
    auto-memoizing compiler.
    memo 不要の React
    より将来に目を向けた話として、Xuan Huang (黄玄) は、React Labs が
    行っている自動メモ化コンパイラに関する研究の現状についてお話しし
    ました。
    https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html
    React Conf 2021 Recap
    

    View Slide

52. View Slide

53. 認識論的観点からのデザイン
    カントの認識論
    　⇨統覚（apperception）によって受容した情報
    （SenceData）が、悟性（ Understanding）によって
    判断されること
    判断の形式：デザイン
    　グルーピング
    　構造化
    　面揃え
    　
    　
    

    View Slide

54. 閑話休題
    JSX とは、つまるところ
    React.createElement(component, props, ...children) の糖
    衣構文にすぎません。
    

    View Slide

55. shadowSize={2}>
    Click Me
    
    

    View Slide

56. React.createElement(
    MyButton,
    {color: 'blue', shadowSize: 2},
    'Click Me'
    )
    

    View Slide

57. table of contents
    1. Who are you ?
    2. SPA FrameWork And Library
    3. React(Basic)
    a. Component
    b. Managing State
    c. Performance tuning
    4. React18
    a. Rendering
    b. Loading
    5. RFC : “use” Hooks
    6. epilogue
    

    View Slide

58. React18
    

    View Slide

59. Concurrent Rendering
    

    View Slide

60. It’s a new
    behind-the-scenes
    mechanism that enables
    React to prepare
    multiple versions of
    your UI at the same
    time.
    https://reactjs.org/blog/2022/03/29/react-v18.html
    

    View Slide

61. Reactが複数のバージョンのUI
    を同時に準備することを可能に
    する、舞台裏の新しいメカニズ
    ムなのです。
    

    View Slide

62. As a React developer,
    you focus on what you
    want the user
    experience to look
    like, and React handles
    how to deliver that
    experience.
    

    View Slide

63. Reactの開発者は、ユーザーエ
    クスペリエンスをどのようにし
    たいかに集中し、Reactはその
    エクスペリエンスをどのように
    提供するかに対応します。
    

    View Slide

64. Building Great User Experiences
    with Concurrent Mode and Suspense
    https://17.reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html
    

    View Slide

65. Rendering
    Version17
    Version18
    

    View Slide

66. import { render } from 'react-dom';
    const container =
    document.getElementById('app');
    render(, container);
    

    View Slide

67. Rendering
    

    View Slide

68. Rendering
    Version17
    Version18
    

    View Slide

69. import { createRoot } from 'react-dom/client';
    const container = document.getElementById('app');
    const root = createRoot(container);
    root.render();
    

    View Slide

70. Concurrent Rendering
    

    View Slide

71. Loading
    Version17
    Version18
    

    View Slide

72. const Component:FC = () => {
    const {data, isLoading} = useFetcher();
    return(
    <>
    {isLoading ?
    <>...loading> : {data.map((element) => ({element.title}))}
    }
    >
    )
    }
    export default Component;
    

    View Slide

73. Loading
    Version17
    Version18
    

    View Slide

74. const Component :FC = () => (
    } >
    
    
    )
    export default Component
    

    View Slide

75. const MyComponent:FC = () => {
    const {data} = useFetcher(); // throw Promise
    return (
    <>
    {data.map((element) => ({element.title}))}
    >
    )
    }
    export default MyComponent;
    

    View Slide

76. 既にユーザに表示されているコンテンツがある場
    合、それがローディングインジケータに戻ってしまう
    のは不親切です。
    新たなトランジション API である startTransition
    と useTransition を用い、更新をトランジションとし
    てマークすることで意図しない場面でのフォールバックを避けるこ
    とができます。
    Ref:https://ja.reactjs.org/docs/react-api.html#reactsuspense
    

    View Slide

77. table of contents
    1. Who are you ?
    2. SPA FrameWork And Library
    3. React(Basic)
    a. Component
    b. Managing State
    c. Performance tuning
    4. React18
    a. Rendering
    b. Loading
    5. RFC : “use” Hooks
    6. epilogue
    

    View Slide

78. use API
    https://github.com/reactjs/rfcs/pull/229
    https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises
    .md#why-isnt-use-called-something-more-specific
    https://github.com/microsoft/TypeScript/issues/51344
    

    View Slide

79. Shift complexity into React
    without being too
    prescriptive
    https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#shift-complexity-into-react-without-being-too-prescriptive
    規定しすぎることなく、React に複雑性をシフトする
    

    View Slide

80. const MyComponent:FC = () => {
    const {data} = use(useFetcher()); // use Hooks
    return (
    <>
    {data.map((element) => ({element.title}))}
    >
    )
    }
    export default MyComponent;
    

    View Slide

81. googlability
    ⇨already use as custom
    hooks prefix “use”
    

    View Slide

82. USER EXPERIENCE
    DEVELOPER EXPERIENCE
    

    View Slide

83. table of contents
    1. Who are you ?
    2. SPA FrameWork And Library
    3. React(Basic)
    a. Component
    b. Managing State
    c. Performance tuning
    4. React18
    a. Rendering
    b. Loading
    5. RFC : “use” Hooks
    6. epilogue
    

    View Slide

84. View Slide

85. Parce que j'aime la philosophie.
    Jacques Derrida
    

    View Slide

86. フォント
    英語：Source Code Pro
    日本語：M PLUS 2
    背景色：#20232a
    文字色：#61dafb
    グレーアウト：#407e92
    リンク：#4b9db5
    

    View Slide