Shift-from-React-to-Vue

Transcript

1. ©MNTSQ, Ltd. 2024/11/01 ReactからVueへの転向: 思考の変化とアプローチの違い 森山 凪
2. ©MNTSQ, Ltd. 2 自己紹介
3. ©MNTSQ, Ltd. 3 3年 1年 3ヶ月（趣味） 森山 凪 モリヤマ ナギ MNTSQ株式会社 フロントエンド 4年目
4. ©MNTSQ, Ltd. 4 過去やってきたこと
5. ©MNTSQ, Ltd. 5 前職はHR領域のSaaSをマイクロサービスアーキテクチャで開発 自己紹介 New HR SaaS Fix
6. ©MNTSQ, Ltd. 6 新サービスの開発方針 自己紹介 GraphQLからTypeScriptの型を自動生成 Storybook x ChromaticでのUIの差分検知 Gherkin記法でユースケースをGit管理 Cypress x CucumberでE2E API、UI、ユースケース 変われば悲鳴をあげるFE
7. ©MNTSQ, Ltd. 7 マイクロサービスそれぞれを見てみると、、、 自己紹介 HR SaaS あれ、、 各サービスで微妙にデザインに違うな
8. ©MNTSQ, Ltd. 8 自己紹介 HR SaaS HR SaaS Private npm package UIコンポーネントライブラリの作成
9. ©MNTSQ, Ltd. 9 ReactからVueへの転向: 思考の変化とアプローチの違い
10. ©MNTSQ, Ltd. 10 目次 1. ライフサイクル表現の変化 2. 構文の変化 3. まとめ
11. ©MNTSQ, Ltd. 11 目次 1. ライフサイクル表現の変化 2. 構文の変化 3. まとめ
12. ©MNTSQ, Ltd. 12 ライフサイクル表現の変化
13. ©MNTSQ, Ltd. 13 ライフサイクルの変化 React Vue useEffect lifecycle hook
14. ©MNTSQ, Ltd. 14 ライフサイクルの変化 React Vue useEffect lifecycle hook
15. ©MNTSQ, Ltd. 15 ライフサイクルの変化 React Vue useEffect() 1. update 2. mount 3. unMount =
16. ©MNTSQ, Ltd. 16 ライフサイクルの変化 useEffect() update mount unMount
17. ©MNTSQ, Ltd. 17 どうやってuseEffectで 3つのlifecycleを表現しているのか？
18. ©MNTSQ, Ltd. 18 ライフサイクルの変化 useEffectのlifecycle表現 const Component = () => { useEffect( ()=>{ }, [ ] ) } 1. onMount 2. onUpdate 3. onUnmount
19. ©MNTSQ, Ltd. 19 ライフサイクルの変化 const Component = () => { useEffect(()=>{ // 1回目はonMount },[]) } 1. onMount ◦ Component()実行でuseEffect()も呼ばれる。 ◦ useEffectの初回実行がmount 2. onUpdate 3. onUnmount useEffectのlifecycle表現
20. ©MNTSQ, Ltd. 20 ライフサイクルの変化 1. onMount ◦ Component()実行でuseEffect()も呼ばれる。 ◦ useEffectの初回実行がmount。 2. onUpdate ◦ useEffectの第2引数が変化する度に useEffectが再発火する。 ◦ state1, state2どちらが変わっても発火。 3. onUnmount const Component = () => { const [state1,] = useState() const [state2,] = useState() useEffect(()=>{ // 1回目はonMount // 2回目以降はonUpdate },[state1, state2]) // 依存配列 } useEffectのlifecycle表現
21. ©MNTSQ, Ltd. 21 ライフサイクルの変化 1. onMount ◦ Component()実行でuseEffect()も呼ばれる。 ◦ useEffectの初回実行がmount。 2. onUpdate ◦ useEffectの第2引数が変化する度に useEffectが再発火する。 ◦ state1, state2どちらが変わっても発火。 3. onUnmount ◦ useEffectの第1引数の返り値がunmount。 const Component = () => { const [state1,] = useState() const [state2,] = useState() useEffect(()=>{ // 1回目はonMount // 2回目以降はonUpdate return () => {} // onUnmount },[state1, state2]) } useEffectのlifecycle表現
22. ©MNTSQ, Ltd. 22 ライフサイクルの変化 なるほど！！
23. ©MNTSQ, Ltd. 23 ライフサイクルの変化 useEffectはムズい
24. ©MNTSQ, Ltd. 24 ライフサイクルの変化 useEffectムズい lifecycleを理解している人でないと （useEffectは）難しい
25. ©MNTSQ, Ltd. 25 useEffectのなんのため？
26. ©MNTSQ, Ltd. 26 ライフサイクルの変化 useEffectの恩恵は何？
27. ©MNTSQ, Ltd. 27 ライフサイクルの変化 useEffectの恩恵は何？ → 機能的な凝集性が高い
28. ©MNTSQ, Ltd. 28 ライフサイクルの変化 useEffectの恩恵は何？ → 機能的な凝集性が高い const Component = () => { // API コール useEffect(()=> { const response = apiCall(payload) setResponse(response) }, [payload]) // タイマー処理 useEffect(()=>{ const timerId = setInterval(() => { // tick process }, 1000) return () => clearInterval(timerId) },[]) }
29. ©MNTSQ, Ltd. 29 ライフサイクルの変化 useEffectの恩恵は何？ → 機能的な凝集性が高い const Component = () => { // API コール useEffect(()=> { const response = apiCall(payload) setResponse(response) }, [payload]) // タイマー処理 useEffect(()=>{ const timerId = setInterval(() => { // tick process }, 1000) return () => clearInterval(timerId) },[]) }
30. ©MNTSQ, Ltd. 30 ライフサイクルの変化 useEffectの恩恵は何？ → 機能的な凝集性が高い • APIコール ◦ mount時にAPIコール ◦ payloadのupdate時にAPIコール • タイマー ◦ mount時にタイマーをスタート ◦ unMount時にタイマーをクリア const Component = () => { // API コール useEffect(()=> { const response = apiCall(payload) setResponse(response) }, [payload]) // タイマー処理 useEffect(()=>{ const timerId = setInterval(() => { // tick process }, 1000) return () => clearInterval(timerId) },[]) }
31. ©MNTSQ, Ltd. 31 ライフサイクルの変化 useEffectの恩恵は何？ → 機能的な凝集性が高い • APIコール ◦ mount時にAPIコール ◦ payloadのupdate時にAPIコール • タイマー ◦ mount時にタイマーをスタート ◦ unMount時にタイマーをクリア const Component = () => { // API コール useEffect(()=> { const response = apiCall(payload) setResponse(response) }, [payload]) // タイマー処理 useEffect(()=>{ const timerId = setInterval(() => { // tick process }, 1000) return () => clearInterval(timerId) },[]) } 機能的な凝集性が高い→再利用がしやすい
32. ©MNTSQ, Ltd. 32 lifecycle hookは？
33. ©MNTSQ, Ltd. 33 ライフサイクルの変化 lifecycle hookの恩恵は？
34. ©MNTSQ, Ltd. 34 ライフサイクルの変化 lifecycle hookの恩恵は？ → 時間的な凝集性が高い
35. ©MNTSQ, Ltd. 35 ライフサイクルの変化 lifecycle hookの恩恵は？ → 時間的な凝集性が高い export default { watch: { payload: { this.fetchData(); } // APIコール }, mounted() { this.fetchData(); // APIコール this.timerId = setInterval(this.tick, 1000); // タイマー処理 }, beforeUnmount() { clearInterval(this.timerId); // タイマー処理 } };
36. ©MNTSQ, Ltd. 36 ライフサイクルの変化 lifecycle hookの恩恵は？ → 時間的な凝集性が高い export default { watch: { payload: { this.fetchData(); } // APIコール }, mounted() { this.fetchData(); // APIコール this.timerId = setInterval(this.tick, 1000); // タイマー処理 }, beforeUnmount() { clearInterval(this.timerId); // タイマー処理 } };
37. ©MNTSQ, Ltd. 37 ライフサイクルの変化 lifecycle hookの恩恵は？ → 時間的な凝集性が高い export default { watch: { payload: { this.fetchData(); } // APIコール }, mounted() { this.fetchData(); // APIコール this.timerId = setInterval(this.tick, 1000); // タイマー処理 }, beforeUnmount() { clearInterval(this.timerId); // タイマー処理 } }; • update ◦ APIコール • mount ◦ APIコール ◦ タイマースタート • unMount ◦ タイマーをクリア
38. ©MNTSQ, Ltd. 38 ライフサイクルの変化 lifecycle hookの恩恵は？ → 時間的な凝集性が高い export default { watch: { payload: { this.fetchData(); } // APIコール }, mounted() { this.fetchData(); // APIコール this.timerId = setInterval(this.tick, 1000); // タイマー処理 }, beforeUnmount() { clearInterval(this.timerId); // タイマー処理 } }; • update ◦ APIコール • mount ◦ APIコール ◦ タイマースタート • unMount ◦ タイマーをクリア 時間軸で機能は分断される。 物理的なまとまりが無いので機能の関連性を見 つけるのは難しい。
39. ©MNTSQ, Ltd. 39 useEffect と lifecycle比較
40. ©MNTSQ, Ltd. 40 ライフサイクルの変化 useEffect • update ◦ APIコール • mount ◦ APIコール ◦ タイマースタート • unMount ◦ タイマーをクリア 時間的な凝集性が高い。 いつ何が起きるか分かりやすい。 機能が時間で切られて散らばる。 • APIコール ◦ mount時にAPIコール ◦ payloadのupdate時にAPIコール • タイマー ◦ mount時にタイマーをスタート ◦ unMount時にタイマーをクリア 機能的な凝集性が高い。 機能で再利用がしやすい。 発火タイミングを読み解く必要がある。 lifecycle hook
41. ©MNTSQ, Ltd. 41 実装のアプローチ
42. ©MNTSQ, Ltd. 42 ライフサイクルの変化 Composableのlifecycle hookが◎ Composableで機能的な凝集性が高い lifecycle hook郡を定義できる。 機能的な凝集性の高さを維持しつつ、 内部で発火タイミングも明確化。 function useInterval() { let timerId onMounted(() => { timerId = setInterval(() => { // tick process }, 1000) }); onUnmounted(() => { clearInterval(timerId) }); }
43. ©MNTSQ, Ltd. 43 ライフサイクルの変化 function useInterval() { let timerId onMounted(() => { timerId = setInterval(() => { // tick process }, 1000) }); onUnmounted(() => { clearInterval(timerId) }); } Composableで機能的な凝集性が高い lifecycle hook郡を定義できる。 機能的な凝集性の高さを維持しつつ、 内部で発火タイミングも明確化。 Composableのlifecycle hookが◎
44. ©MNTSQ, Ltd. 44 ライフサイクルの変化 function useInterval() { let timerId onMounted(() => { timerId = setInterval(() => { // tick process }, 1000) }); onUnmounted(() => { clearInterval(timerId) }); } Composableで機能的な凝集性が高い lifecycle hook郡を定義できる。 機能的な凝集性の高さを維持しつつ、 内部で発火タイミングも明確化。 Composableのlifecycle hookが◎ いいとこどり！
45. ©MNTSQ, Ltd. 45 目次 1. ライフサイクル表現の変化 2. 構文の変化 3. まとめ
46. ©MNTSQ, Ltd. 46 構文の変化
47. ©MNTSQ, Ltd. 47 構文の変化 React（JSX） <Button className="red" onClick={submit} data-cy="submitButton" > Save </Button> Vue（テンプレート） <Button class="red" @click="submit" data-cy="submitButton" > Save </Button>
48. ©MNTSQ, Ltd. 48 構文の変化 React（JSX） <Button className="red" onClick={submit} data-cy="submitButton" > Save </Button> Vue（テンプレート） <Button class="red" @click="submit" data-cy="submitButton" > Save </Button> 一番大きな変化
49. ©MNTSQ, Ltd. 49 構文の変化 React（JSX） <Button className="red" onClick={submit} data-cy="submitButton" > Save </Button> Vue（テンプレート） <Button class="red" @click="submit" data-cy="submitButton" > Save </Button> Vueには詳しいと思うので、、、
50. ©MNTSQ, Ltd. 50 構文の変化 ReactのJSXって？？
51. ©MNTSQ, Ltd. 51 構文の変化 ReactのJSXって？？
52. ©MNTSQ, Ltd. 52 構文の変化 ReactのJSXって？？ JSX (悪口が聞こえたような...)
53. ©MNTSQ, Ltd. 53 構文の変化 ReactのJSXって？？ 気持ち悪い ≒ よく知らないから？
54. ©MNTSQ, Ltd. 54 JSXとは何者なのか？
55. ©MNTSQ, Ltd. 55 構文の変化 JSXはJavaScriptの構文拡張 • テンプレート拡張じゃない • JavaScriptとXMLの組み合わせ • ECMAScript2015に対する構文拡張 x =
56. ©MNTSQ, Ltd. 56 構文の変化 JSXはJavaScriptの構文拡張 • テンプレート拡張じゃない • JavaScriptとXMLの組み合わせ • ECMAScript2015に対する構文拡張 x = なにがJavaScriptに拡張されたの？
57. ©MNTSQ, Ltd. 57 構文の変化 JSXはJavaScriptの構文拡張 • テンプレート拡張じゃない • JavaScriptとXMLの組み合わせ • ECMAScript2015に対する構文拡張 x = なにがJavaScriptに拡張されたの？ JSX.Element型
58. ©MNTSQ, Ltd. 58 構文の変化 JSXはJavaScriptの構文拡張 • テンプレート拡張じゃない • JavaScriptとXMLの組み合わせ • ECMAScript2015に対する構文拡張 • JSX.Element型が使える • TypeScriptが言語サポート x = const str: string = "hello world" const Element: JSX.Element = <span>hoge</span>
59. ©MNTSQ, Ltd. 59 なぜReactはJSXなのか？
60. ©MNTSQ, Ltd. 60 構文の変化 なぜReactはJSXなのか？ →コンポーネントという関心の分離にフォーカスするため
61. ©MNTSQ, Ltd. 61 構文の変化 なぜReactはJSXなのか？ →コンポーネントという関心の分離にフォーカスするため
62. ©MNTSQ, Ltd. 62 構文の変化 なぜReactはJSXなのか？ →コンポーネントという関心の分離にフォーカスするため 分離すべきはコンポーネント。
63. ©MNTSQ, Ltd. 63 構文の変化 なぜReactはJSXなのか？ <template> <div></div> </template> <script> </script> →コンポーネントという関心の分離にフォーカスするため 分離すべきはコンポーネント。
64. ©MNTSQ, Ltd. 64 構文の変化 なぜReactはJSXなのか？ <template> <div></div> </template> <script> </script> →コンポーネントという関心の分離にフォーカスするため 分離すべきはコンポーネント。 UI・ロジックではない。 技術の分離は関心の分離には寄与しない。
65. ©MNTSQ, Ltd. 65 構文の変化 なぜReactはJSXなのか？ <template> <div></div> </template> <script> </script> 分離すべきはコンポーネント。 UI・ロジックではない。 技術の分離は関心の分離には寄与しない。 であれば一つの技術（JavaScript）の表現力を活かし コンポーネントの分離にフォーカスする。 JavaScriptドリブン →コンポーネントという関心の分離にフォーカスするため
66. ©MNTSQ, Ltd. 66 構文の変化 なぜReactはJSXなのか？ Reactチーム初期メンバー: Pete Hunt React rethinking best practice Building components, not templates A framework cannot know how to separate your concerns for you. テンプレートではなくコンポーネントをつくる。 フレームワークは開発者がどのように関心の分離をするのか 分からない。
67. ©MNTSQ, Ltd. 67 ではVueは？
68. ©MNTSQ, Ltd. 68 構文の変化 Vueもやりたいことは同じ なぜSFCなのか（why-sfc） 関心の分離がファイルタイプの分離と同じではない コンポーネント内では、そのテンプレート、ロジック、およびスタイルが本質的に 結合されており、それらを連結することで、実際にコンポーネントがよりまとまり、 保守しやすくなります。 公式ドキュメントより
69. ©MNTSQ, Ltd. 69 構文の変化 Vueもやりたいことは同じ なぜSFCなのか（why-sfc） 関心の分離がファイルタイプの分離と同じではない コンポーネント内では、そのテンプレート、ロジック、およびスタイルが本質的に 結合されており、それらを連結することで、実際にコンポーネントがよりまとまり、 保守しやすくなります。 SFCという概念が独立性の高いコンポーネントを作るギブス 公式ドキュメントより
70. ©MNTSQ, Ltd. 70 構文の違い≒思想の違い
71. ©MNTSQ, Ltd. 71 構文の変化 Webアプリケーションの捉え方 React Vue <template> <body> <header> {{ header }} </header> <main> {{ content }} </main> <footer> {{ footer }} </footer> </body> <template> React React-pdf React Native アプリケーションのレンダリング先がブラウザ 動的なHTMLテンプレート
72. ©MNTSQ, Ltd. 72 構文の変化 思考の切り替え React UI（JSX）を返す関数を書く // JSX {condition && <span>Visible</span>} <ul> {items.map(item => <li key={item.id}>{item.name}</li>)} </ul> <!-- Vue Template --> <span v-if="condition">Visible</span> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> Vue ディレクティブ等で動的なHTMLを作る
73. ©MNTSQ, Ltd. 73 目次 1. 構文の変化 2. ライフサイクル表現の変化 3. まとめ
74. ©MNTSQ, Ltd. 74 まとめ
75. ©MNTSQ, Ltd. 75 まとめ まとめ • useEffectはムズい。 • lifecycle hookは機能的な凝集を意識 • ReactはJavaScriptドリブン • Vueは動的HTML ◦ （Vapor modeに期待）
76. ©MNTSQ, Ltd. 76 ご清聴ありがとうございました。