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

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
わたしのOSS活動
Avatar for kazupon kazupon
3
530
Vapor Revolution
Avatar for kazupon kazupon
3
3.8k
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
8k
Reactivity Transform
Avatar for kazupon kazupon
1
1.4k
わたしのOSS活動
Avatar for kazupon kazupon
1
1k
Vue with Vite
Avatar for kazupon kazupon
2
2.6k

Other Decks in Programming

See All in Programming
Ktorで簡単AIアプリケーション
Avatar for Keita Tsukamoto tsukakei
0
120
AI 駆動開発におけるコミュニティと AWS CDK の価値
Avatar for Kenji Kono konokenj
5
310
iOSでSVG画像を扱う
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
Swift Concurrency 年表クイズ
Avatar for omochimetaru omochi
3
220
Migration to Signals, Resource API, and NgRx Signal Store
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
850
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
Avatar for kasacchiful kasacchiful
0
350
EMこそClaude Codeでコード調査しよう
Avatar for shibayu36 shibayu36
0
530
React Nativeならぬ"Vue Native"が実現するかも？_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
Avatar for Yuto Nagai(Future) yut0naga1_fa
2
2k
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
650
TransformerからMCPまで（現代AIを理解するための羅針盤）
Avatar for MIKIO KUBO mickey_kubo
7
5.9k
フロントエンド開発のためのブラウザ組み込みAI入門
Avatar for Masashi Hirano masashi
7
3.7k

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
72
4.9k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k

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