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

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

38bee248082f6071230de65e9d74a944?s=47 kazupon
December 06, 2019
Programming
19
5.8k

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

December 06, 2019
Tweet

More Decks by kazupon

See All by kazupon
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
1.5k
38bee248082f6071230de65e9d74a944?s=48 kazupon
3
150
38bee248082f6071230de65e9d74a944?s=48 kazupon
14
4.5k
38bee248082f6071230de65e9d74a944?s=48 kazupon
4
670
38bee248082f6071230de65e9d74a944?s=48 kazupon
38
17k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
920
38bee248082f6071230de65e9d74a944?s=48 kazupon
4
1.6k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
580
38bee248082f6071230de65e9d74a944?s=48 kazupon
15
5.3k

Other Decks in Programming

See All in Programming
2722ca734f5f05badb74f976d1f2b6c8?s=48 yonetty
0
130
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
6
530
922f51d458d6ffee8578b9d3ab0a52b6?s=48 ug
0
490
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
2
180
3c7020b33ae8880dd9514b6469a28ae0?s=48 yt8492
0
160
102398563fd1bf878b35dc2d5ee67cbe?s=48 kamilahsantos
1
380
Bfc42a2fb137897db919bac632c83085?s=48 teruhisafukumoto
1
310
924d7de2a5a7102a597728e5edbbff78?s=48 kekyo
PRO
0
270
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
1
3.1k
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
0
110
040569d9fbf8818b4ea44da61ce9ffc9?s=48 tachibanayu24
3
130
F8fc4ec35531ef9a285c1a84591cc16c?s=48 tosaka07
2
420

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.8k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
13
940
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
118
4.9k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
220
15k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
30
3.5k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
73
270k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
340
16k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
29
1k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
166
19k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
274
17k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k

Transcript

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

    @kazupon

  2. ࣗݾ঺հ

  3. PLAID, inc.
 Vue.js Core Team Member Vue.js Japan User Group

    Organizer Vue I18n Author WebAssembly Love ❤ @kazu_pon kazupon kazupon
  4. None

  5. ͸͡Ίʹ

  6. 2019೥10݄

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

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

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

  10. Vue.js 3 Ͱͷ৽ػೳ • ίϯϙδγϣϯ API • ϑϥάϝϯτ / ϙʔλϧ

    • TypeScript ϑϧαϙʔτ • … ͳͲͳͲ https://github.com/vuejs/rfcs

  11. v2 → v3

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

  13. ഁյతมߋ ΋͋Δͱ

  14. None

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

  16. None

  17. ͦ͏ ݟ͑ͦ͏Ͱ͕͢

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

  19. ओཁػೳ͸

  20. ΄΅ͦͷ··Ͱ

  21. ಈ͖·͢ʂ

  22. ͱ͍͏Θ͚Ͱ

  23. ࠓ೔࿩͢͜ͱ

  24. • Vue.js ͷಛ௃ͱઃܭࢥ૝ • Vue.js 3 Ͱ΋௨༻͢Δߏจɾػೳͷ঺հ • ࠷৽҆ఆόʔδϣϯ v2.6.10

    Ͱઆ໌ • Vue.js 3 ͷ໨ۄػೳ ίϯϙδγϣϯAPIʹ ͍ͭͯ΋ܰ͘঺հ ࠓ೔࿩͢͜ͱ

  25. Vue.js ʹ͍ͭͯ

  26. Vue.js • ࡞ऀ: Evan You • view૚ͷϥΠϒϥϦ • 2013೥ݸਓϓϩ δΣΫτͱͯ͠։࢝

    • 2014೥2݄ʹv0.8ެ ࣜϦϦʔε

  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 ྺ࢙

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

  29. • HTML / JavaScript / CSS ͷجຊ஌͕ࣝ͋ Ε͹͙͢ʹ࢖͑Δ • index.html

    ͷ script λά͔Β࢖͏͜ͱ͕Ͱ ͖Δ ߴ౓ͳٕज़εΩϧ͕ͳͯ͘΋࢖͑Δ

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

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

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

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

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

  35. ෆे෼ͳέʔε

  36. None

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

  38. None

  39. Φʔόʔͳέʔε

  40. None

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

  42. None

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

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

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

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

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

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

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

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

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

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

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

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

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

  56. • Vue ΠϯελϯεΛ࡞੒ • UIදࣔʹඞཁͳσʔλ(ঢ়ଶ)Λఆٛ • ςϯϓϨʔτͰ UI Λએݴ •

    Vue ΠϯελϯεΛDOM ʹϚ΢ϯτ WebΞϓϦΛ࡞ΔྲྀΕ

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

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

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

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

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

  62. ࣮ߦ͢Δͱ…

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

  64. ςϯϓϨʔτ ߏจ

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

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

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

  68. • JavaScript Ҏ֎ʹ΋ςϯϓϨʔτ΋ଘࡏ͢Δ • ςϯϓϨʔτͰ͸ҎԼΛαϙʔτ • ςΩετ • HTMLͷଐੑ •

    JavaScript ͷࣜ Vue.jsʹ͓͚ΔΠϯλʔϙϨʔγϣϯͱ͸ʁ

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

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

  71. • ςϯϓϨʔτʹ͓͍ͯɺWebඪ४࢓༷ʹ͸ͳ͍ಛผͳ໋ྩΛ༩ ͑ΔͨΊͷߏจ • v-if / v-show: ཁૉͷදࣔɾඇදࣔͷͨΊͷ৚݅൑ఆ • v-for:

    ཁૉʹର͢Δ܁Γฦ͠ॲཧ • v-bind: ཁૉʹର͢ΔσʔλͷόΠϯυ(ଋറ) • v-on: ཁૉͷΠϕϯτϋϯυϦϯά • v-model: ೖྗड෇Մೳͳཁૉͱσʔλؒ૒ํ޲ʹόΠϯυ Vue.jsʹ͓͚ΔσΟϨΫςΟϒͱ͸ʁ

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

  73. v-for

  74. v-bind

  75. v-on

  76. v-model

  77. • v-slot • v-text • v-once • v-pre • v-cloak

    ͦͷଞͷσΟϨΫςΟϒ

  78. ࢉग़ϓϩύςΟ

  79. • Ұൠతʹ͸ɺఆٛ͞Εͨσʔλ(ঢ়ଶ)ͷ஋ ΛݩʹɺͦΕΒσʔλͷࢉग़͞Εͨσʔλ ͷ͜ͱ
 ྫ: JavaScript ͷ getter ࢉग़ϓϩύςΟͱ͸ʁ

  80. • ͨͩ୯ʹܭࢉ ͯ͠ฦ͢σʔ λ͚ͩͰ͸ͳ ͘ɺσʔλͷ ஋ͷมߋΛಈ తʹݕ஌ͯ͠ දࣔʹ൓өͰ ͖ΔΑ͏ʹ͠ ͍ͯΔ

    Vue.jsʹ͓͚Δࢉग़ϓϩύςΟͱ͸ʁ

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

  82. ΢Υονϟ

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

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

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

  86. • ࢉग़ϓϩύςΟͷܭࢉෛՙ͕ߴ͍ • ྫ: ڊେͳσʔλ͔Βࢉग़͢Δ஋͕ຖճҟͳͬ ͯ͠·͏ • ࢉग़ϓϩύςΟͰ͸Ͱ͖ͳ͍͜ͱΛ΍Γ͍ͨͱ͖ • ྫ:

    αʔό͔Βඇಉظʹऔಘͨ͠σʔλΛݩʹ ࢉग़ͯ͠࢖͍͍ͨͱ͖ ΢ΥονϟͷϢʔεέʔε

  87. ίϯϙʔωϯτ

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

    ίϯϙʔωϯτͱ͸ʁ

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

    Vue.jsʹ͓͚Δίϯϙʔωϯτͱ͸ʁ

  90. Vue.jsಠࣗͷίϯϙʔωϯτ֓೦ • ୯ҰϑΝΠϧί ϯϙʔωϯτ 
 (Single-file components) • Vue ίϯϙʔω

    ϯτͱ΋ݺͿ͜ ͱ΋ <HTML> {CSS} ({JS})

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

    εϩοτ (slots) ίϯϙʔωϯτ͸I/FΛఏڙ͢Δ

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

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

    Πϕϯτ Λൃߦ

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

    ࠩ͠ࠐ·ΕΔ

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

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

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

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

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

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

    TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͘ ͍

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

  102. ྫ: Χ΢ϯτΞοϓ

  103. ৄࡉ͕ؾʹͳΔํ͸RFCΛ͝ཡ͍ͩ͘͞ʂ • υΩϡϝϯτ
 https://vue-composition-api-rfc.netlify.com/

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

  105. ऴΘΓʹ

  106. • ͖ͨΔ Vue.js 3 ʹ޲͚ͯ • Vue.js ͷಛ௃ͱઃܭࢥ૝ • Vue.js

    3 Ͱ΋௨༻͢Δߏจɾػೳ • Vue.js 3 ͷ໨ۄػೳ ίϯϙδγϣϯAPI ࠓ೔࿩ͨ͜͠ͱ

  107. • ΦϯϥΠϯ:
 Vue.js ެࣜυΩϡϝϯτ
 https://jp.vuejs.org • ॻ੶:
 Vue.js ೖ໳ (ٕज़ධ࿦ࣾ)

    ͞Βʹ Vue.js ೖ໳͍ͯ͘͠ʹ͸ʁ

  108. ࠷ޙʹ

  109. ίϛϡχςΟʹࢀՃ͠Α͏ʂ • Vue.js೔ຊϢʔβʔάϧʔϓӡӦ • Slack
 https://vuejs-jp-slackin.herokuapp.com • Vuejs೔ຊޠެࣜαΠτܦ༝Ͱ΋δϣΠϯͰ͖·͢
 http://jp.vuejs.org •

    Vue.js Meetup (connpass)
 https://vuejs-meetup.connpass.com

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

    CONFERENCE 2020
 https://conf2020.pwanight.jp/

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