Vue 3の導入を急ピッチでやってみた

2021/10/13 【シューマイ】Tech Lead Engineerから最新技術を学べ！Vue.js/Nuxt.js編 の資料です。

Transcript

1. Vue 3の導入を
   急ピッチでやってみた
   

   View Slide

2. 話す人
   福田 雄貴（ふくだ ゆうき）
   ユアマイスター株式会社 テックリード
   Twitter: @hecateball
   

   View Slide

3. Vue 3って実際どうなの？
   

   View Slide

4. なぜVue 3を導入したのか
   

   View Slide

5. Vue 3: とにかく大量の機能アップデート
   ● Composition API
   ● Teleport
   ● 非同期コンポーネントと
   ● 複数のv-model
   ● ルートノードを複数持つコンポーネント
   ● filter廃止
   ● TypeScriptのサポート
   ● script setup
   ● v-bind
   ● defineCustomElement
   

   View Slide

6. View Slide

7. Composition API
   ロジックとコンポーネント => 疎結合
   ロジックと状態（データ） => 高凝集
   

   View Slide

8. View Slide

9. Nuxt3 思ってたよりやんちゃなアップデートだった ...
   

   View Slide

10. 所感
    ● Vue 2とVue 3はぜんぜん違う
    ● VueとReact (Svelte, etc...)は本質的にはそんなに違わない
    ● Nuxt 3は変わり果てていて簡単に評価が出来ない
    

    View Slide

11. Vue 3の書き方
    

    View Slide

12. script setup
    

    View Slide

13. script setup
    <br/>import EmailInput from ‘~/EmailInput.vue’<br/>import PasswordInput from ‘~/PasswordInput.vue’<br/>import { useSignIn } from ‘~/composables/auth’<br/>const { email, password, signIn } = useSignIn()<br/>
    
    
    
    
    サインイン
    
    
    <br/>.form { … }<br/>
    defineComponent()すら
    めんどくさい
    

    View Slide

14. IDEの対応も進んでいます
    VSCode + Volar WebStorm 2021.2.1
    

    View Slide

15. Component Tags Order
    

    View Slide

16. Component
    Tags Order
    <br/>import EmailInput from ‘~/EmailInput.vue’<br/>import PasswordInput from ‘~/PasswordInput.vue’<br/>import { useSignIn } from ‘~/composables/auth’<br/>const { email, password, signIn } = useSignIn()<br/>
    
    
    
    
    サインイン
    
    
    <br/>.form { … }<br/>
    <br/><template><br/><style><br/>

    View Slide

17. Evan YouさんのTwitterより
    I’ve been moving to first in<br/>SFCs myself especially with <script<br/>setup>.<br/>It aligns better with plain JS mental<br/>model (imports & declarations first,<br/>usage next)<br/>Evan You [@youyuxi] (Aug 18th, 2021) “I’ve been moving to <script> first in SFCs myself especially with <script<br/>setup>. This tool seems to help you automate that switch :)<br/>https://twitter.com/KawamataRyo/status/1427835141833986048” Retreaved from<br/>https://twitter.com/youyuxi/status/1427982990957846529<br/>Evan You [@youyuxi] (Aug 18th, 2021) “@reinink It aligns better with plain JS mental module (imports &<br/>declarations first, usage next)” Retreaved from https://twitter.com/youyuxi/status/1427985450598338568<br/>Evan You [@youyuxi] (Aug 18th, 2021) “mental model*” Retreaved from<br/>https://twitter.com/youyuxi/status/1427985502704226305<br/>

    View Slide

18. Component
    Tags Order
    {
    "plugins": [ "vue" ],
    "rules": {
    "vue/component-tags-order": [ "error",
    { "order": [ "script", "template", "style" ] }
    ]
    }
    }
    <br/><template><br/><style><br/>

    View Slide

19. Composition API
    

    View Slide

20. Composition
    API (1)
    import { ref, readonly, onBeforeMount } from 'vue'
    export const useItems = () => {
    const items = ref([])
    // データの操作を行う関数
    const refresh = async () => {
    const response = await fetch('/api/items')
    items.value = await response.json()
    }
    // ライフサイクルフックもコンポーネント外へ！
    onBeforeMount(refresh)
    // データと操作をセットで返却
    // データは読み取り専用にすることでより堅牢に
    return { items: readonly(items), refresh }
    }
    データとロジックを
    ひとまとまりにして
    Vueコンポーネントから分離
    

    View Slide

21. Composition
    API (1)
    import { reactive, toRefs, } from ‘vue’
    export const useSignIn = (onSuccess, onError) => {
    const input = reactive({
    email: ‘’,
    password: ‘’,
    })
    const signIn = async () => {
    try {
    await signInWithEmail(input.email, input.password)
    onSuccess()
    } catch(error) {
    onError(error)
    }
    }
    return { ...toRefs(input), signIn }
    }
    データとロジックを
    ひとまとまりにして
    Vueコンポーネントから分離
    

    View Slide

22. Composition
    API (1)
    <br/>import EmailInput from ‘~/EmailInput.vue’<br/>import PasswordInput from ‘~/PasswordInput.vue’<br/>import { useSignIn } from ‘~/composables/auth’<br/>import { useRouter } from ‘vue-router’<br/>const router = useRouter()<br/>const { email, password, signIn } = useSignIn(() => {<br/>router.push({ name: ‘index’ })<br/>})<br/>
    
    
    
    
    サインイン
    
    
    データとロジックを
    ひとまとまりにして
    Vueコンポーネントから分離
    

    View Slide

23. Composition
    API (2)
    import { ref, inject, provide, readonly, Ref, InjectionKey } from ‘vue’
    const Modal: InjectionKey> = Symbol()
    export const useModal = (injectionKey = Modal) => {
    const visible = inject(injectionKey, () => {
    const visible = ref(false)
    provide(injectionKey, visible)
    return visible
    }, true)
    const show = () => visible.value = true
    const dismiss = () => visible.value = false
    return { visible: readonly(visible), show, dismiss }
    }
    コンポーネントを跨ぐ状態管理
    

    View Slide

24. Composition
    API (2)
    import { createApp, ref, Plugin } from ‘vue’
    const plugin: Plugin = (app) => {
    const loading = ref(false)
    app.provide(‘loading-indicator’, loading)
    }
    createApp(App).use(plugin).mount(‘#app’)
    コンポーネントを跨ぐ状態管理
    

    View Slide

25. チャレンジ中
    コードの見通しの良さ重視
    まだ破綻はしてない
    

    View Slide

26. エンジニア
    積極採用中
    https://speakerdeck.com/yourmystar/engineer
    

    View Slide