$30 off During Our Annual Pro Sale. View Details »

Vue.js 3 に向けた Vue.js 入門

kazupon
December 06, 2019

Vue.js 3 に向けた Vue.js 入門

kazupon

December 06, 2019
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue.js 3 ʹ޲͚ͨ
    Vue.js ೖ໳
    Microsoft Ignite The Tour
    2019.12.06
    @kazupon

    View Slide

  2. ࣗݾ঺հ

    View Slide

  3. PLAID, inc.

    Vue.js Core Team Member
    Vue.js Japan User Group Organizer
    Vue I18n Author
    WebAssembly Love ❤
    @kazu_pon kazupon
    kazupon

    View Slide

  4. View Slide

  5. ͸͡Ίʹ

    View Slide

  6. 2019೥10݄

    View Slide

  7. Vue.js 3 pre-alpha ެ։ʂ
    https://twitter.com/vuejs/status/1180159603507638274

    View Slide

  8. vuejs/vue-next Ͱެ։
    https://github.com/vuejs/vue-next

    View Slide

  9. 2020೥Q1ʹ޲͚ͯ։ൃத
    • RFCͰ࢓༷ΛݻΊͭͭ։ൃ
    https://github.com/vuejs/rfcs

    View Slide

  10. Vue.js 3 Ͱͷ৽ػೳ
    • ίϯϙδγϣϯ API
    • ϑϥάϝϯτ / ϙʔλϧ
    • TypeScript ϑϧαϙʔτ
    • … ͳͲͳͲ
    https://github.com/vuejs/rfcs

    View Slide

  11. v2 → v3

    View Slide

  12. ͍Ζ͍Ζͱ
    ػೳ͕૿͑ͯ

    View Slide

  13. ഁյతมߋ
    ΋͋Δͱ

    View Slide

  14. View Slide

  15. ͜ͷ࣌ظʹೖ໳
    ͢Δͱେมͦ͏…

    View Slide

  16. View Slide

  17. ͦ͏
    ݟ͑ͦ͏Ͱ͕͢

    View Slide

  18. ৺഑͠ͳͯ͘΋
    େৎ෉Ͱ͢ʂ

    View Slide

  19. ओཁػೳ͸

    View Slide

  20. ΄΅ͦͷ··Ͱ

    View Slide

  21. ಈ͖·͢ʂ

    View Slide

  22. ͱ͍͏Θ͚Ͱ

    View Slide

  23. ࠓ೔࿩͢͜ͱ

    View Slide

  24. • Vue.js ͷಛ௃ͱઃܭࢥ૝
    • Vue.js 3 Ͱ΋௨༻͢Δߏจɾػೳͷ঺հ
    • ࠷৽҆ఆόʔδϣϯ v2.6.10 Ͱઆ໌
    • Vue.js 3 ͷ໨ۄػೳ ίϯϙδγϣϯAPIʹ
    ͍ͭͯ΋ܰ͘঺հ
    ࠓ೔࿩͢͜ͱ

    View Slide

  25. Vue.js
    ʹ͍ͭͯ

    View Slide

  26. Vue.js
    • ࡞ऀ: Evan You
    • view૚ͷϥΠϒϥϦ
    • 2013೥ݸਓϓϩ
    δΣΫτͱͯ͠։࢝
    • 2014೥2݄ʹv0.8ެ
    ࣜϦϦʔε

    View Slide

  27. 2015.04.20
    Laravel Ͱ࠾༻ܾఆ
    2015.10.26
    v1.0
    Evangelion
    2016.10.01
    v2.0
    Ghost in the Shell
    2019.02.05
    v2.6
    Macross
    2019.12.06 ݱࡏ
    ࠷৽: v2.6.10
    ྺ࢙

    View Slide

  28. • ߴ౓ͳٕज़εΩϧ͕ແͯ͘΋࢖͑Δ
    • ίϯϙʔωϯτࢦ޲ʹΑΔUIߏ଄Խ
    • ϦΞΫςΟϒͳσʔλόΠϯσΟϯά
    ಛ௃

    View Slide

  29. • HTML / JavaScript / CSS ͷجຊ஌͕ࣝ͋
    Ε͹͙͢ʹ࢖͑Δ
    • index.html ͷ script λά͔Β࢖͏͜ͱ͕Ͱ
    ͖Δ
    ߴ౓ͳٕज़εΩϧ͕ͳͯ͘΋࢖͑Δ

    View Slide

  30. • ίϯϙʔωϯτͱ͍͏෦඼Λ૊Έཱͯͯɺ
    UI Λ૊ΈͨͯΔ
    ίϯϙʔωϯτࢦ޲ʹΑΔUIߏ଄Խ

    View Slide

  31. • DOM ্ͷσʔλͱJavaScript͕࣋ͭσʔλ
    ؒͰόΠϯυͯ͠ಉظΛऔΔ͜ͱ͕Ͱ͖Δ
    ϦΞΫςΟϒͳσʔλόΠϯσΟϯά

    View Slide

  32. ϑϨʔϜϫʔΫ
    ͱͯ͠ͷ
    ઃܭࢥ૝

    View Slide

  33. ϓϩάϨογϒ
    ϑϨʔϜϫʔΫ

    View Slide

  34. VS
    ϑϨʔϜϫʔΫͷෳࡶ͞
    ΞϓϦέʔγϣϯͷෳࡶ͞

    View Slide

  35. ෆे෼ͳέʔε

    View Slide

  36. View Slide

  37. ෆे෼ͳέʔε
    ͷ
    ൺᄻ

    View Slide

  38. View Slide

  39. Φʔόʔͳέʔε

    View Slide

  40. View Slide

  41. Φʔόʔͳέʔε
    ͷ
    ൺᄻ

    View Slide

  42. View Slide

  43. ϑϨʔϜϫʔΫͷෳࡶੑ͸
    ΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠
    े෼ͳίετΛPayͰ͖Δ΋ͷͰͳ͚Ε͹ͳΒͳ͍

    View Slide

  44. ͔͠͠ͳ͕Β
    ࣮ࡍͷݱ৔͸…

    View Slide

  45. Ϗδωεཁ݅͸
    ઈ͑ͣม׵͢Δ

    View Slide

  46. ϑϨʔϜϫʔΫ΋
    ͜ΕʹରԠͰ͖ͳ͚Ε͹
    ͳΒͳ͍

    View Slide

  47. ͜Μͳײ͡Ͱελʔτͯ͠
    view૚ίΞ

    View Slide

  48. ن໛͕େ͖͘ͳ͖ͬͯͨͱ͖
    view૚ίΞ
    ʴ
    ϧʔςΟϯάɺঢ়ଶ؅ཧ
    ͕ඞཁʂ

    View Slide

  49. αϙʔτͰ͖Δ
    ϥΠϒϥϦͳ͚Ε͹…

    View Slide

  50. ϑϩϯτΤϯυ։ൃ
    ਏ͍…

    View Slide

  51. ϓϩάϨογϒ
    ϑϨʔϜϫʔΫ

    View Slide

  52. http://ejje.weblio.jp/content/progressive

    View Slide

  53. ΞϓϦέʔγϣϯͷ
    ஈ֊తͳมԽཁٻʹԠͯ͡
    ໰୊ղܾͰ͖Δํ๏Λఏڙ͢Δ

    View Slide

  54. Vue.jsຊମ Vue Router Vuex Vue CLI

    View Slide

  55. Vue.jsͰ
    WebΞϓϦΛ
    ࡞ͬͯΈΔ

    View Slide

  56. • Vue ΠϯελϯεΛ࡞੒
    • UIදࣔʹඞཁͳσʔλ(ঢ়ଶ)Λఆٛ
    • ςϯϓϨʔτͰ UI Λએݴ
    • Vue ΠϯελϯεΛDOM ʹϚ΢ϯτ
    WebΞϓϦΛ࡞ΔྲྀΕ

    View Slide

  57. ϝοηʔδΛ
    දࣔͤ͞ΔΞϓϦ

    View Slide

  58. • Vue ίϯετϥΫλ Ͱ new ͢Δ
    VueΠϯελϯεΛ࡞੒

    View Slide

  59. • data ΦϓγϣϯʹσʔλΛఆٛ
    UIදࣔʹඞཁͳσʔλΛఆٛ

    View Slide

  60. • template Φϓγϣϯʹ HTML Λهड़
    ςϯϓϨʔτʹUIΛએݴ

    View Slide

  61. • $mount ϝιουͰର৅ DOM ʹϚ΢ϯτ
    VueΠϯελϯεΛDOMʹϚ΢ϯτ

    View Slide

  62. ࣮ߦ͢Δͱ…

    View Slide

  63. ͍͔͕Ͱͨ͠Ͱ
    ͠ΐ͏͔ʁ

    View Slide

  64. ςϯϓϨʔτ
    ߏจ

    View Slide

  65. • ΠϯλʔϙϨʔγϣϯ (Interpolation)
    • σΟϨΫςΟϒ (Directive)
    ςϯϓϨʔτߏจ

    View Slide

  66. ΠϯλʔϙϨʔγϣϯ
    ʹ͍ͭͯ

    View Slide

  67. • ϓϩάϥϜʹ͓͍ͯ͸ɺ͋Δม਺ͱҰॹʹ
    ߏ੒͞Εͨσʔλʹ͓͍ͯɺίϯύΠϧ
    ࣌ɺ·ͨ͸࣮ߦ࣌ʹม਺͕ల։͞ΕΔ͜ͱ
    • ྫ: JavaScript ςϯϓϨʔτϦςϥϧ
    ΠϯλʔϙϨʔγϣϯͱ͸ʁ

    View Slide

  68. • JavaScript Ҏ֎ʹ΋ςϯϓϨʔτ΋ଘࡏ͢Δ
    • ςϯϓϨʔτͰ͸ҎԼΛαϙʔτ
    • ςΩετ
    • HTMLͷଐੑ
    • JavaScript ͷࣜ
    Vue.jsʹ͓͚ΔΠϯλʔϙϨʔγϣϯͱ͸ʁ

    View Slide

  69. σΟϨΫςΟϒ
    ʹ͍ͭͯ

    View Slide

  70. • ϓϩάϥϛϯάݴޠɺιϑτ΢ΣΞͷจ຺
    ʹ͓͍ͯ͸ɺ໋ྩ΍ίϚϯυΛ࣮ߦ͢Δͨ
    Ίʹࢦࣔߏจ
    • ྫ: nginx (Webαʔό)ͷઃఆϑΝΠϧ
    σΟϨΫςΟϒͱ͸ʁ

    View Slide

  71. • ςϯϓϨʔτʹ͓͍ͯɺWebඪ४࢓༷ʹ͸ͳ͍ಛผͳ໋ྩΛ༩
    ͑ΔͨΊͷߏจ
    • v-if / v-show: ཁૉͷදࣔɾඇදࣔͷͨΊͷ৚݅൑ఆ
    • v-for: ཁૉʹର͢Δ܁Γฦ͠ॲཧ
    • v-bind: ཁૉʹର͢ΔσʔλͷόΠϯυ(ଋറ)
    • v-on: ཁૉͷΠϕϯτϋϯυϦϯά
    • v-model: ೖྗड෇Մೳͳཁૉͱσʔλؒ૒ํ޲ʹόΠϯυ
    Vue.jsʹ͓͚ΔσΟϨΫςΟϒͱ͸ʁ

    View Slide

  72. • v-if
    • v-show
    v-if / v-show

    View Slide

  73. v-for

    View Slide

  74. v-bind

    View Slide

  75. v-on

    View Slide

  76. v-model

    View Slide

  77. • v-slot
    • v-text
    • v-once
    • v-pre
    • v-cloak
    ͦͷଞͷσΟϨΫςΟϒ

    View Slide

  78. ࢉग़ϓϩύςΟ

    View Slide

  79. • Ұൠతʹ͸ɺఆٛ͞Εͨσʔλ(ঢ়ଶ)ͷ஋
    ΛݩʹɺͦΕΒσʔλͷࢉग़͞Εͨσʔλ
    ͷ͜ͱ

    ྫ: JavaScript ͷ getter
    ࢉग़ϓϩύςΟͱ͸ʁ

    View Slide

  80. • ͨͩ୯ʹܭࢉ
    ͯ͠ฦ͢σʔ
    λ͚ͩͰ͸ͳ
    ͘ɺσʔλͷ
    ஋ͷมߋΛಈ
    తʹݕ஌ͯ͠
    දࣔʹ൓өͰ
    ͖ΔΑ͏ʹ͠
    ͍ͯΔ
    Vue.jsʹ͓͚Δࢉग़ϓϩύςΟͱ͸ʁ

    View Slide

  81. • ςϯϓϨʔτʹΠϯλʔϙϨʔγϣϯ͕ෳ
    ࡶʹͳ͖ͬͯͨͱ͖
    ࢉग़ϓϩύςΟͷϢʔεέʔε
    ࢉग़ϓϩύςΟ͸
    ಺෦ͰΩϟογϡ΋͢ΔͷͰ
    ύϑΥʔϚϯε΋޲্͢Δʂ

    View Slide

  82. ΢Υονϟ

    View Slide

  83. • Vue.jsͰఆٛ͞ΕͨσʔλΛ؂ࢹͯ͠ɺม
    ߋ௨஌Λఏڙ͢Δ
    ΢Υονϟͱ͸ʁ

    View Slide

  84. • ࢉग़ϓϩύ
    ςΟ͸ɺ
    ΢Υονϟ
    ͰػೳΛఏ
    ڙ͍ͯ͠Δ
    ΢Υονϟͱ͸ʁ

    View Slide

  85. ΢ΥονϟΛ࢖ͬͨίʔυྫ

    View Slide

  86. • ࢉग़ϓϩύςΟͷܭࢉෛՙ͕ߴ͍
    • ྫ: ڊେͳσʔλ͔Βࢉग़͢Δ஋͕ຖճҟͳͬ
    ͯ͠·͏
    • ࢉग़ϓϩύςΟͰ͸Ͱ͖ͳ͍͜ͱΛ΍Γ͍ͨͱ͖
    • ྫ: αʔό͔Βඇಉظʹऔಘͨ͠σʔλΛݩʹ
    ࢉग़ͯ͠࢖͍͍ͨͱ͖
    ΢ΥονϟͷϢʔεέʔε

    View Slide

  87. ίϯϙʔωϯτ

    View Slide

  88. • Ұൠతͳιϑτ΢ΣΞͷ
    จ຺ʹ͓͍ͯ͸ɺϓϩά
    ϥϜΛ࠶ར༻ʹ͢ΔͨΊ
    Ϟδϡʔϧͱͯ͠෦඼Խ
    ͞Εͨ΋ͷ
    • ϒϩοΫͷΑ͏ʹίϯ
    ϙʔωϯτΛ૊Έཱͯͯ
    ߏ੒͍ͯ͘͠
    ίϯϙʔωϯτͱ͸ʁ

    View Slide

  89. • UI Λػೳ΍৘ใߏ
    ଄ʹैͬͯϞδϡʔ
    ϧԽͨ͠΋ͷ
    • ίϯϙʔωϯτΛ
    ૊Έ߹ΘΔ͜ͱͰ
    ࣗવͱπϦʔ্ʹ
    ߏ੒͞ΕΔ
    Vue.jsʹ͓͚Δίϯϙʔωϯτͱ͸ʁ

    View Slide

  90. Vue.jsಠࣗͷίϯϙʔωϯτ֓೦
    • ୯ҰϑΝΠϧί
    ϯϙʔωϯτ 

    (Single-file
    components)
    • Vue ίϯϙʔω
    ϯτͱ΋ݺͿ͜
    ͱ΋

    {CSS}
    ({JS})

    View Slide

  91. • ଞͷίϯϙʔωϯτͱ΍ΓऔΓ͢ΔͨΊʹ
    ΠϯλʔϑΣʔεΛఏڙ͢Δ
    • ϓϩύςΟ (props)
    • Πϕϯτ (emits)
    • εϩοτ (slots)
    ίϯϙʔωϯτ͸I/FΛఏڙ͢Δ

    View Slide

  92. ϓϩύςΟ(Props)
    • ଞͷίϯϙʔωϯτ͔ΒσʔλΛड͚औΔ
    ͨΊͷΠϯλʔϑΣʔε
    Child ίϯϙʔωϯτ
    Parent ίϯϙʔωϯτ
    Props
    ܦ༝Ͱ౉͢

    View Slide

  93. Πϕϯτ (emits)
    • ίϯϙʔωϯτΛ࢖͏ଆ(਌)ʹσʔλΛ౉
    ͨ͢ΊͷΠϯλʔϑΣʔε
    Child ίϯϙʔωϯτ
    Parent ίϯϙʔωϯτ
    $emitͰ
    Πϕϯτ
    Λൃߦ

    View Slide

  94. εϩοτ (slots)
    • ίϯϙʔωϯτʹ࢖͏ଆ(਌)͔Βίϯςϯ
    πΛࠩ͠ࠐ·ͤΔͨΊͷΠϯλʔϑΣʔε
    Child ίϯϙʔωϯτ
    Parent ίϯϙʔωϯτ
    ʹ
    ࠩ͠ࠐ·ΕΔ

    View Slide

  95. ίϯϙʔωϯτؒσʔλͷ΍ΓऔΓͷϧʔϧ
    • σʔλ͕ྲྀΕΔํ޲Λن໿Λઃ͚Δ͜ͱͰ
    ෳࡶʹͳΔͷΛආ͚Δ

    View Slide

  96. ଞʹ΋৭ʑ
    ͋Γ·͕͢

    View Slide

  97. ͜ͷล͸͓͑ͯ͞
    ͓͍͍ͯͩ͘͞ʂ

    View Slide

  98. Vue.js 3
    ίϯϙδγϣϯ
    API

    View Slide

  99. ίϯϙδγϣϯAPIͱ͸ʁ
    • ؔ਺ϕʔεͰఏڙ͞ΕΔ API
    • ίϯϙʔωϯτΛϩδοΫΛࣗ༝౓ߴ͘
    ૊Έ߹Θ࣮ͤ૷͢Δ͜ͱ͕Ͱ͖Δ

    View Slide

  100. ੜ·Εͨഎܠ
    • Vue.js Ͱେن໛։ൃ͸Ͱ͖Δ͕໰୊͕͋ͬͨ
    • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡ
    Έʹ͘͘ͳΔ
    • ίʔυ࠶ར༻ͷύλʔϯԽ͠ʹ͍͘
    • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͘
    ͍

    View Slide

  101. ίϯϙδγϣϯAPIΛ࢖͏ͱ…
    • ίϯϙʔωϯτ
    ͷϩδοΫ͕៉
    ྷʹͳΓɺ໰୊
    Λղܾ͢Δʂ

    View Slide

  102. ྫ: Χ΢ϯτΞοϓ

    View Slide

  103. ৄࡉ͕ؾʹͳΔํ͸RFCΛ͝ཡ͍ͩ͘͞ʂ
    • υΩϡϝϯτ

    https://vue-composition-api-rfc.netlify.com/

    View Slide

  104. Vue.js v2 Ͱ͓ࢼ͠Ͱ࢖͑Δ
    • vuejs/composition-api

    https://github.com/vuejs/composition-api

    View Slide

  105. ऴΘΓʹ

    View Slide

  106. • ͖ͨΔ Vue.js 3 ʹ޲͚ͯ
    • Vue.js ͷಛ௃ͱઃܭࢥ૝
    • Vue.js 3 Ͱ΋௨༻͢Δߏจɾػೳ
    • Vue.js 3 ͷ໨ۄػೳ ίϯϙδγϣϯAPI
    ࠓ೔࿩ͨ͜͠ͱ

    View Slide

  107. • ΦϯϥΠϯ:

    Vue.js ެࣜυΩϡϝϯτ

    https://jp.vuejs.org
    • ॻ੶:

    Vue.js ೖ໳ (ٕज़ධ࿦ࣾ)
    ͞Βʹ Vue.js ೖ໳͍ͯ͘͠ʹ͸ʁ

    View Slide

  108. ࠷ޙʹ

    View Slide

  109. ίϛϡχςΟʹࢀՃ͠Α͏ʂ
    • Vue.js೔ຊϢʔβʔάϧʔϓӡӦ
    • Slack

    https://vuejs-jp-slackin.herokuapp.com
    • Vuejs೔ຊޠެࣜαΠτܦ༝Ͱ΋δϣΠϯͰ͖·͢

    http://jp.vuejs.org
    • Vue.js Meetup (connpass)

    https://vuejs-meetup.connpass.com

    View Slide

  110. དྷ೥ 2/1 ʹ Vue.js 3 ʹ͍ͭͯ࿩͠·͢
    • 2020-02-01 PWA Night CONFERENCE 2020

    https://conf2020.pwanight.jp/

    View Slide

  111. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide