Parce que j’aime la React.

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

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

Transcript

1. Parce que j’aime la React. 小林　京輔 （HRTech）
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
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
4. Who are you ? 高校：芸術類型（彫刻専攻） 大学：西洋哲学　時間論
5. Art
6. Giorgio de Chirico The Troubadour
7. Georges Braque Man with a Guitar
8. Philosophy
9. Ludwig Josef Johann Wittgenstein
10. Tech
13. テセウスの船のパラドクス
14. プルタルコスは全部の部品が置き換えられ たとき、その船が同じものと言えるのかと いう疑問を投げかけている。また、ここか ら派生する問題として置き換えられた古い 部品を集めて何とか別の船を組み立てた場 合、どちらがテセウスの船なのかという疑 問が生じる。 https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%BB%E3%82%A6%E3%82%B9%E3%81%AE%E8%88%B9
15. 仮説：この問題は物質的な観点での対象の みに適用されるのか （逆に）抽象的な概念といった対象につい てもこの問題は成り立つのではないか
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
17. SPA FrameWork And Library
19. この裁判の聴衆のうち、賢い 者とそうでないもの、どちら が多いであろうか ソクラテスの弁明
20. Qualities Quantities
21. Qualities Quantities
22. Function base 　・React Template base 　・Angular 　・Vue
23. Qualities Quantities
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
27. USER EXPERIENCE DEVELOPER EXPERIENCE
29. React is not a framework (unlike Angular, which is more opinionated). ref:https://www.taniarascia.com/getting-started-with-react/
31. 1. 私が明証的に真理であると認めるものでなければ、いかなる事柄 でもこれを真なりとして認めないこと 2. 検討しようとする難問をよりよく理解するために、多数の小部分 に分割すること 3. もっとも単純なものからもっとも複雑なものの認識へと至り、先 後のない事物の間に秩序を仮定すること 4. 最後に完全な列挙と、広範な再検討をすること 方法序説
32. 1.Component 2.Managing State 3.Performance tuning(Memoization)
33. 1.Component 2.Managing State 3.Performance tuning(Memoization)
34. Imperative Declarative
35. Imperative Declarative
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
37. Imperative Declarative
38. const Component: FC = () => { const fruits = ["りんご", "オレンジ", "ぶどう"]; return ( <ul> {fruits.map((fruit) => ( <li>{fruit}</li> ))} </ul> ); }; export default Component; https://typescriptbook.jp/tutorials/react-like-button-tutorial
39. Component Oriented Design
40. https://ja.reactjs.org/docs/thinking-in-react.html
41. 形相と質料
42. 形相：時を刻む 質料：水時計、日時計、腕時計
43. 構造：コンポーネント定義 情報：定数・変数で定義し注入
44. 1.Component 2.Managing State 3.Performance tuning
45. const InputItem: FC = () => { const [value, setValue] = useState<string>(""); return ( <input value={value} onChange={(event) => { setValue(event.target.value); }} /> ); }; export default InputItem;
46. 1.Component 2.Managing State 3.Performance tuning
47. import { createRef, FC } from "react"; const Form: FC = () => { const inputFirstRef = createRef<HTMLInputElement >(); const inputSecondRef = createRef<HTMLInputElement >(); return ( <form> <input ref={inputFirstRef} /> <input ref={inputSecondRef } /> </form> ); }; export default Form;
49. import { FC, useState } from "react"; const NoneMemorize: FC = () => { const [props, setProps] = useState<FromProps>(); console.log("rendering"); return ( <form> <div> <Input/> </div> <div> <Input/> </div> </form> ); }; export default NoneMemorize;
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
53. 認識論的観点からのデザイン カントの認識論 　⇨統覚（apperception）によって受容した情報 （SenceData）が、悟性（ Understanding）によって 判断されること 判断の形式：デザイン 　グルーピング 　構造化 　面揃え 　 　
54. 閑話休題 JSX とは、つまるところ React.createElement(component, props, ...children) の糖 衣構文にすぎません。
55. <MyButton color="blue" shadowSize={2}> Click Me </MyButton>
56. React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' )
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
58. React18
59. Concurrent Rendering
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
61. Reactが複数のバージョンのUI を同時に準備することを可能に する、舞台裏の新しいメカニズ ムなのです。
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.
63. Reactの開発者は、ユーザーエ クスペリエンスをどのようにし たいかに集中し、Reactはその エクスペリエンスをどのように 提供するかに対応します。
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
65. Rendering Version17 Version18
66. import { render } from 'react-dom'; const container = document.getElementById('app'); render(<App tab="home" />, container);
67. Rendering
68. Rendering Version17 Version18
69. import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container); root.render(<App tab="home" />);
70. Concurrent Rendering
71. Loading Version17 Version18
72. const Component:FC = () => { const {data, isLoading} = useFetcher(); return( <> {isLoading ? <>...loading</> : {data.map((element) => (<h1>{element.title}</h1>))} } </> ) } export default Component;
73. Loading Version17 Version18
74. const Component :FC = () => ( <Suspense fallback={<Spiner />} > <MyComponent /> </Suspense> ) export default Component
75. const MyComponent:FC = () => { const {data} = useFetcher(); // throw Promise return ( <> {data.map((element) => (<h1>{element.title}</h1>))} </> ) } export default MyComponent;
76. 既にユーザに表示されているコンテンツがある場 合、それがローディングインジケータに戻ってしまう のは不親切です。 新たなトランジション API である startTransition と useTransition を用い、更新をトランジションとし てマークすることで意図しない場面でのフォールバックを避けるこ とができます。 Ref:https://ja.reactjs.org/docs/react-api.html#reactsuspense
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
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
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 に複雑性をシフトする
80. const MyComponent:FC = () => { const {data} = use(useFetcher()); // use Hooks return ( <> {data.map((element) => (<h1>{element.title}</h1>))} </> ) } export default MyComponent;
81. googlability ⇨already use as custom hooks prefix “use”
82. USER EXPERIENCE DEVELOPER EXPERIENCE
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
85. Parce que j'aime la philosophie. Jacques Derrida
86. フォント 英語：Source Code Pro 日本語：M PLUS 2 背景色：#20232a 文字色：#61dafb グレーアウト：#407e92 リンク：#4b9db5