Vue.js プロジェクトの爆発させかた #ichigayageek / How to explosion Vue.js project

by potato4d(Takuma HANATANI)

Slide 1

Slide 1 text

Vue.jsϓϩδΣΫτͷ രൃ͔ͤͨ͞ 2018.06.26 Ϛδკ #ichigayageek HANATANI Takuma(@potato4d) https://unsplash.com/photos/hLUTRzcVkqg

Slide 2

Slide 2 text

ࣗݾ঺հ HANATANI Takuma(@potato4d) • ϑϦʔϥϯεͷWebΤϯδχΞ • FrontEnd / Node.js / PHP/ AWS / etc… • Vue.js೔ຊޠެࣜυΩϡϝϯτϝϯςφ • Vue.js Japan User Group ελοϑ • nuxt/docs ӳ/࿨υΩϡϝϯτߩݙ • Nuxt tech book Author

Slide 3

Slide 3 text

JS History • Vue.js 2015 ~ • Rails & Vue, SPA, SPA + SSR, Nuxt.js, with TypeScript • React 2016 ~ • SPA, PHP & React, Rails & React, with TypeScript, with Flow • Angular 2017 ~ • SPA, ΄΅৮ͬͯͳ͍

Slide 4

Slide 4 text

Vue:React:Angular=14:4:1 ͳײ͡

Slide 5

Slide 5 text

https://potato4d.booth.pm/items/824745

Slide 6

Slide 6 text

ࠓ೔࿩͢͜ͱ

Slide 7

Slide 7 text

Vue.jsϓϩδΣΫτͷ രഁํ๏

Slide 8

Slide 8 text

Why?

Slide 9

Slide 9 text

Vue.jsΛ๙ΊΔ৘ใ͸ ͍͘ΒͰ΋͋ΔͷͰ……

Slide 10

Slide 10 text

https://ichigayageek.connpass.com/event/87792/

Slide 11

Slide 11 text

໌೔໾ʹཱͨͳ͍͚Ͳ ͍͔ͭ໾ʹཱͭ࿩

Slide 12

Slide 12 text

վΊͯࠓ೔࿩͢͜ͱ • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔ • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

Slide 13

Slide 13 text

૝ఆλʔήοτ(1) • Ϟμϯ JavaScript ͱઃܭʹ͍ͭͯ࠷௿ݶ஌͍ͬͯΔਓ • ʮReact, Vue, Angular ͬͯ΍͕ͭਓؾͳΜͰ͠ΐʯ • ʮVue.js͸؆୯ʹ͔͚ͯϋʔυϧ͕௿͍ॳ৺ऀ޲͚ͷ΍ͭͰ͠ΐʯ • ʮ FluxύλʔϯͬͯγϯάϧτϯͰҰํ޲ͳ΍ͭͰ͠ΐʯ Έ͍ͨͳࡶͳೝࣝఔ౓Ͱ΋࿩ͷ൒෼͸Θ͔ΔͷͰOK

Slide 14

Slide 14 text

૝ఆλʔήοτ(2) • Vue.js ͰͭΒ͍ࢥ͍Λͦ͠͏ͳਓɾͨ͠ਓ • ঢ়ଶ؅ཧͰ೰ΜͰ͍Δਓ • ϓϩδΣΫτͷن໛ײɾνʔϜײͰͲ͏ͨ͠Βྑ͍͔Θ͔Βͳ͍ਓ ͜Ε͔Βͷ։ൃΛॿ͚ʹͳΕΔ͸ͣ

Slide 15

Slide 15 text

ࠓ೔࿩͢͜ͱ • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔ • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

Slide 16

Slide 16 text

ʮ݁ہVue.jsͬͯখن໛޲͚ͳΜͰ͠ΐʯ

Slide 17

Slide 17 text

A. ͦ͏Ͱ΋ͳ͍

Slide 18

Slide 18 text

A. ͦ͏Ͱ΋ͳ͍͕ ʮͪΌΜͱ։ൃʯ͢Δͷʹίπ͕ඞཁ

Slide 19

Slide 19 text

Vue.js ͸ PHP ͱΑ͘ࣅ͍ͯΔ

Slide 20

Slide 20 text

͋͑ͯ໌ݴ͢Δ ಛ௃

Slide 21

Slide 21 text

Vue.js is • ʮࡶʹ૊΋͏ͱ͢Δͱͱ͜ͱΜࡶʹ૊Ή͜ͱ͕շదʹͰ͖Δʯ • ʮࡶʹ૊Ήͱ؆୯ʹϓϩδΣΫτΛരൃͤ͞Δʯ͜ͱ͕Ͱ͖Δ • ʮരൃ͠ͳ͍ϓϩδΣΫτΛ࡞Ζ͏ͱ͢Δͱۃ୺ʹ೉͘͠ͳΔʯ • ʮ༉அ͢Δͱരൃ͢Δ͚Ͳ PHP ΄Ͳരൃͯ͠ࠔͬͨ࿩Λ͕ͨ͠Βͳ͍ʯ

Slide 22

Slide 22 text

Slide 23

Slide 23 text

ࠔͬͨ࿩ with ఆઆ

Slide 24

Slide 24 text

Slide 25

Slide 25 text

աڈͷϓϩδΣΫτͷരൃ͔ΒΈΔ Vue.js ͷఆઆͷධՁ

Slide 26

Slide 26 text

ר͖Ͱ 3 ͭ঺հ

Slide 27

Slide 27 text

1 / 3

Slide 28

Slide 28 text

ʮVuex ͋ͬͯ΋ͳͯ͘΋ྑ͍આʯ

Slide 29

Slide 29 text

A. 80%͙Β͍ͷ֬཰ͰӕʹͳΔ

Slide 30

Slide 30 text

Vuex࢖Θͣരൃͨ͠࿩

Slide 31

Slide 31 text

Vuex Λ࢖Θͳ͍Ͱരൃͨ͠࿩(1) • 2016೥͙Β͍ͷ։ൃͷ࿩ • Vuex Λ Flux తʹ Single source of truth ʹ͢Δ࣌୅ͷ΄͏͕ଟ͔ͬͨࠒͷ࿩ • Single source of truth Λ९क͢Δͷ͸΍Γ͗ͩ͢ͱࢥ͍ Pure JavaScript Object Ͱͷ Store ૚Λ࡞੒ • σʔλͱͯ֬͠ఆͨ͠৘ใͷΈΛ֨ೲɻҰ࣌εςʔτ͸Vueίϯϙʔωϯτʹ࣋ͨͤͨ • require/import ͸ࢀর౉͠ʹʹͳΔͷͰॻ͖׵͑Δͱ͏·͍۩߹ʹ૒ํ޲όΠϯσΟϯ άͱטΈ߹ͬͯ͘ΕΔ

Slide 32

Slide 32 text

Vuex Λ࢖Θͳ͍Ͱരൃͨ͠࿩(2) • ॳظ։ൃ͸ JS Object Β͍͠औΓճ͠ͱޮ཰ͷྑ͕͞͏·͘ޮ͍͍ͯͨ • ૒ํ޲όΠϯσΟϯάͷԸܙ΋͋ͬͯɺ Reactivity Λશ໘ʹ׆༻ͨ͠ίʔ υ͕ॻ͚͍ͯͨ

Slide 33

Slide 33 text

Vuex Λ࢖Θͳ͍Ͱരൃͨ͠࿩(3) • ࢓༷͕มΘͬͨΓɺಛఆͷ API Ϧιʔεͷۃ୺ͳංେԽʹΑͬͯ Pure JS ΦϒδΣΫτ͔ΒಡΈऔΕͳ͍͜ͱ͕ଟ͘ͳͬͯ͘Δ • ࢖ΘΕ͍ͯͳ͍֬ূΛಘΔ͜ͱ͕೉͘͠ɺஈʑͱ։ൃ͕ͭΒ͘…… • େ͖͘ͳΔΞϓϦέʔγϣϯ͸ Vuex ΛೖΕ͓ͯ͘΂͖ͩͬͨ

Slide 34

Slide 34 text

രൃͤ͞ͳ͍ͨΊʹ

Slide 35

Slide 35 text

ʮVuex Λ࢖Θͳ͍ͰരൃʯΛ๷͙(1) • SPA Ͱ΋ Vuex ͳͯ͘΋ JS Object ΍ετΞύλʔϯͰ͍͚Δ͸େମӕ • ͱΓ͋͑ͣ Vuex ͸ඞͣೖΕ͓͍ͯͯɺεςʔτͷར༻Λߟ͑Δ • Vuex ͸ެࣜʹSingle source of truthʹ߆Δඞཁ͸ͳ͍ͱ໌ݴ͍ͯ͠Δͷ ͰɺϩʔΧϧεςʔτͷੋඇͰ Vuex ΛೖΕΔ͔ܾΊͳ͍Ͱ૊Έ߹ΘͤΔ • ࣗ෼͕ؔΘΔϓϩδΣΫτ͸ݱࡏશͯ Vuex + ϩʔΧϧεςʔτͰӡ༻த

Slide 36

Slide 36 text

ʮVuex Λ࢖Θͳ͍ͰരൃʯΛ๷͙(2) • ϩʔΧϧεςʔτΛશ͘࢖Θͳ͍։ൃ͸ർฐ͢ΔɻͦΕΛ΍ΔͳΒ React Ͱ ྑ͍ͷͰ Vue ͸ϩʔΧϧεςʔτΛ͏·͘ѻ͏΋ͷͱͯ͠࢖͏͜ͱ • ϩʔΧϧεςʔτΛ࢖͏͜ͱΛڐ༰͢ΔͱʮͦͷίϯϙʔωϯτͰ͔͠࢖ΘΕ ͳ͍ʯͱ͍͏ঢ়ଶΛͬ͞͞ͱഁغͰ͖ΔͷͰ։ൃϨϕϧࠩҟΛٵऩͰ͖Δ • Vuex ͸υϝΠϯ૚ͱࣄ࣮Λ Store ʹɺϓϨθϯςʔγϣϯ૚ͱঢ়ଶΛϩʔΧ ϧεςʔτʹ࣋ͨͤΔ΂͖ • ͱ͸͍͑ͲͷΈͪVue ͸೴಺ͷ RAM ༰ྔ͕େ͖͍ਓ޲͚ͷϑϨʔϜϫʔΫͳ ͷ͸ؒҧ͍ͳ͍

Slide 37

Slide 37 text

༨ஊ) Vuex Λ࢖ͬͯ΋രൃͤ͞Δํ๏ • Single source of truth Λ׬શʹ९क͢Δͱɺ Redux ΄Ͳ໊લۭؒΛࡉ͔ ͘෼ׂ͠ͳ͍౎߹্େମ state ͕ա࿑ࢮ͢Δ • createPostForm ͬͯதʹϑΥʔϜͷཁૉ͍ͬͺ͍ೖͬͯΔ͚Ͳ౤ߘ࡞ͬ ͯΔՕॴͱ͔5ݸҎ্͋Δ͠Ͳ͜ͷϑΥʔϜͩΑ • ϓϨθϯςʔγϣϯ૚ͷ౎߹͕Կނ͔υϝΠϯ૚ʹॻ͔Ε͍ͯͨΓͯ͠ഁ ໓ͯ͘͠Δ • ϨΠϠʔ͸෼͚·͠ΐ͏

Slide 38

Slide 38 text

2 / 3

Slide 39

Slide 39 text

ʮσβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δʯ આ

Slide 40

Slide 40 text

A. Ϛδদ

Slide 41

Slide 41 text

σβΠφʔͱҰॹʹ࢓ࣄ͢Δͱ രൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ

Slide 42

Slide 42 text

σβΠφʔͱҰॹʹ࢓ࣄ͢Δͱരൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ(1) • ਖ਼௚σβΠφʔ + ϚʔΫΞοϓΤϯδχΞ͕Ͱ͖Δਓ͸ Vue ίϯϙʔωϯτ ͸͔͚Δ • ejs / erb / jade / Smarty / mustache ͱςϯϓϨʔτΤϯδϯΛ౉͖ͬͯͨϚʔ ΫΞοϓͷਓؒͰ͋Ε͹ॻ͘ʹ͋ͨͬͯԿ΋໰୊͸ͳ͍ • ʮσβΠϯ͸Ұྲྀ͚ͩͲϚʔΫΞοϓ͸ෆ׳ΕʯͰ΋ Scoped CSS Ͱष͍΋ ͷʹ֖ΛͰ͖Δͷ͸࠷ߴ • ͜͜Ͱ΋ʮ͜͜Ͱ͔͠࢖ΘΕ͍ͯͳ͍΋ͷʯΛ؆୯ʹഁغͰ͖Δࠩҟٵऩ͕ޮ ͍ͯ͘Δ

Slide 43

Slide 43 text

σβΠφʔͱҰॹʹ࢓ࣄ͢Δͱരൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ(2) • ͍͍ͩͨ໰୊͕ൃੜ͢Δͷ͸ Node ؀ڥͷ࿩ͳͷͰ؀ڥͷߏங͸୅ߦ͢Δ • Storybook ͷ stories ͷॻ͖ํ·Ͱڭ͑ͯӠʑΧϯψϯ……ͱ͔΍Γͩ͢ͱ టপԽ͢Δ • ద౰ͳ Sandbox ίϯϙʔωϯτΛ࡞Δ͔ stories ͸ FE ͕ॻ͍ͯͦ͜Ͱແݶ ʹॻ͍ͯ΋Βͬͨ΄͏͕݁Ռతʹ޾෱ʹͳΔ • ςετΛॻ͍ͯͨΒςετ͸ͿͬյΕΔͷͰ௚͢ • ͜Ε͑͞΍Ε͹രൃ͠ͳ͍ʢςετ͸രൃ͢Δ͔΋ʣ

Slide 44

Slide 44 text

3 / 3

Slide 45

Slide 45 text

Vue.js طଘͷ Web ΞϓϦͷ Τοδར༻ JS ͱͯ͠࠷ڧઆ

Slide 46

Slide 46 text

A. ͍͍ͩͨ͋ͬͯΔ

Slide 47

Slide 47 text

Web ΞϓϦʹ Vue.js Λ ࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩

Slide 48

Slide 48 text

Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩(1) ςϯϓϨʔτه๏͕ͦͦ͜͜ϞμϯͰ࢖͍΍͍͢ • αʔόʔαΠυத৺ͷ(Slim ΍ Blade ͳͲ͔Β HTML Λग़ྗ͍ͯ͠Δ)ϓϩδΣΫτʹ Ұ෦ JS ΛೖΕΔͳΒ Vue.js ͸࠷ߴ • [v-cloak] Λ࢖ͬͯςϯϓϨʔτͷ࿐ग़Λ๷͗ͭͭɺόοΫΤϯυͷςϯϓϨʔτΤ ϯδϯͱ૊Έ߹Θͤ΍͍͢ͷ͕ૉఢʢ΍Γ͗͢Δͱരൃ͢Δʣ • σϦϛλ( {{}} )Λࣗ༝ʹม͑ΒΕΔ( [[]] ͳͲ)ͷͰͲͷςϯϓϨʔτΤϯδϯͱ΋͔ͪ ߹Θͳ͍

Slide 49

Slide 49 text

Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩(2) ঢ়ଶ؅ཧΛࡶʹͰ͖Δͷ͕ྑ͍ • ૒ํ޲όΠϯσΟϯάΛར༻͢Δͱద౰ʹσʔλΛͿͪࠐΉͱద౰ʹϦΞϧλΠϜͰ ൓ө͞ΕΔ • this.setState() Έ͍ͨͳ֓೦͕ͳ͘ɺద౰ʹάϩʔόϧʹঢ়ଶΛల։͢ΔͱͦΕ͚ͩ ͰετΞ૚Λల։Ͱ͖Δ • window.store Λ࡞Γग़ͯ͠ബ͍ετΞ૚Λ࡞Δͷ͕͓͢͢Ί

Slide 50

Slide 50 text

Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩(1) ϩʔΧϧεςʔτͱ͍͏֓೦͕͋ΔͷͰ new Vue ͠΍͍͢ͷ͕ྑ͍ • ϩʔΧϧεςʔτΛڐ༰͢Δٕज़Ͱ͋ΔͨΊؾܰʹ new Vue Λͯ͠ബ͍ಠࣗετΞ ͱ૊Έ߹ΘͤΔͱշదʹ։ൃ͕Ͱ͖Δ • SPA ͷ৔߹͸ Vuex ͕ͳ͍ͱരൃ͕ͨ͠ɺͪΐ͍ೖΕͳΒͦ͜·ͰΫϦςΟΧϧͳӨ ڹ͸ͳ͍ • ଟ͘ͷॻ͖ํΛڐ༰͍ͯ͠Δར఺Λ׆͔ͯ͠ϓϩδΣΫτن໛ʹϚονͨ͠։ൃελ ΠϧΛऔΔͱடংΛ࡞Γ΍͍͢

Slide 51

Slide 51 text

ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • ϓϥάΠϯ΍ϧʔςΟϯάϑοΫ͕ΦϨΦϨߏ੒ͷ࿩ • utils σΟϨΫτϦ͕Ͱ͖ͨΓ؅ཧγεςϜ่͕յͯ͠രൃ͢Δ

Slide 52

Slide 52 text

ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • ϓϥάΠϯ΍ϧʔςΟϯάϑοΫ͕ΦϨΦϨߏ੒ͷ࿩ • utils σΟϨΫτϦ͕Ͱ͖ͨΓ؅ཧγεςϜ่͕յͯ͠രൃ͢Δ • utils ͷരൃͷ࿩͸ŠŧŽˠ https://slides.com/potato4d/vuejs_meetup7

Slide 53

Slide 53 text

ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • Vue + TypeScript Ͱ޾ͤʹͳΖ͏ͱ͢Δ࿩ • Vuex + TypeScript Ͱ mapGetters / mapActions ͕ any ʹͳͬͯരൃ͢ Δ࿩

Slide 54

Slide 54 text

ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • ςετ • ॳݟͰ΍Δͱେମരൃ͢Δ

Slide 55

Slide 55 text

ͦͷଞʹ΋ฉ͍ͯΈ͍ͨ࿩͸ ͓ؾܰʹͲ͏ͧ

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Vue.js Λ৽نͰ ಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ

Slide 58

Slide 58 text

Vue.js Λ৽نͰಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ

Slide 59

Slide 59 text

Vue.js Λ৽نͰಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ

Slide 60

Slide 60 text

SPA ฤ ࠷௿ݶ΍͓ͬͯ͘΂͖͜ͱ • ಡΈऔΓઐ༻ͷΞϓϦέʔγϣϯͰ΋ͳ͍ݶΓ͸ Vuex ͸ඞͣಋೖ͢Δ • ΦϨΦϨϨΠϠʔΛ࡞Γग़ͦ͠͏ͳ෦෼ʹ͍ͭͯ͸ۃྗΑͦͷ࣮૷Λࢀߟʹͯ͠ʮॻ ͍ͨ΍͔ͭ͠Θ͔Βͳ͍ʯΛආ͚Δ • σβΠφʔʹίϯϙʔωϯτΛ࡞ͬͯ΋Β͏ͱ͖͸ॻ͘·ͰͷϋʔυϧΛ࠷େݶԼ͛ Δ • Nuxt.js Λ࢖͏

Slide 61

Slide 61 text

ফ໣ͨ͘͠ͳ͍ͳΒ Nuxt.js

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Nuxt.js ͱ͸ • Vue based ͳϑϧελοΫϑϩϯτΤϯυϑϨʔϜϫʔΫ • SPA ઐ༻ɻͪΐ͍ೖΕ͸ෆՄɻ • Vue + Vue Router + Vuex + SSR ؀ڥ͕σϑΥϧτ • ΦϨΦϨϓϥάΠϯϨΠϠʔͳͲ΋ Nuxt.js ͕ٵऩ • ن໿ϕʔεͷΞʔΩςΫνϟʹΑͬͯن໿ΛकΔͱ୭Ͱ΋ߴ඼࣭ͳίʔυ ͕ॻ͚Δ

Slide 64

Slide 64 text

SPA ޲͚ͷ։ൃηοτ

Slide 65

Slide 65 text

Nuxt.js Λ࢖͏ͱخ͍͜͠ͱ • ن໿͕ΦϨΦϨΞʔΩςΫνϟ͔ΒϓϩδΣΫτΛकͬͯ͘ΕΔ • ෭࢈෺ͱͯ͠ҎԼͷΑ͏ͳศརػೳ͕͍ͭͯ͘Δ • ϧʔςΟϯάͷࣗಈੜ੒ػೳʢϧʔςΟϯά؅ཧ༻ͷϨΠϠΛফͤΔʣ • Vuex ετΞΛѻ͍΍͘͢͢ΔΦʔτϩʔσΟϯάʢಋೖ͕໘౗͡Όͳ͍ʣ • ๛෋ͳϓϥάΠϯʗΤίγεςϜ

Slide 66

Slide 66 text

खͬऔΓૣ͘ େମͷ໰୊ΛղফͰ͖Δ

Slide 67

Slide 67 text

SPA ͸ Nuxt.js Ͱྑ͍

Slide 68

Slide 68 text

Vue.js Λ৽نͰಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ

Slide 69

Slide 69 text

SPA ͡Όͳ͍ฤ • ͪΐ͍ೖΕͷ৔߹͸େମ͖ͬ͞·Ͱॻ͍ͨ௨Γ • ૉ๿ͳʮετΞύλʔϯʯͰ࣮૷͢Δ • ͲͷΈͪ jQuery ͷίʔυͳͲ͔ΒσʔλΛ͍͘͡Γճͨ͘͠ͳΔʢମݧ ஊʣͷͰ Readonly ΛੜΈग़͢ Vuex ͸࢖Θͳ͍ • new Vue ({}) ͸͍ͭͯ͘͠΋ྑ͍ͷͰίϯϙʔωϯτಉ࢜͸ૄ݁߹Ͱ࡞Δ

Slide 70

Slide 70 text

SPA ͡Όͳ͍ฤ • ͜Ε͔Β࣮૷͢Δਓ޲͚ͷ௥Ճ Tips • Smarty, Slim, Blade ͳͲͱҰॹʹ࢖͏ͳΒͰ͖Δ͚ͩҰͭͷ HTML ߏ଄ Λ͓ޓ͍ʹॻ͖׵͑Δͷ͸΍ΊΔ • Λ༻ҙͯ͠ɺ $ (‘#initialState’).innerHTML ͰऔΓग़ͯ͠ Vue ίϯϙʔωϯτʹྲྀ͠ࠐΉઃ ܭͰ࡞Δ