Vueと比べて理解するNuxtの機能~auto-import編~

Transcript

1. Vueと比べて理解するNuxtの機能 auto-import編 1
2. 目次 1. 自己紹介 2. きっかけ 3. vueで確認する 4. Nuxtで確認する 5. ソースコードで確認する Engineer LT Night #1 @渋谷 2
3. 自己紹介
4. 飯原帆隆 株式会社メタップスホールディングス エンジニア Vue/Nuxt Rails Litを主に書きます Github: gityosan Engineer LT Night #1 @渋谷 4
5. きっかけ
6. きっかけ vue3で開発していて、Nuxt3と比べてルーティングや各種関数の初期化や読み込 み周りで辛さを感じることがあったため、しっかりと調査して比較することにしま した。 Engineer LT Night #1 @渋谷 6
7. まず、vueで確認してみる
8. ログを埋め込む // main.ts const resolveFunc = () => { return new Promise((resolve) => { setTimeout(() => { resolve('main.ts:resolveFunc:resolved') }, 2000) }) } const asyncCall = async () => { console.debug('main.ts:asyncCall:calling') const result = await resolveFunc() console.debug(result) } new Promise((resolve) => { setTimeout(() => { resolve('main.ts:Promise:resolved') }, 2000) }).then(() => { console.debug('main.ts:Promise:then') }) asyncCall().then(() => { console.debug('main.ts:asyncCall:then') }) // router/middleware.ts const resolveFunc = () => { return new Promise((resolve) => { setTimeout(() => { resolve('beforeEach:resolveFunc:resolved') }, 2000) }) } const asyncCall = async () => { console.debug('beforeEach:asyncCall:calling') const result = await resolveFunc() console.debug(result) } new Promise((resolve) => { setTimeout(() => { resolve('beforeEach:Promise:resolved') }, 2000) }).then(() => { console.debug('beforeEach:Promise:then') }) asyncCall().then(() => { console.debug('beforeEach:asyncCall:then') }) Engineer LT Night #1 @渋谷 8
9. トップレベルに一切awaitを付けなかった場合 Engineer LT Night #1 @渋谷 9
10. トップレベルにawaitを付けた場合 Engineer LT Night #1 @渋谷 10
11. 下記のように関連する処理全てにawaitを付けた としても、、、 // main.ts const app = await createApp(AppEmployee) await app.use(router) await app.component() await app.provide(storeKey, createGlobalStore()) await app.mount('#app') // router.ts - router.beforeEach(authCheckOnRouteChanged) + router.beforeEach(async (to, from) => { + await authCheckOnRouteChanged(to, from) + }) main.tsとrouter.tsの処理が非同期的に進みなが らapp.vueのmountへとつながっている Engineer LT Night #1 @渋谷 11
12. 一方、Nuxt
13. ログを埋め込む // plugin/index.ts const resolveFunc = () => { return new Promise((resolve) => { setTimeout(() => { resolve('plugin:resolveFunc:resolved') }, 2000) }) } const asyncCall = async () => { console.debug('plugin:asyncCall:calling') const result = await resolveFunc() console.debug(result) } export default defineNuxtPlugin(async (app) => { await new Promise((resolve) => { setTimeout(() => { resolve('plugin:Promise:resolved') }, 2000) }).then(() => { console.debug('plugin:Promise:then') }) await asyncCall().then(() => { console.debug('plugin:asyncCall:then') }) }) // middleware/index.ts const resolveFunc = () => { return new Promise((resolve) => { setTimeout(() => { resolve('middleware:resolveFunc:resolved') }, 2000) }) } const asyncCall = async () => { console.debug('middleware:asyncCall:calling') const result = await resolveFunc() console.debug(result) } export default defineNuxtRouteMiddleware(async (to) => { await new Promise((resolve) => { setTimeout(() => { resolve('middleware:Promise:resolved') }, 2000) }).then(() => { console.debug('middleware:Promise:then') }) await asyncCall().then(() => { console.debug('middleware:asyncCall:then') }) }) Engineer LT Night #1 @渋谷 13
14. トップレベルに一切awaitを付けなかった場合 Engineer LT Night #1 @渋谷 14
15. トップレベルにawaitを付けた場合 Engineer LT Night #1 @渋谷 15
16. Nuxtではasync awaitを適切に設定した場合、pluginとmiddlewareの読み込みが同 期的に進みます これが地味に嬉しい。 しかし、なぜこんな挙動をするのか Engineer LT Night #1 @渋谷 16
17. ソースコードで確認してみる
18. // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/plugins/router.ts export default defineNuxtPlugin<{ route: Route, router: Router }>({ name: 'nuxt:router', enforce: 'pre', setup (nuxtApp) { // < 中略> async function handleNavigation (url: string | Partial<Route>, replace?: boolean): Promise<void> { try { // Resolve route const to = getRouteFromPath(url) // Run beforeEach hooks for (const middleware of hooks['navigate:before']) { const result = await middleware(to, route) // Cancel navigation if (result === false || result instanceof Error) { return } // Redirect if (typeof result === 'string' && result.length) { return handleNavigation(result, true) } } for (const handler of hooks['resolve:before']) { await handler(to, route) } // Perform navigation Object.assign(route, to) if (import.meta.client) { window.history[replace ? 'replaceState' : 'pushState']({}, '', joinURL(baseURL, to.fullPath)) if (!nuxtApp.isHydrating) { // Clear any existing errors await nuxtApp.runWithContext(clearError) } } // Run afterEach hooks for (const middleware of hooks['navigate:after']) { await middleware(to, route) } } catch (err) { if (import.meta.dev && !hooks.error.length) { console.warn('No error handlers registered to handle middleware errors. You can register an error handler with `router.onError()`', err) } for (const handler of hooks.error) { await handler(err) } } } // < 中略> } }) Engineer LT Night #1 @渋谷 18
19. // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/entry.ts ... entry = async function initApp () { if (vueAppPromise) { return vueAppPromise } const isSSR = Boolean( window.__NUXT__?.serverRendered || document.getElementById('__NUXT_DATA__')?.dataset.ssr === 'true' ) const vueApp = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent) const nuxt = createNuxtApp({ vueApp }) try { await applyPlugins(nuxt, plugins) } catch (err) { await nuxt.callHook('app:error', err) nuxt.payload.error = (nuxt.payload.error || err) as any } try { await nuxt.hooks.callHook('app:created', vueApp) await nuxt.hooks.callHook('app:beforeMount', vueApp) vueApp.mount(vueAppRootContainer) await nuxt.hooks.callHook('app:mounted', vueApp) await nextTick() } catch (err) { await nuxt.callHook('app:error', err) nuxt.payload.error = (nuxt.payload.error || err) as any } return vueApp } ... Engineer LT Night #1 @渋谷 19
20. 恐らく、、、 pluginはもとよりmiddlewareもrouterのpluginとして定義して、その上で初期化時にpluginを順次読み 込んでいるため先述のような挙動になるのだろうと考えられる Engineer LT Night #1 @渋谷 20
23. Thank you for listening!!