ReactとVueは仲良くできるのか？

Reactエンジニア、Vueエンジニアと採用スキルにマッチしないケースがあります。
ReactアプリからVueコンポーネントや、VueアプリからReactコンポーネントが呼び出せればフロントエンドエンジニアのスキルアンマッチは解消できるかもしれません。
ReactアプリからVueコンポーネント（SFC）を呼び、VueコンポーネントからReactコンポーネント（.tsx）を呼ぶデモです。

Transcript

1. 2026.06.24 / VueSapporo #3 三浦　恒樹 (MIURA KOUKI) / 医療ITエンジニア ReactとVueは仲良くできるのか？ ～ReactからVueを呼び、VueからReactを呼んでみた～
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） - 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 - TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 JBUG札幌 JavaDO ゆるWeb勉強会 えびてく クラメソ札幌IT勉強会（仮） AWS初心者LT会in札幌 札幌すごいAI会 札幌IT石狩鍋 hokkaido.js 函館本線沿線勉強会 VueSapporo さっぽろ医療IT勉強会 - コーディングBGM ラックライフ - Naru, 名前を呼ぶよ BLUE ENCOUNT - Survivor, ポラリス SHANK Dizzy Sun Fist
3. INDEX - フロントエンドエンジニア比（推測） - ReactとVueは仲良くできるのか？ - Reactアプリ（React→Vue.js） - Vueコンポーネント（Vue.js→React） - Reactコンポーネント - React→Vue.js→React - まとめ
4. フロントエンドエンジニア比 https://www.npmjs.com/package/react https://www.npmjs.com/package/vue https://www.npmjs.com/package/svelte
5. フロントエンドエンジニア比 https://www.npmjs.com/package/react https://www.npmjs.com/package/vue https://www.npmjs.com/package/svelte 30 3 1 : : ※npmパッケージ週間ダウンロード数からの推測
7. ReactとVueは仲良くできるのか？ Reactアプリ Vueコンポーネント(SFC) Reactコンポーネント(TSX) 仲良しなら 呼び出し合えるはず！
8. ReactとVueは仲良くできるのか？ React Vue.js React Vue.js ReactとVue.jsの 依存関係を追加。
9. Reactアプリ（React→Vue.js） main.ts react-app.tsx ここがVueアプリ
10. Vueコンポーネント（Vue.js→React） ここがReactアプリ vue-widget.vue
11. Reactコンポーネント 純粋なReactコンポーネント react-widget.tsx
12. React→Vue.js→React
13. まとめ - ReactとVueは相互に呼び出せるため、段階的な移行や共存が可能 - Svelteなど他フレームワークとの連携にも応用できる - フレームワークの違いを越えて、多様なエンジニアがプロジェクトに貢献できる ※注意点 - 複数フレームワークを使用するプロジェクトはランタイム分のバンドルサイズが増加 - react-vue-react 246KB - 同等のReactアプリ 187KB - 同等のVue.jsアプリ 60KB
15. ご清聴ありがとうございました。 7/25(土) 17:30～