Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to development library for Vue 3

How to development library for Vue 3

Vue 3 が正式リリースされて半年以上。未だに 2.x と 3.x が混在する状況は続いています。OSS の開発者としては、 v2 と v3 のどちらをサポートするべきか悩むことは多いでしょう。このセッションでは、Vue 3 時代の Vue.js 向けライブラリの開発方法と、 Vue 2.x 対応との両立について紹介します。Vue を支える新たな OSS が生まれるきっかけになれば幸いです。

花谷 拓磨 / LINE株式会社 Front-end Dev9チーム

※こちらは以下イベントで登壇した資料となります。
https://line.connpass.com/event/210163/
※動画リンクは後日掲載いたします。

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

May 12, 2021
Tweet

Transcript

  1. How to development library for Vue 3 LINE Corporation Front-End

    Dev9 Team / Takuma HANATANI(@potato4d) 2021.05
  2. 5BLVNB)"/"5"/* 'SPOU&OE%FW5FBN.BOBHFS Relationship - 2018/02: Join Vue.js JP doc maintainer

    - 2018/12: Join LINE Corp. - 2019/12: LINE × Vue.js Core team - 2020/03: Join nuxt-community organization - 2021/05: Start Sponsoring Vue.js as LINE OSS - vue-fixed-header(deprecated) - nuxt-basic-auth-module - @nuxtjs/dayjs - nuxt-client-init-module 4FMG*OUSPEVDUJPO
  3. 7VFKT ͷϥΠϒϥϦ։ൃΛऔΓר͘؀ڥʹ͍ͭͯ ৽͘͠ 7VFKT ޲͚ͷϥΠϒϥϦΛ։ൃ͢Δ 7VF Y޲͚ͱ 7VF Y޲͚Λཱ྆͢Δʹ͸ ҠߦΛ΍Ίͨέʔε

    1. 2. 3. 4. Contents
  4. 7VFKT ͷϥΠϒϥϦ։ൃΛऔΓר͘؀ڥʹ͍ͭͯ ৽͘͠ 7VFKT ޲͚ͷϥΠϒϥϦΛ։ൃ͢Δ 7VF Y޲͚ͱ 7VF Y޲͚Λཱ྆͢Δʹ͸ ҠߦΛ΍Ίͨέʔε

    1. 2. 3. 4. Contents
  5. 7VF Yͱ 7VF Yͷར༻ঢ়گ https://www.npmtrends.com/

  6. 7VF Yͱ 7VF Yͷར༻ঢ়گ https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

  7. 7VF Yͱ 7VF Yͷར༻ঢ়گ https://github.com/vitejs/vite/tree/main/packages/plugin-vue

  8. 7VFKT ͷϥΠϒϥϦ։ൃΛऔΓר͘؀ڥʹ͍ͭͯ ৽͘͠ 7VFKT ޲͚ͷϥΠϒϥϦΛ։ൃ͢Δ 7VF Y޲͚ͱ 7VF Y޲͚Λཱ྆͢Δʹ͸ ҠߦΛ΍Ίͨέʔε

    1. 2. 3. 4. Contents
  9. 7VF TVQQPSUJTPQUJPOBM

  10. WVFEFNJ https://github.com/vueuse/vue-demi

  11. /FXCVOEMFS7JUF https://vitejs.dev

  12. %FWFMPQNFOU5FNQMBUFGPS7VF MJCSBSZ https://github.com/potato4d/vite-template-vue3-library

  13. 7VFKT ͷϥΠϒϥϦ։ൃΛऔΓר͘؀ڥʹ͍ͭͯ ৽͘͠ 7VFKT ޲͚ͷϥΠϒϥϦΛ։ൃ͢Δ 7VF Y޲͚ͱ 7VF Y޲͚Λཱ྆͢Δʹ͸ ҠߦΛ΍Ίͨέʔε

    1. 2. 3. 4. Contents
  14. -FBSOBCPVUCSFBLJOHDIBOHFT

  15. -FBSOBCPVUCSFBLJOHDIBOHFT https://v3.vuejs.org/guide/migration/introduction.html

  16. -FBSOBCPVUCSFBLJOHDIBOHFT https://v3.vuejs.org/guide/migration/fragments.html

  17. -FBSOBCPVUCSFBLJOHDIBOHFT https://v3.vuejs.org/guide/migration/render-function-api.html

  18. -FBSOBCPVUDPOWFSUFS

  19. -FBSOBCPVUDPOUFSUFS https://github.com/vueuse/vue-demi

  20. -FBSOBCPVUDPOUFSUFS TBD

  21. .FDIBOJTNPGWVFEFNJ Vue3 import { reactive } from'v ue-demi' node_modules vue-demi

    Vue 3 Vue 2
  22. .FDIBOJTNPGWVFEFNJ Vue3 import { reactive } from'v ue-demi' node_modules vue-demi

    Vue 3 Vue 2
  23. θϩϕʔεͰ৽͍͠ύοέʔδͱͯ͠ߏ੒͠௚͢ .POPSFQP ͱͯ͠ϩδοΫΛ੾Γग़͢   ύοέʔδͷ੾Γग़͠ํ

  24. θϩϕʔεͰύοέʔδͱͯ͠ߏங͠௚͢ ಛ௃ ɾθϩ͔Βߏங͢Δ͜ͱͰɺ׬શʹผͷίʔυϕʔεͱͯ͠؅ཧ͞ΕΔ ɾϦϦʔελΠϛϯάར༻͍ͯ͠ΔϏϧυπʔϧϥϯλΠϜશ͕ͯ෼͔ΕΔ ڧΈ ɾύοέʔδ໊͸ಉ͡··ɺϝδϟʔόʔδϣϯҧ͍΍ !OFYUͳͲΛ͚ͭ΍͍͢ ɾWVFJOͳͲ͸ !OFYUܗࣜΛ࠾༻͍ͯ͠Δ ɾ'SPOU&OE0QT؍఺Ͱͷྺ࢙΍ෛ࠴Λ࢒ͮ͠Β͍

    ऑΈ ɾઐ༻ͷϩδοΫͳͲ͕ް͍৔߹ʹɺଟॏ؅ཧͷίετ͕ॏ͘ͷ͔͔͠Δ ɾڞ༗Ͱ͖ΔΑ͏ͳπʔϧνΣΠϯ͢Β΋ݸผͰ؅ཧ͢Δ͜ͱʹͳΔ ผ SFQPͳͲͰఏڙΛ࢝ΊΔ
  25. .POPSFQP ͱͯ͠ϩδοΫΛ੾Γग़͢ ಛ௃ ɾίΞϩδοΫΛڞ༗ͯ͠ɺґଘπϦʔ͚ͩΛ੾Γ෼͚Δ ɾUFTUMJOUGPSNBUͳͲ͸ IPJTUͰڞ௨Խ͢Δ ڧΈ ɾߦ͍ͬͯΔܭࢉ΍ϩδοΫ͕ϔϏʔͳ৔߹ɺͦͷ؅ཧίετΛ࠷খԽͰ͖Δ ɾ+FTU΍&4-JOU1SFUUJFSͳͲͷߋ৽ίετ͸͔ͳΓ཈͑ΒΕΔ ऑΈ

    ɾಉҰύοέʔδ໊Λ࣋ͯͳ͍ͨΊɺWVFGPPCBSͷΑ͏ͳ໊લۭ͕ؒඞཁʹ ɾ໊લۭؒͷσϑΥϧτ͕ 7VFଆʹ͍ͨ͠৔߹ʹίετ͕ߴ͘ͳΔ -FSOB:BSO8PSLTQBDFͳͲͰղܾΛਤΔ
  26. Core For v3 ͋Δࣾ಺ύοέʔδͷྫ import { Directive } from 'vue';

    import { hook } from '../core'; const directive: Directive = { mounted: hook, updated: hook, }; export default directive; TBD export function hook() { // ... Main logic }
  27. ͭͷύοέʔδΛ؅ཧ͢Δ৔߹͸ DPEFNPE ΋༗ޮ׆༻Ͱ͖Δ

  28. 7VFKT ͷϥΠϒϥϦ։ൃΛऔΓר͘؀ڥʹ͍ͭͯ ৽͘͠ 7VFKT ޲͚ͷϥΠϒϥϦΛ։ൃ͢Δ 7VF Y޲͚ͱ 7VF Y޲͚Λཱ྆͢Δʹ͸ ҠߦΛ΍Ίͨέʔε

    1. 2. 3. 4. Contents
  29. WVFGJYFEIFBEFS

  30. 3FOEFS'VODUJPOͷίʔυʹ͍ͭͯ

  31. Code DOM WVFGJYFEIFBEFS͕ੜΈग़͢ %0.ʹ͍ͭͯ <FixedHeader> <header> <h1> <nav> <ul> …

    </ul> </nav> </header> </FixedHeader> <header class="vue-fixed-header" > <h1> <nav> <ul> … </ul> </nav> </header>
  32. Code DOM WVFGJYFEIFBEFS͕ੜΈग़͢ %0.ʹ͍ͭͯ <FixedHeader> <header> <h1> <nav> <ul> …

    </ul> </nav> </header> </FixedHeader> <header class="vue-fixed-header" > <h1> <nav> <ul> … </ul> </nav> </header> 1. Fragment ΁ͷରԠ
  33. Code DOM WVFGJYFEIFBEFS͕ੜΈग़͢ %0.ʹ͍ͭͯ <FixedHeader> <header> <h1> <nav> <ul> …

    </ul> </nav> </header> </FixedHeader> <header class="vue-fixed-header" > <h1> <nav> <ul> … </ul> </nav> </header> 1. Fragment ΁ͷରԠ 2. Render Function
  34. *&αϙʔτͷऴྃ https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

  35. աڈΑΓ΋ະདྷΛ޲͍͍ͯ͜͏ ·ͱΊ • ݱঢ় 7VF Yͱ 7VF YΛಉ࣌ʹαϙʔτ͢Δ৔߹ɺ͍͔ͭ͘ͷબ୒ࢶ͕͋Δ • ύοέʔδଆͰશͯରԠ͢Δ

    WVFEFNJ WVFͳͲʹཔΔ ͲͪΒ͔ʹৼΓ੾Δ • ΋͠ 7VF ޲͚ʹύοέʔδΛ࡞Γ͍ͨͷʹɺ 7VF Y͕ؾ͕͔Γ͋Ε͹ɺ๨Εͯ΋ྑ͍ • ϢʔβʔଆͰͦͷࠩҟΛղফ͠ɺར༻͢Δखஈ͕ͳ͍Θ͚Ͱ͸ͳ͍ͨΊɻ • ৽͍͠Ձ஋Λఏڙ͢Δ͜ͱΛ༏ઌ͢Δ͜ͱ͕ɺ݁Ռతʹརӹʹͭͳ͕Δ͜ͱ΋͋Δ • ͲͪΒ΋αϙʔτ͢Δ৔߹͸ɺ͍͔ͭ͘ͷେ͖ͳҧ͍ΛؾΛ͚ͭΔͱྑ͍ • JOIFSJU"UUST ͷڍಈͷҧ͍΍ 3FOEFS'VODUJPOͳͲ͸ɺϥΠϒϥϦͰ΋ΞϓϦέʔγϣϯͰ΋ॏཁ • ઌʹ #SFBLJOH$IBOHFTʹ໨Λ௨ͨ͠ޙɺͲ͜·Ͱཱ྆Ͱ͖Δ͔Λௐ΂Α͏ • ྆ରԠ͕೉͍͠΋ͷ΋͋ΔͨΊɺͦ͜Ͱ͸ແཧ͠ͳ͍ • ੾Γ෼͚ΔߜΔ͜ͱ΋࣌ʹ͸ඞཁ