JSフレームワークを振り返る

合同勉強会 in 福岡で発表した資料
https://connpass.com/event/49117/

Transcript

1. JSϑϨʔϜϫʔΫΛ ৼΓฦΔ IN 2017 2017/02/11 Teruo Kunihiro
2. ➤ ࡢ೥9݄͔Β גࣜձࣾNulab & ෱Ԭ ➤ ۀ຿: HTML5ͷCacooͷ։ൃͱ͔ ➤ ࠓ·ͰJS։ൃҊ͕݅ଟ͔ͬͨͷͰओʹJSॻ͍ ͯ·͢ Twitterͱ͔Qiitaͱ͔ͨ·ʹGithub @knhr__ ➤ I love JavaScript!!But I want to study another languages. ࣗݾ঺հ
3. CACOOʹ͍ͭͯ
4. ͸͡Ίʹ ϑϩϯτΤϯυʹ͓͍ͯͷॲཧͷϓϩηε͸ Event + DataStore => DOM ͔͠͠DOM΁ͷม׵ͷࡍʹViewʹ߹ΘͤͨDataͷՃ޻͕ඞཁ Event or DataStore => DataStore + Data(For View) => DOM ͜ͷॲཧΛղ͘ͷ͕ϑϨʔϜϫʔΫ
5. ͸͡Ίʹ ➤ ༻ޠ Model = DataStore, DataͷೖΕ෺ɺϏδωεϩδοΫ Controller = Πϕϯτड͚ͨΓɺ৔߹ʹΑͬͯ͸View༻ͷσʔλ Ճ޻ɺEvent Handleɻ ViewModel = View༻ͷσʔλՃ޻ɺEventͷϋϯυϦϯάɺσʔ λͷอ࣋ View = ͨͩͷςϯϓϨʔτ, JSXͱ͔ => ͨͩͷݴ༿ͳͷͰద౰ͳ֓೦ͱͯ͠ଊ͑Δ
6. JSϑϨʔϜϫʔΫԿΛ࢖͍·͔ͨ͠ʁ ➤ Backbone.js ➤ Knockout.js ➤ angular ➤ React ➤ Polymer ➤ riot.js ➤ angular2 ➤ Vue
7. ͦͷมԽ͸ʁ ➤ Componentࢦ޲΁ ➤ jQueryʹΑΔDOMૢ࡞͔ΒVirtualDOM΁ ➤ State؅ཧํ๏ͷมԽ
8. WEBCOMPONENTͱ͸ ➤ 2011೥ʹఏҊ͞ΕͨΞΠσΞ ➤ ωΠςΟϒͳAPI͸ݱࡏChormeͷΈʹ࣮૷͞Ε͍ͯΔ ➤ ࢓༷ࡦఆʹ೉ߤ͓ͯ͠Γ͜͜਺೥ͣͬͱDraftঢ়ଶ
9. WEBCOMPONENTͱ͸ DOMͰݴ͑͹ҎԼͷΑ͏ͳλάΛ໨ࢦ͢ <hello-world></hello-world> => <div>hello world</div> DOMɺৼΔ෣͍ɺState(JS)ɺσβΠϯ(CSS)ɺ(JS)͕ΧϓηϧԽ͞ Εͨλά Data(for View) + DOM ϑϩϯτΤϯυͷViewͱ͸ಠཱͨ͠ίϯϙʔωϯτͷू߹ମͱଊ͑ Δ͜ͱ͕Ͱ͖Δ
10. COMPONENTͷ໰୊఺(ͩͬͨ) ➤ DOMͷߋ৽ͷॲཧ͕ॏ͍ DOMؙ͝ͱΛೖΕସ͑ΔͨΊDOMͷߋ৽ॲཧ͕ॏ͔ͬͨɻ ͔͠͠Componentͷߋ৽͸ҰׅͰߦΘͳ͍ͱෆ੔߹͕ى͖Δ ࠓ·Ͱ͸ͦ͜ΛjQueryͰؤுΔɻ ΋͘͠͸Two-way-data-bindingͰؤு͍ͬͯͨ jQueryͰؤுΓͨ͘ͳ͍ɻɻɻ
11. COMPONENTͷվળ DOMͷߋ৽ΛͰࠩ෼ߋ৽(Virtual DOMͳͲʹΑΓ)Ͱߦ͏ϑϨʔϜϫʔΫ͕ ୆಄͖ͯͨ͠ ࠩ෼ߋ৽͸ϥΠϒϥϦ೚ͤʹͰ͖Δ͜ͱʹΑͬͯɺର৅ͷComponentͷߋ৽ ΛҰׅͰߦ͑ΔΑ͏ʹͳͬͨ ͨͩ͠WebComponent͸੓࣏తʹ࣮ݱ͸·ͩ·ͩͬΆ͍ͷͰ֤छϑϨʔϜ ϫʔΫ͕ݸผʹؤு͍ͬͯΔঢ়گ ͳͷͰWebComponentͷํ޲ͱ͸ׂͱҧ͏ͷ΋͋ΔɻReactͱ͔ https://github.com/reactjs/react-future/tree/master/02%20- %20Web%20Components
12. COMPONENTࢦ޲ʹ͍ͭͯ Ͱ͸ෳ਺ͷComponent͸ͲͷΑ͏ʹ࿈ܞ͢Δͷ͔ ਌ࢠͷίϯϙʔωϯτ͕ࢠίϯϙʔωϯτʹରͯ͠σʔλΛྲྀ͠ɺΠϕ ϯτΛड͚औΔΑ͏ʹಈ࡞ͤ͞Δ Component͕૿͑ͨΒঢ়ଶͷ؅ཧେมɻɻɻ
13. ΞϓϦέʔγϣϯͷSTATE؅ཧ ➤ ෳ਺ͷComponentͷStateΛݸผʹ࿈ܞͤͯ͞؅ཧͤ͞Δͷ͸ ݁ߏେม ➤ ͢ΔͱState؅ཧ͸·ͨผͰߦ͍͍ͨ!!ͬͯͳΔ ➤ શମͷState؅ཧ͸ݱࡏ͸FluxϥΠΫ(͍͍ͩͨRedux)ͳ΋ͷ ͕ओྲྀͱͳ͍ͬͯΔ
14. STATEͷมભ ➤ MVCϑϨʔϜϫʔΫ ➤ ૒ํ޲όΠϯσΟϯά ➤ Elm / Flux / Redux ͷΑ͏ͳؔ਺ܕϥΠΫͳState؅ཧ
15. MVCͱ͸ ➤ Model - ΞϓϦݻ༗ͷσʔλ, ϏδωεϩδοΫ ➤ View - HTML, Modelͷ஋Λදࣔ ➤ Controller - ViewͷೖྗΛड͚औΔ, ModelΛૢ࡞ View͕௚઀ModelΛࢀরͯ͠ඳը͢Δɻ
16. MVCͱ͸ ➤ Ұํํ޲ͳσʔλͷྲྀΕ ➤ View͸ModelΛ؂ࢹ͍ͯ͠Δ ➤ Controller͸ΠϕϯτΛड͚ औͬͯModelΛߋ৽͢ΔͷΈ ➤ ୅දతͳϑϨʔϜϫʔΫ Backbone.js
17. MVCͱ͸ VitrualDOMҎલͷMVCʹ͸͍͔ͭ͘໰୊఺͕͋ͬͨɻ ➤ DOM΋ঢ়ଶΛอ͍࣋ͯ͠ΔͨΊʹ΋͠DOMΛ׬શʹ࠶ඳը͢ ΔͱࣦΘΕΔσʔλ͕ଘࡏ͢ΔɻEventListernerͳͲ ➤ DOMͷૢ࡞͸ͱͯ΋஗͍ͨΊʹɺஞҰ࠶ඳըΛߦ͏ͷ͸ύ ϑΥʔϚϯεΛ͔ͳΓࣦ͏͜ͱʹͳΓ͏Δ ➤ ࠶ඳըͤͨ͘͞ͳ͍ͷͰɺControllerʹσʔλΛอ࣋ͤͯ͞Ξ ϓϦέʔγϣϯͷঢ়ଶ͕͙ͪΌ͙ͪΌʹͳͬͨʢମݧஊʣ
18. MVVMͱ͸ ➤ MVCΛݩʹͨ͠σβΠϯύλʔϯ ➤ ViewΛϏδωεϩδοΫ΍ΞϓϦέʔγϣϯͷৼΔ෣͍͔Β MVCΑΓ໌֬ʹ෼཭ͤ͞Δ ➤ Model - MVCͱಉ͡ɻViewModelͱ݁߹ ➤ ViewModel - ModelͱViewͷσʔλͷՃ޻ɺσʔλͷอ࣋ ➤ View - ViewModelͱͷ݁߹ɻData-bindings, Event
19. MVVMͱ͸ ➤ View͸Modelͱͷؔ࿈Λ௚઀࣋ͨ ͳ͍ɻView͸ৗʹViewModelͱ ಉظ͢Δ ➤ σʔλͷํ޲͸Ұํํ޲Ͱ͸ͳ͍ ➤ Ͳ͏΍ΒTwo-way-binding͕͋Δ ͷΛMVVMͱݴͬͯΔͬΆ͍ ➤ Componentࢦ޲ʹࣅͯViewʹର ͢ΔStateΛอ࣋͢Δ ➤ ୅දతͳϥΠϒϥϦ Knockout.js
20. MVVMͱ͸ ➤ όΠσΟϯά͞Ε͍ͯΔσʔλ෦෼ͷΈͷDOMΛߋ৽͢Δ͜ ͱͰɺMVVM͸MVCͷஞ࣍શ࠶ඳըͷ໰୊Λղܾͨ͠ ➤ UI͝ͱʹViewModelΛ࡞੒͢Ε͹͍͍ͷͰUIͷฒྻ։ൃΛ؆ ୯ʹͨ͠ʢComponentࢦ޲ʣ ͔͠͠MVVM͸ҎԼͷ໰୊఺ΛҾ͖ى͜͠·ͨ͠ ➤ εςʔτϑϧͳ֊૚ͷ૿ՃʹΑΓσʔλͷෳࡶ౓͸্͕ͬͨ
21. FLUX(REDUX)ͱ͸ ➤ 2014೥͝ΖʹFacebook͕ൃදͨ͠Ұํํ޲σʔλϑϩʔ ➤ ؔ਺ܕνοΫͳState؅ཧϑϨʔϜϫʔΫ ➤ Redux͸FluxϥΠΫͳσʔλϑϩʔͷछྨͷҰͭ https://facebook.github.io/flux/docs/in-depth-overview.html#content
22. ͦͯ͠FLUX΁ ➤ React͕ग़͖ͯͯDOMͷஞ࣍ߋ৽ͷίετ͕ݮͬͨ => σʔλͷมߋΛݕ஌ؙͯ͠͝ͱViewΛೖΕସ͑ΔॲཧΛؾ ܰʹߦ͑ΔΑ͏ʹͳͬͨ ➤ MVVM(΍Component)͸εςʔτϑϧͳ෦෼Λ૿΍ͯ͠͠ ·ͬͨ ➤ ͦͯ͠ModelҎ֎͸εςʔτϨεͳҰํํ޲σʔλϑϩʔͰ͋ ΔMVCతͳΞʔΩςΫνϟ͕ඞཁͱͳͬͨ
23. TODO MVCΛݟͯΈΑ͏ ➤ TodoͷMVCͷྫΛݟͯݟ·͠ΐ͏
24. TODO MVCΛݟͯΈΑ͏ ➤ Model͕૿͑Δ ➤ View, Modelͷґଘؔ܎͕ෳ ࡶʹͳΔ ➤ ༷ʑͳσʔλͷߋ৽ʹରͯ͠ ͜ͷΞϓϦέʔγϣϯ͸༧ଌ Մೳͳঢ়ଶΛҡ࣋Ͱ͖ΔͰ͠ΐ ͏͔
25. FLUXͳΒ ➤ Storeͷґଘؔ܎͸֊૚ߏ଄ʹ อͨΕɺ͢΂ͯͷStoreͷߋ৽ ͕ߦΘΕΔ·ͰViewʹ൓ө͞ Εͳ͍ ➤ StoreΛ௚઀৮Δ͜ͱ͕Ͱ͖ͳ ͍ɻಛఆͷAction͔Β͸ৗʹ ಉ݁͡ՌΛಘΔ͜ͱ͕Ͱ͖Δ ͨΊʹΞϓϦέʔγϣϯͷঢ় ଶΛ༧ଌՄೳʹͰ͖Δ
26. FLUXͱ͸ ➤ Α͘ݟΔͱMVCͷম͖௚͠Ͱશ͘৽͍֓͠೦ͱ͍͏͜ͱͰ͸ ͳ͍͕ɺΑΓڧ͍ن໿ͰറΒΕΔΠϝʔδ ➤ ΞϓϦέʔγϣϯͷঢ়ଶ͸StoreʢͱComponentʣʹ͚ͩด͡ ࠐΊΒΕΔͨΊʹMVVMͷ࣌ΑΓ༧ଌՄೳͳΞϓϦέʔγϣ ϯ΁ ➤ Stateͷߋ৽͸ৗʹ f(State, Actions) => NewState
27. FLUX(REDUX)ͷ໰୊఺ ➤ ݁ߏ৑௕ɻҰͭͷػೳΛ௥Ճ͢ΔͨΊʹView࡞ͬͯAction ࡞ͬͯStoreͷߋ৽࡞ͬͯStoreͷ৘ใΛComponentʹͭͳ͍Ͱ ͱͨ͘͞ΜͷϑΝΠϧΛฤू͢Δඞཁ͕͋Δɻ ➤ ඇಉظͷॲཧɺFormͷσʔλɺRoutingͷσʔλͳͲΛ্ख͘ ѻ͓͏ͱࢥ͏ͱ͍ΖΜͳϥΠϒϥϦΛೖΕΔ͜ͱʹͳͬͯͱ ʹ͔͘ർΕΔ
28. ྫ͑͹REDUX
29. ·ͱΊɾݱঢ় ➤ ίϯϙʔωϯτԽ(WebComponentؔ܎ͳ͘)Λߟྀ͞Ε͍ͯ Δ ➤ VirtualDOMతͳDOMΛࠩ෼ͰඳըΛߦ͏΋ͷ͕ଟ͍ ➤ MV*తͳΞϓϩʔν͕ѱ͍Θ͚Ͱ͸ͳ͍ ➤ ݱঢ়Reduxʹ΋໰୊఺͕͋ΔͷͰɺ͍ΖΜͳσʔλϑϩʔͷ State؅ཧϑϨʔϜϫʔΫ͕ཚཱ͍ͯ͠Δɻ ➤ ͱ͸͍͑࠷ۙ͸ReduxϥΠΫͳ΋ͷ͕ଟ͍ͷͰษڧ͍ͨ͠ਓ ਓ͸·ͣ͸ReduxΛ࢖ͬͯΈΑ͏!!
30. ༨ஊ(CACOOͷHTML5Խͷ࿩) ➤ HTMLͷView͸riot࢖ͬͯΔ ➤ riot͸componentࢦ޲ͷϑϨʔϜϫʔΫɻVirtualDOMͰ͸ͳ ͍͕DOMͷࠩ෼ߋ৽Λߦͬͯ͘ΕΔ ➤ State؅ཧ͸ࣗલͰ΍ͬͯΔɻComponent͝ͱͷStateͱΞϓϦ શମͷStateΛ؅ཧ ➤ ΞϓϦશମͷState͸indexedDBʹ֨ೲ͍ͯ͠Δ