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.8k

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
480
Vapor Revolution
Avatar for kazupon kazupon
3
3.5k
Vue.js最新動向
Avatar for kazupon kazupon
3
1.5k
Vue 3.4
Avatar for kazupon kazupon
13
4.7k
Vue & Vite Rustify
Avatar for kazupon kazupon
4
2.3k
Vue.jsエコシステム動向2023
Avatar for kazupon kazupon
17
7.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
20250628_非エンジニアがバイブコーディングしてみた
Avatar for ponponmikan ponponmikankan
0
560
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
10
2.2k
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
670
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
330
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
120
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
650
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
150
RailsGirls IZUMO スポンサーLT
Avatar for 16bit_idol 16bitidol
0
120
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
150
GraphRAGの仕組みまるわかり
Avatar for とすり tosuri13
8
510
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
1
300
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
2
330

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k

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