Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Parce que j’aime la React.

Parce que j’aime la React.

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

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

More Decks by レバレジーズTechアカウント

Other Decks in Programming

Transcript

  1. Parce que j’aime la React.
    小林 京輔
    (HRTech)

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  5. Giorgio de Chirico
    The Troubadour

    View full-size slide

  6. Georges Braque
    Man with a Guitar

    View full-size slide

  7. Ludwig Josef Johann Wittgenstein

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

  12. SPA FrameWork And Library

    View full-size slide

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

    View full-size slide

  14. Qualities
    Quantities

    View full-size slide

  15. Qualities
    Quantities

    View full-size slide

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

    View full-size slide

  17. Qualities
    Quantities

    View full-size slide

  18. 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 full-size slide

  19. USER EXPERIENCE
    DEVELOPER EXPERIENCE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Imperative
    Declarative

    View full-size slide

  25. Imperative
    Declarative

    View full-size slide

  26. 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 full-size slide

  27. Imperative
    Declarative

    View full-size slide

  28. const Component: FC = () => {
    const fruits = ["りんご", "オレンジ", "ぶどう"];
    return (

    {fruits.map((fruit) => (
    {fruit}
    ))}

    );
    };
    export default Component;
    https://typescriptbook.jp/tutorials/react-like-button-tutorial

    View full-size slide

  29. Component Oriented Design

    View full-size slide

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

    View full-size slide

  31. 形相と質料

    View full-size slide

  32. 形相:時を刻む
    質料:水時計、日時計、腕時計

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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




    );
    };
    export default Form;

    View full-size slide

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








    );
    };
    export default NoneMemorize;

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  42. shadowSize={2}>
    Click Me

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

  45. Concurrent Rendering

    View full-size slide

  46. 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 full-size slide

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

    View full-size slide

  48. 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 full-size slide

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

    View full-size slide

  50. 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 full-size slide

  51. Rendering
    Version17
    Version18

    View full-size slide

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

    View full-size slide

  53. Rendering
    Version17
    Version18

    View full-size slide

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

    View full-size slide

  55. Concurrent Rendering

    View full-size slide

  56. Loading
    Version17
    Version18

    View full-size slide

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

    View full-size slide

  58. Loading
    Version17
    Version18

    View full-size slide

  59. const Component :FC = () => (
    } >


    )
    export default Component

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

  64. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  67. USER EXPERIENCE
    DEVELOPER EXPERIENCE

    View full-size slide

  68. 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 full-size slide

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

    View full-size slide

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

    View full-size slide