Next.js に疲れた私は Vue3 に癒やされた

Transcript

1. Next.js に疲れた私は Vue 3 に癒やされた 2024/04/22 Ux Dig
2. 自己紹介 江口 拓弥 Sendai Frontend User Group 運営メンバーの1人 2018年に東京から仙台に移住 2019年から複数プロジェクトの新規事業開発やってます 1児の父です👶
3. Vue との出会いとこれまで
4. 2018.4 Ruby on Rails v5 を触ったときに Vue と出会う Webpacker と出会い、そして決別。 2019.2 Vue によるフロントエンドネイティブな開発を開始 vue.config.js という闇。 2019.6 Nuxt.js の勃興 同時期に忍び寄る TypeScript の影。 2019.12 TypeScript の勃興 Vue の受難。 2020.9 Vue 3 のリリース TypeScript ready にはなったが v2 からの移行に莫大なコストが 2022.11 Nuxt3 安定版リリース Vue 3 のリリースから 2 年という歳月はあまりにも長かった。 2021.x React / Next.js コミュニティへ移住 TypeScript ネイティブ対応への憧れ class API、v2 への composition API 提供といった形で TS 対応は行われたが...
6. 2021.x Vercel の勢いが止まらない Next.js との親和性が高いサービスの提供と、 Vercel 新サービスの Next.js 対応の速さ 2022.x Edge Computing / Function の浸透 ますます Next.js は時代の風雲児へ 2023.11 Next.js Server Actions 発表 Next.js はますます高機能に（言い方を変えれば複雑に）。 一部の層からはセキュリティへの懸念・複雑化への懸念が噴出。 2024.2 Vue プロジェクトへ移籍 Vue x Vite の軽量開発 202x.xx これからも Next.js は進化し続けるでしょう... パフォーマンスチューニング、複雑なライフサイクル対応の Hook 作成に疲弊。 2024.3 Options API → Composition API への移行対応 → あれ、Vue って良くね？
7. Vue 3 の癒やしポイント① Composition API Options API での型付け、Class API を経験していると、 知識としては知っていても実際に手を動かしてみると設計の良さに感動。 import { ref } from 'vue'; const props = defineProps<{ defaultTel: string; }>(); const tel = ref(props.defaultTel); // const tel: Ref<string> const email = ref<string>(); // const email: Ref<string | undefined> import { ref, watch } from 'vue'; const email = ref(''); // watch だけでなく // function などもどこにでも書ける安心感 watch(email, (val) => { // (parameter) val: string console.log(val); }); // ※なんらかのルールはないと逆に可読性が悪化するので注意！
8. Vue 3 の癒やしポイント② リアクティブ性の制御ができる安心感 Vue の setup 関数は、一度だけ読み込まれる安心感。 （無限ループって怖くね？） それによって React hooks の条件分岐呼び出しができない制約が Composition API にはない。 副作用として、ref の値が変更されてもリアクティブな更新は行われないが、 その際は computed, watch 等を使えばよいので、リアクティブ性を開発者がコントロールできる安心感がある。 仕組みは複雑なので解説しません import { useState } from 'react'; export function App(props) { const [message, setMessage] = useState(''); const length = message.length; return ( <div> <h1>Message length is {length}//h1> <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} /> //div> ); <script setup lang='ts'> import { ref, computed } from 'vue'; const message = ref(''); const length = computed(() => message.value.length); //script> <template> <div> <h1>Message length is {{ length }}//h1> <input type="text" v-model="message" /> //div> //template>
9. Vue 3 の癒やしポイント③ CSS の書きやすさ Vue 3 になって対応したわけではないが、SFC の機能として style が提供されている利便性を再認識。 好き嫌いありそうとはいえ、CSSに苦手意識がない人ほどメリットと感じる。 (jQuery っぽく書けることもモダンJSへ乗り換えるハードルの低さは重要なメリット） React みたいに CSS 設計の検討が不要（フレームワーク側に機能として内包している）のはでかい。 アニメーションに特化したタグがネイティブで実装されている（ Transition とか） <template> <main> <h1>Hello World/!//h1> //main> //template> <style scoped> h1 { font-size: 2em; } //style>
10. もちろん良いことだけではない
11. Vue 3 の難しいポイント① Vue においては、リアクティブ性の追求が必ずしも良い結果にならない computed, watch, watchEffect を利用することでコード量が増えることも。 @click と関数を使ったイベント駆動を併用することで見通しがむしろ良くなるシーンがある。 → が、リアクティブ・非リアクティブの混在が複雑性を高める...設計が重要
12. Vue 3 の難しいポイント② Composable は hook ではない、という理解が必要 React Hook は rerender を意識すればシュッと書けるが、 Vue Composable も React Hook っぽく書くには、 引数の Ref 化と、処理系を watchEffect 内で行う必要あり。 （Hook は純粋関数で書くこともできるが、 Composable は無理） // 引数は ref で取る export function useFetchAddress(zipCode: Ref<string>) { const address = ref<Address | null>(null); const error = ref<any>(null); const isLoading = ref(false); watchEffect(async () => { // 引数変化時にリアクティブに処理を再実行したい場合は watchEffect で囲む const zipCodeValue = toValue(zipCode); // …API叩くなどの処理 }); return { address, error, isLoading }; };
13. Vue 3 の難しいポイント③ エコシステムが React と比較すると未熟 Vue で利用できるライブラリは増えているが React と比較すると見劣りするという状況は 2024 年も変わっていない。 ※Composition API が出てから React ほど時間が経っていないことが大きい？ Vue の今後に疑念（次世代の Vue 登場時の移行コストや技術選定）を抱いている開発者が多い？ React を身に着けた人が Vue に戻って来るインセンティブが見いだされていない？
14. まとめ • React = Simple 、 Vue = easy は変わらない • 機能面を見れば React と Vue の差はかなり縮まっている • 良くも悪くも、 React は枯れた。Vue には先進性（変化）がある。 ◦ React の先進性はそのエコシステムに由来している ◦ 逆に言えば卓越した React の設計の良さ
15. おまけ：自分なら Vue を採用する？ • プロジェクト要因 ◦ デザイナーもHTML/CSSコーディングする ◦ 開発チームで React 未経験者が多数派、ジュニアが多い • 要件要因 ◦ デザインFWが使えないレベルで凝ったデザイン ◦ スクラップ & ビルドが頻繁に発生することがわかっている ◦ アプリケーション的ではないプロダクト（LPなど）だが 一部で API コールなど複雑な実装が必要なサイト制作
16. おわり