「React でいいじゃん」と思ってた私が、「Vue 熱いじゃん」ってなった話

リンクアンドモチベーション登壇資料（2026/9/15）
「React でいいじゃん」と思ってた私が、「Vue 熱いじゃん」ってなった話

非公式 Vue Fes Japan 2026 タイムテーブル解説会
#リンモチ #Vue #vuefes
===========================================
【株式会社リンクアンドモチベーション】
■イベントページ
　https://andpad.connpass.com/event/398631/
■お問合せ先
　engineer_pr@lmi.ne.jp
■テックブログ
　https://link-and-motivation.hatenablog.com/
■開発組織の公式X
　https://x.com/LinkandM_dev
=============================================

Transcript

1. 「React でいいじゃん」と思ってた私が、 「Vue 熱いじゃん」ってなった話 渡邊 美由貴 / リンクアンドモチベーション / 新卒2年⽬
2. 自己紹介 渡邊美由貴（watanabe miyuki） 株式会社リンクアンドモチベーション エンゲージメントプロダクトユニット © Link and Motivation Group 2 • 2025年新卒⼊社 • 現在は既存プロダクトの新規機能開発に従事 • #バーチャル街歩き
3. 会社紹介 創業年⽉⽇｜2000年4⽉7⽇ 上場市場 ｜東京証券取引所 プライム市場 従業員数 ｜約1,600名 (グループ全体) 売上 ｜415億 (グループ全体) ※2025年12⽉期 事業内容 ｜組織改善クラウドの開発・提供 © Link and Motivation Group 3
4. 技術広報 登壇することになったよ！ あとは4649！
5. ヤバい。 Vue について何も語れない 書き⽅にも慣れた。AI を使って、半年で開発速度は 2 倍になった。 渡 渡邊美由貴 Reactでいいじゃんってなってます 2026/8/6、社内 Slack。1ヶ⽉前の私。 今は、Vue という FW について何も考えずに開発している。
6. 結論 正しいことを、簡単に 慌てて調べて分かった、私の結論。Vue は、正しい書き⽅を⼀番簡単な書き⽅ に 置いた FW だった。 だから書き⽅を覚えたら、ややこしいことを考えなくていい 。 なぜそう思ったか。気づいたことを、3つ。
7. 気づき ① キャッシュを、考えなくなった React では、useMemo を使うかどうかいつも迷ってた React — 再実⾏を⽌める Vue — 再実⾏させる const total = useMemo( () => sum(items), [items] ); const total = computed( () => sum(items.value) ); React は⽌めるコードを書き、Vue は再実⾏させるコードを書く。「普通」の意味が逆。 つまり、キャッシュを考えなくていい。
8. 気づき ② 依存配列を、考えなくなった React で⼀番怖かったのが、deps に「毎回新しいオブジェクト」を⼊れてしまう無限レンダリング React — よくある無限レンダリング Vue — 同じことを書いてみる const options = { type }; useEffect(() => { setIsDirty(true); }, [options]); const options = computed(() => ({ type: type.value })); watch(options, () => { isDirty.value = true; }); 本体が毎回⾛る → options は毎回別オブジェクト → === が不⼀致 → effect 実⾏ → setIsDirty → 再レンダリング → ↺ 先頭に戻る この⾏が⾛るのは 1 回 → 作り直されない → isDirty は options の 依存じゃない → ↺ が閉じない 輪を閉じていたのは「本体が毎回⾛る」という⼀辺。Vue にその⼀辺が無いから、 この輪は作れない 。 つまり、依存を考えなくていい。（無限ループ⾃体は Vue でも起きる。消えたのは「書き忘れ」「毎回変わる」の2つ）
9. 気づき ③ 書く場所を、考えなくなった React では、関数のどこに書くかで実⾏結果が変わった。「これ、どこに書くんだっけ」 React — 場所で「いつ‧何回」が決まる Vue — どこに書いても、⼀度 if (x) { const [n] = useState(0); // ✗ } const f = () => {}; // 毎回新規 if (x) { const n = ref(0); // OK } const f = () => {}; // 一度だけ 本体が毎回⾛るから、hooks はトップレベル固定、関数は毎回作り直し 。 Vue の setup は⼀度しか⾛らない。 つまり、書く場所を考えなくていい。
10. 回収 「FW について何も考えていない」は、 FW が⼀番仕事をしている証拠だった 3つとも、私が書かなかったんじゃなくて、書く必要がなかった 。 React は関数を毎回⾛らせるから、⼈間が教える。 Vue は⼀度だけ⾛らせて、ref が知っている。 正しい書き⽅が、⼀番簡単な書き⽅になっていた。 「正しいことを、簡単に」だった。
11. 1ヶ⽉前の私に、返信する 渡 渡邊美由貴 8/6 reactでいいじゃんってなってます 渡 渡邊美由貴 今⽇ React でもいいよ。ただ、 あなたの開発体験は、気づいてないところで Vue の設計 思想の恩恵をもらってるよ。
12. Vue、熱いじゃん FW の書き⼼地を、初めて意識した。 根っこにあるのは、「何を普通にするか」という設計思想の差。
13. アップデートが、楽しみになった Vue は .value を消す実験をして、「何が追跡されてるか分からなくなる」を 理由に戻した。 FW は、使う側の頭の中を⾒ながら、今も⼈が作っている。 みなさんの気に⼊っているアップデート、懇親会で教えてください。