Vue.js, React.jsとSwiftUIのpropsを比較する@神山.swift

2024/07/14

神山.swift #1 登壇資料

- Event report

---
・資料の中で引用したリンク一覧
　・Nuxters
　・GitHub
　・Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.

Transcript

1. Vue.js, React.jsとSwiftUIのpropsを比較する 2024 author: GANGAN
2. About me 2024 author: GANGAN
3. About me 岩丸慎平 (@gangan_nikki) AI Webアプリケーションの開発・運用やってました (Vue.js, Java, AWS, k8s, etc.) Nuxt contributor, Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt. Publication Owner 2024 author: GANGAN
4. 2024 author: GANGAN
5. 本日のタイトル 2024 author: GANGAN
6. Vue.js, React.jsとSwiftUIのpropsを比較する 2024 author: GANGAN
7. Vue.js, React.jsとSwiftUIのpropsを比較する 2024 author: GANGAN
8. 本日のまとめ 2024 author: GANGAN
9. フロントエンドの人はSwiftUIやった方がいい 2024 author: GANGAN
10. それぞれの特徴を整理する Vue.js, React.js 宣言的UI Vue.js テンプレート構文 双方向バインディング : 後述で追加説明します React.js JSX 単一方向バインディング SwiftUI 宣言的UI SwiftUI記法 単一方向バインディング 2024 author: GANGAN
11. テンプレート構文と React.js const subtile = "React is awesome!"; const Hello = () => { return ( <div> <h1>Hello</h1> <p>{subtitle}</p> </div> ); }; JSX構文 Vue.js <script setup lang="ts"> import { ref } from "vue"; const subtitle = ref("Vue.js is awesome!") </script> <template> <div> <h1>Hello</h1> <p>{{ subtitle }}</p> </div> </template> <style scoped> </style> 2024 author: GANGAN
12. 双方向バインディング parent components <script setup lang="ts"> import { ref } from "vue"; const onChange = (v?: string) => { console.log(v); }; const subtitle = ref("Vue.js is awesome!") </script> <template> <div> <child-component title="Hello World" :subtitle="subtitle" @change="onChange" /> </div> </template> child components <script setup lang="ts"> interface Props { title: string isChild?: boolean }; const props = defineProps<Props>(); const emits = defineEmits<{ change: [value: string] }>(); const onChange = (v: string): void => { emits('change', v); } const inputValue = ref<string>(''); </script> <template> <div> <h1>{{ title }}</h1> <p>{{ subtitle }}</p> <input v-model="inputValue" @change="onChange(inputVal </div> </template> 2024 author: GANGAN
13. case1: Basic React.js Vue.js const Hello = () => { return ( <div> <p>Hello</p> <p>React is awesome!</p> </div> ); }; <script setup lang="ts"> import { ref } from "vue"; const subtitle = ref("Vue.js is awesome!") </script> <template> <div> <h1>Hello</h1> <p>{{ subtitle }}</p> </div> </template> SwiftUI struct Hello: View { var body: some View { VStack { Text("Hello") Text("SwiftUI is awesome!") } } } 2024 author: GANGAN
14. case2: Props React.js Vue.js const Hello = ({name}) => { return <p>Hello, {name}!</p>; }; <template> <Hello name="Vue.js" /> </template> SwiftUI struct Hello: View { let name: String var body: some View { Text("Hello, \(name)!") } } 2024 author: GANGAN
15. case3: State React.js const Counter = ({ initialValue }) => { const [counter, setCounter] = useState(initialValue); const increaseCounter = useCallback(() => { setCounter(counter + 1); }, [counter]); return ( <div> <p>{counter}</p> <button onClick={increaseCounter}>Increase</button> </div> ); }; SwiftUI struct Counter: View { let initialValue: Int @State var counter: Int init(initialValue: Int) { self.initialValue = initialValue _counter = State(initialValue: initialValue) } var body: some View { VStack { Text("\(counter)") Button("Increase") { self.counter += 1 } } } } 2024 author: GANGAN
16. case3: State Vue.js <script setup lang="ts"> import { ref } from "vue"; const counter = ref<number>(0); const increment = () => { count.value++; }; </script> <template> <div> <p>{{ counter }}</p> <button @click="increment">Increase</button> </div> </template> SwiftUI struct Counter: View { let initialValue: Int @State var counter: Int init(initialValue: Int) { self.initialValue = initialValue _counter = State(initialValue: initialValue) } var body: some View { VStack { Text("\(counter)") Button("Increase") { self.counter += 1 } } } } 2024 author: GANGAN
17. Vue.jsのComposable parent <script setup lang="ts"> import { ref } from "vue"; import { useCounter } from "composables/useCounter"; const { counter, increment } = useCounter(0); </script> <template> <div> <p>{{ counter }}</p> <button @click="increment">Increase</button> </div> </template> counter composable // composables/useCounter.ts import { ref } from "vue"; export const useCounter = (initialValue: number) => { const counter = ref(initialValue); const increment = () => { count.value++; }; return { counter, increment }; } 2024 author: GANGAN
18. 比較してみた所感 SwiftUIの構文は書き方が全体的にReactっぽい Jetpack composeと同様にReactから取り入れられたエッセンスが多い SwiftUI Hooks <-> React Hooks Vue.js, React.js, SwiftUI, それぞれ狭義の違いはあれど広義的には同一知見を利用できる e.g.1 ) Atomic componentsなどのデザインパターン e.g.2 ) コンポーネントの分割粒度 e.g.3 ) stateful componentsの設計 2024 author: GANGAN
19. 本日のまとめ(再掲) 2024 author: GANGAN
20. フロントエンドの人はSwiftUIやった方がいい 2024 author: GANGAN
21. みんな フロントエンドの人は 両方 SwiftUIやった方がいい 2024 author: GANGAN
22. おしまい 2024 author: GANGAN