Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

Avatar for kazupon kazupon
December 06, 2019
Programming
19
6.9k

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

Avatar for kazupon

kazupon

December 06, 2019
Tweet

More Decks by kazupon

See All by kazupon
Nitro v3
Avatar for kazupon kazupon
2
340
わたしのOSS活動
Avatar for kazupon kazupon
3
550
Vapor Revolution
Avatar for kazupon kazupon
3
3.9k
Vue.js最新動向
Avatar for kazupon kazupon
3
1.6k
Vue 3.4
Avatar for kazupon kazupon
13
4.7k
Vue & Vite Rustify
Avatar for kazupon kazupon
4
2.4k
Vue.jsエコシステム動向2023
Avatar for kazupon kazupon
17
8.1k
Reactivity Transform
Avatar for kazupon kazupon
1
1.4k
わたしのOSS活動
Avatar for kazupon kazupon
1
1.1k

Other Decks in Programming

See All in Programming
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
Avatar for TVer Inc. techtver
PRO
3
1.4k
関数実行の裏側では何が起きているのか？
Avatar for minop1205 minop1205
1
560
251126 TestState APIってなんだっけ?Step Functionsテストどう変わる?
Avatar for Takumi Abe east_takumi
0
300
Microservices rules: What good looks like
Avatar for Chris Richardson cer
PRO
0
540
無秩序からの脱却 / Emergence from chaos
Avatar for nrs nrslib
2
12k
AIコーディングエージェント（NotebookLM）
Avatar for kondai kondai24
0
120
Querying Design System デザインシステムの意思決定を支える構造検索
Avatar for ikuma-t ikumatadokoro
1
1.2k
sbt 2
Avatar for kenji yoshida xuwei_k
0
190
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
150
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
440
Building AI Agents with TypeScript #TSKaigiHokuriku
Avatar for izumin5210 izumin5210
6
1.2k

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
69k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ