Vue.js, React.jsとSwiftUIのpropsを比較する 2024 author: GANGAN

About me 2024 author: GANGAN

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

2024 author: GANGAN

本日のタイトル 2024 author: GANGAN

Vue.js, React.jsとSwiftUIのpropsを比較する 2024 author: GANGAN

Vue.js, React.jsとSwiftUIのpropsを比較する 2024 author: GANGAN

本日のまとめ 2024 author: GANGAN

フロントエンドの人はSwiftUIやった方がいい 2024 author: GANGAN

それぞれの特徴を整理する Vue.js, React.js 宣言的UI Vue.js テンプレート構文 双方向バインディング : 後述で追加説明します React.js JSX 単一方向バインディング SwiftUI 宣言的UI SwiftUI記法 単一方向バインディング 2024 author: GANGAN

テンプレート構文と React.js const subtile = "React is awesome!"; const Hello = () => { return ( ); }; JSX構文 Vue.js import { ref } from "vue"; const subtitle = ref("Vue.js is awesome!") 2024 author: GANGAN

双方向バインディング parent components import { ref } from "vue"; const onChange = (v?: string) => { console.log(v); }; const subtitle = ref("Vue.js is awesome!") child components 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>('');

case1: Basic React.js Vue.js const Hello = () => { return ( ); }; import { ref } from "vue"; const subtitle = ref("Vue.js is awesome!") SwiftUI struct Hello: View { var body: some View { VStack { Text("Hello") Text("SwiftUI is awesome!") } } } 2024 author: GANGAN

case2: Props React.js Vue.js const Hello = ({name}) => { return

Hello, {name}!

; }; SwiftUI struct Hello: View { let name: String var body: some View { Text("Hello, \(name)!") } } 2024 author: GANGAN

case3: State React.js const Counter = ({ initialValue }) => { const [counter, setCounter] = useState(initialValue); const increaseCounter = useCallback(() => { setCounter(counter + 1); }, [counter]); return ( ); }; 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

case3: State Vue.js import { ref } from "vue"; const counter = ref<number>(0); const increment = () => { count.value++; }; 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

Vue.jsのComposable parent import { ref } from "vue"; import { useCounter } from "composables/useCounter"; const { counter, increment } = useCounter(0); 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

比較してみた所感 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

本日のまとめ(再掲) 2024 author: GANGAN

フロントエンドの人はSwiftUIやった方がいい 2024 author: GANGAN

みんな フロントエンドの人は 両方 SwiftUIやった方がいい 2024 author: GANGAN

おしまい 2024 author: GANGAN