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

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

kazupon
December 06, 2019
Programming
19
6.8k

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

kazupon

December 06, 2019
Tweet

More Decks by kazupon

See All by kazupon
Vapor Revolution
kazupon
2
3k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.2k
Vue.jsエコシステム動向2023
kazupon
17
7.6k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
570

Other Decks in Programming

See All in Programming
functionalなアプローチで動的要素を排除する
ryopeko
1
810
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
120
Immutable ActiveRecord
megane42
0
120
rails newと同時に型を書く
aki19035vc
6
740
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
3
190
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
990
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
1
170
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.1k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
440
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
SpringBoot3.4の構造化ログ #kanjava
irof
2
610
Rubyでつくるパケットキャプチャツール
ydah
0
420

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Why Our Code Smells
bkeepers
PRO
335
57k
Writing Fast Ruby
sferik
628
61k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Fireside Chat
paigeccino
34
3.2k
How GitHub (no longer) Works
holman
312
140k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Invisible Side of Design
smashingmag
299
50k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k

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