VueエンジニアがReactを触って感じた_設計の違い

Reactの基本３機能について、Vueと比較して、設計の違いを再確認するためのLT発表資料です。

Transcript

1. LIGHTNING TALK / 5 min Vueエンジニアが Reactを触って 感じた “設計の違い ” kouki.miura ／ ドゥウェル株式会社 (NIHON KOHDEN Group) 2026.04.08 ／ React .study vol.01@sapporo
2. 01 / SELF INTRODUCTION VueエンジニアがReactを触って感じた設計の違い / kouki.miura 自己紹介 kouki.miura Vue.js Engineer COMPANY ドゥウェル株式会社 NIHON KOHDEN Group STACK TypeScript ／ Vue.js ／ Node.js COMMUNITY VueSapporo, さっぽろ医療 IT勉強会(MIT_sapporo) Vue.js community in Hokkaido
3. 02 / GOAL VueエンジニアがReactを触って感じた設計の違い / kouki.miura このLTのゴール Vue と React の 設計思想 の違いを理解する コードの書き方ではなく、なぜそう書くのか？に注目
4. 03 / CONCLUSION (先に結論) VueエンジニアがReactを触って感じた設計の違い / kouki.miura 結論 先に答えだけ言うと── React 自由 ／ 設計は自分で決める ▪ ライブラリ寄り 必要なものは自分で組む ▪ UI = 関数 状態を渡すと画面が返る ▪ プロジェクトの裁量大 ベストプラクティスは現場次第 “Just the View Layer.” Vue 統一感 ／ 設計が用意されている ▪ フレームワーク寄り 公式が道筋を示す ▪ テンプレート + リアクティブ 直感的な書き味 ▪ 推奨パターンがある チームで揃えやすい “The Progressive Framework.”
5. 04 / DESIGN PHILOSOPHY VueエンジニアがReactを触って感じた設計の違い / kouki.miura 設計思想の違い React ライブラリ寄り UI = 関数 状態を入れて画面を返す純粋関数の発想 最小コア + エコシステム ルーティング/状態管理は別ライブラリ プロジェクトの裁量大 構成・命名・パターンは現場で決める Vue フレームワーク寄り テンプレート + リアクティブ HTMLに近い構文 + ref / reactiveで自動追従 推奨パターンがある 公式ルータ/状態管理/スタイルガイドが揃う 書き方が揃いやすい .vue 単一ファイル構成が標準
6. 05 / STATE VueエンジニアがReactを触って感じた設計の違い / kouki.miura 状態の持ち方　 — setState / ref 「カウンタを1つ増やす」だけでも、書き方の発想が違う React ／ useState import { useState } from 'react' export const Counter = () => { const [count, setCount] = useState(0) // 値ではなく『更新関数』を呼ぶ return ( <button onClick={() => setCount((count) => count + 1)} > {count} </button> ) } Vue ／ ref <script setup lang="ts"> import { ref } from 'vue'; // .value で読み書きする変数 const count = ref(0); </script> <template> <button @click="count++"> {{ count }} </button> </template> POINT React は『次の状態を返す』、 Vue は『値を直接書き換える』。リアクティブの入口が違う。
7. 06 / VIEW VueエンジニアがReactを触って感じた設計の違い / kouki.miura ビューの書き方　 — JSX / SFC Reactは『JSの中にUI』、Vueは『1ファイルにHTML/JS/CSS』 React ／ .tsx type Props = { name: string } export const Hello = ({ name }: Props) => { // JSは式、JSXもただの式 return ( <div className="card"> <h1>Hello, {name}!</h1> </div> ) } Vue ／ .vue (SFC) <script setup lang="ts"> defineProps<{ name: string }>(); </script> <template> <div class="card"> <h1>Hello, {{ name }}!</h1> </div> </template> <style scoped>.card { padding: 1rem; }</style> POINT React は『JS世界の延長』、Vue は『HTML世界の延長』。どちらも一長一短。
8. 07 / SIDE EFFECTS VueエンジニアがReactを触って感じた設計の違い / kouki.miura 副作用　— useEffect / onMounted・watch マウント時のフェッチ + 値の変更検知を例に React ／ useEffect import { useEffect, useState } from 'react' interface User { id: number name: string } export const User = ({ id }: { id: number }) => { const [user, setUser] = useState<User | null>(null) // 依存配列で『いつ実行するか』を制御 useEffect(() => { fetch(`/api/users/${id}`) .then((r) => r.json()) .then(setUser) }, [id]) return user } Vue ／ onMounted + watch <script setup lang="ts"> import { ref, watch, onMounted } from 'vue'; const props = defineProps<{ id: number }>(); const user = ref(null); // 役割ごとにAPIが分かれている const load = async () => user.value = await (await fetch( `/api/users/${props.id}`)).json(); onMounted(load); watch(() => props.id, load); </script> POINT Reactは1つのフックに集約／Vueは『初回マウント』『監視』が別 APIに分かれる。
9. 08 / SUMMARY VueエンジニアがReactを触って感じた設計の違い / kouki.miura まとめ どちらが良い／悪いではなく、思想が違う React 自由 設計は自分で決める → 柔軟さと引き換えに、判断コストを払う Vue 統一感 設計が用意されている → 揃えやすい代わりに、レールに乗る前提 Thank you! ／ ご清聴ありがとうございました