JSフレームワーク選定の勘所

大づかみなお話です
結論: 課題を知ったらなんでもいいから手を出してみよう！
（細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）

Transcript

1. બఆͷצॴ JSϑϨʔϜϫʔΫ
2. ҠΓมΘΓͷܹ͍͠ ऑ೑ڧ৯ͷੈքʂʁ JavaScriptͪ΄ʔ
3. JS ͸ऑ೑ڧ৯ͷੈքͳͷ͔ JS ϑϨʔϜϫʔΫ …ڈ೥΍ͬͱ४උ͕੔ͬͨʂ ▸ ͜Ε·Ͱˠ ੈքతͳࢼߦࡨޡʹΑΓͨ͘͞Μੜ·Εͨ ▸ ʮ৽͍͠΋ͷ͕ग़Δ౓ʹ͍͍͔ͭͯͳ͍ͱʯˠצҧ͍ʂ ▸ ͲΜͳߟ͑ํͷ΋ͱʹࢼߦࡨޡ͕ߦΘΕ͖ͯͨͷ͔ ͦͷࠜװΛ஌Ε͹ڪΕΔ͜ͱ͸ͳ͍ʂ
4. ࠓճ఻͍͑ͨ͜ͱ ▸ JavaScript ϑϨʔϜϫʔΫͷߟ͑ํͷࠜຊ ▸ ͲΜͳબ୒ࢶ͕͋ͬͯɺͲ͜Ͱ೰Ή΂͖ͳͷ͔ ▸ ڈ೥΍ͬͱ४උ͕੔ͬͨͱ͸Ͳ͏͍͏͜ͱ͔ ▸ ࢲͷ޷͖ͳ JavaScript ϑϨʔϜϫʔΫʹ͍ͭͯগ͠
5. ࠓ೔࿩͞ͳ͍͜ͱ ▸ ଞͷํ͕࿩͢ϑϨʔϜϫʔΫʹ͍ͭͯͷৄ͍͜͠ͱ ▸ MVC ΍ MVVM ʹ͍ͭͯͷৄ͍͜͠ͱ ▸ JavaScript ͦͷ΋ͷͷਐԽʹ͍ͭͯ
6. զʑͷ՝୊͸Կͳͷ͔ ߟ͑ํͷࠜװ
7. զʑͷ՝୊͸Կͳͷ͔ εςʔτϑϧͳWEB։ൃͱ͍͏৽ͨͳબ୒ࢶ ▸ ͦΕ·Ͱͷ Web ։ൃ ▸ Webαʔό͕͢΂ͯʢεςʔτϨεʣ
 JS ͸ͪΐͬͱಈ͖Λτοϐϯά͢ΔͨΊͷ΋ͷ ▸ ৽ొ৔εςʔτϑϧWeb ▸ ಉ͡ը໘্ͰΰϦΰϦಈ͘ΞϓϦͷΑ͏ͳ଄Γ
 ϒϥ΢βଆʹओಋݖ͕ҠΓ࢝Ίͨ
8. զʑͷ՝୊͸Կͳͷ͔ jQuery ͕͢΂ͯΛࢧ഑͍ͯͨ࣌͠୅ ▸ αʔό͔Βདྷͨ HTML ΛಡΈऔͬͯ
 ಈ͖ͷ͋Δ UI ʹஔ͖׵͑Δ
 ฏ࿨ͳੈք ▸ Ajax ௨৴ʹΑͬͯεςʔτϑϧͳ Web ʹՄೳੑΛײ࢝͡ΊΔ ▸ σεϩʔυ͕։͘
9. զʑͷ՝୊͸Կͳͷ͔ ৽ͨͳબ୒ࢶ͕എෛ͖ͬͯͨ՝୊ᶃ ▸ ݟͨ໨ͱৼΔ෣͍ (UI) Λෳࡶʹ࡞ΓࠐΉ͜ͱ͕Ͱ͖Δ
 ˠ ίʔυͷෳࡶ͞͸Ճ଎౓తʹ্ঢ࢝͠ΊΔ…
 → ԿΛͲ͜ʹॻ͘ͷ͔੔ཧ͢Δඞཁ͕͋ΔΑͶʂ
10. զʑͷ՝୊͸Կͳͷ͔ ᶃԿΛͲ͜ʹॻ͘ͷ͔੔ཧ͢Δඞཁ͕͋Δ ▸ Inverse of Control (IoC) ▸ ؅ཧ͢Δํ๏Ͱ͸ͳ͘΍Γ͍ͨ͜ͱʹ஫໨͢Δ ▸ ౴ҊͷҰ͕ͭ MVC ▸ ࢧԉ͢Δ֓೦͕ DI ▸ JS ϑϨʔϜϫʔΫʹݶͬͨ࿩Ͱ΋ͳ͍͠ɺ౰વͩΑͶɻ
11. զʑͷ՝୊͸Կͳͷ͔ Backbone ͷొ৔ʹΑΓடংΛऔΓ໭͔ͨ͠ʹݟ͑ͨ ▸ IoC (MVC) ΛऔΓೖΕͯશମͷݟ௨ ͠ΛΑͨ͘͠ ▸ ϧʔςΟϯάػೳΛखʹೖΕͨ
 (Client side routing) #/hoge~ ▸ ը໘Λಈ͔͢ϩδοΫ͸ jQuery Ͱ खଓ͖తʹهड़͍ͯͨ͠
 ˠ ΍͸ΓσβΠϯ͕มΘΔͱ
 ৼΔ෣͍ϩδοΫ΋मਖ਼͢Δ͜ͱʹ
12. զʑͷ՝୊͸Կͳͷ͔ ৽ͨͳબ୒ࢶ͕എෛ͖ͬͯͨ՝୊ᶄ ▸ UIʹ௚઀ؔ܎ͷͳ͍ϏδωεϩδοΫ
 ˠ UIͷϩδοΫʹৼΓճ͞Ε࢝ΊΔ…
 ɹ ঢ়ଶ͕UIʹΑͬͯอ࣋…σβΠϯΛม͑Δͱ͋͋͋͋͋
 → UIͱϏδωεϩδοΫΛ෼཭͢Δඞཁ͕͋ΔΑͶʂ
13. զʑͷ՝୊͸Կͳͷ͔ UIͱϏδωεϩδοΫΛ෼཭͢Δඞཁ͕͋Δ ▸ UI ʹؔ͢ΔϩδοΫͷ෼཭
 Presentation Domain Separation = PDS
 
 
 
 
 ▸ JS ϑϨʔϜϫʔΫ͸ PDS Λ࣮ݱ͢ΔͨΊʹ࡞ΒΕΔʂ ը໘ͷݟͨ໨ ৼΔ෣͍ ԿΛͲ͏ݟͤΔͷ͔ ௨৴ɾͦͷଞͷΦϒδΣΫτ͕
 ෳࡶʹ࿈ܞ͠߹͏ੈք Ͳ͏੾Γ෼͚Δʁʁ
14. PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ!? JSϑϨʔϜϫʔΫ
15. JSϑϨʔϜϫʔΫ͸PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ PDS ࣮ݱͷํ޲ੑ͸2ͭ͋Δ ▸ Stateless Components ▸ 2 way binding (data binding)
16. STATELESS COMPONENTS PDS ࣮ݱͷํ޲ੑͦͷ̍
17. PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS ▸ σʔλ(ঢ়ଶ)Λը໘දࣔʹม׵͢Δ’ؔ਺’Λఆٛ͢Δ
 ͦͷؔ਺ͷ͜ͱΛ component (෦඼) ͱݺͿ
 
 
 
 ▸ component Λ࢖ͬͯ component Λ࡞Δ DATA
 (STATE) UI component
18. PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS ▸ େຊͷ component ʹ༩͑ΒΕͨσʔλ͕
 ຤୺ͷ component ·Ͱ೾ٴ͢Δ͜ͱͰը໘͕࡞ΒΕΔ
 
 
 
 ▸ σʔλ(ঢ়ଶ)Λߋ৽͢Δ౓ʹը໘͕࡞Γ௚͞ΕΔʂʁ
 ˠ ࠷ऴతͳࠩ෼͚ͩΛ൓ө͢Δ࢓૊ΈΛ΋͍ͬͯΔ DATA
 (STATE)
19. PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS React.js ެࣜαΠτΑΓҾ༻ https://facebook.github.io/react/
20. PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS ▸ ෭࡞༻ͷͳ͍ؔ਺Λ૊Έ߹Θ͍͚ͤͯͩ͘
 ඇৗʹϞδϡʔϧڧ౓ͷߴ͍ݎ࿚ͳ։ൃ͕Մೳ ▸ খͯ͘͞୯७ͳ΋ͷͷੵΈॏͶͰͰ͖͍ͯΔ ▸ Good! อकϑΣʔζʹਅՁΛൃش͢Δ ▸ Bad… ։ൃͷॳظஈ֊Ͱ͸ूதྗΛอͪͮΒ͍ DATA
21. STATELESS COMPONENTS 
 Λجૅͱͨ͠ϑϨʔϜϫʔΫ
22. PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ ▸ React.js ▸ Riot.js
23. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ REACT.JS ▸ Stateless components Λ࠷ॳʹ࣮ݱͨ͠ϥΠϒϥϦ ▸ React.js ͸σʔλΛ component Λը໘දࣔʹ
 ม׵͢Δػೳ͔͠ͳ͍ʢϑϨʔϜϫʔΫͰ͸ͳ͍ʣ ▸ ࠩ෼Λ൓ө͢Δ࢓૊Έͱͯ͠ VirtualDOM Λར༻
24. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ REACT.JS IS JUST A LIBRARY ▸ ౷ׅతͳΞʔΩςΫνϟ͸ผʹࢼߦࡨޡ͕ਐΊΒΕ͍ͯΔ ▸ Flux
 σʔλͷมԽ͕ى͜Δ৔ॴΛҰͭʹ·ͱΊɺ
 σʔλϑϩʔΛ̍ํ޲ʹ͢Δ ▸ Redux
 Flux ͔Β೿ੜͨ͠ΞʔΩςΫνϟ
25. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ RIOT.JS ▸ React.js ͷߟ͑ํΛ΋ͱʹɺΑΓ؆୯ʹॻ͖࢝ΊΒΕΔΑ͏ ʹ࡞ΒΕͨখن໛ϑϨʔϜϫʔΫ ▸ ϧʔςΟϯάػೳ͕͍ͭͯΔ ▸ Web Components ͷ࢓༷ΛઌऔΓ͢Δจ๏Λ࠾༻ ▸ ࠩ෼Λ൓ө͢Δ࢓૊ΈΛಠ࣮ࣗ૷
26. JSϑϨʔϜϫʔΫ͸PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ PDS ࣮ݱͷํ޲ੑ͸2ͭ͋Δ ▸ Stateless Components ▸ 2 way bindings (data binding)
27. 2 WAY BINDINGS PDS ࣮ݱͷํ޲ੑͦͷ̎
28. PDS࣮ݱͷํ޲ੑͦͷ̎ 2 WAY BINDINGS ( DATA BINDING ) ▸ ViewModel(୯ͳΔΦϒδΣΫτ)ͷϓϩύςΟ(ঢ়ଶ)ʹ
 ը໘σβΠϯΛఆٛͨ͠View(HTML)Λએݴతʹඥ෇͚Δ
 
 
 
 
 ViewModel ͷϓϩύςΟΛมߋˠ View ʹ൓ө
 View(formͳͲ)Λૢ࡞ˠ ViewModel ʹ൓ө View
 (HTML) data binding ViewModel (JS Object)
29. PDS࣮ݱͷํ޲ੑͦͷ̎ 2 WAY BINDINGS ( DATA BINDING ) ViewModel (JS Object) View
 (HTML)
30. 2 WAY BINDINGS
 Λجૅͱͨ͠ϑϨʔϜϫʔΫ
31. PDS࣮ݱͷํ޲ੑͦͷ̎ 2 WAY BINDINGSΛجૅͱͨ͠ϑϨʔϜϫʔΫ ▸ Vue ▸ Angular ▸ Aurelia
32. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ Vue (2016.9.30 v2 -Ghost IN The Shell- Release) ▸ binding ॳ৺ऀʹ͓͢͢Ί ▸ ࢖͍΍͢͞
 ɹશମతͳߏ଄ͷΘ͔Γ΍͢͞
 ɹߏ଄Λ೺Ѳ͢ΔͨΊͷ৘ใྔͷద੾͞ ▸ ߏ଄ͷΘ͔Γ΍͢͞͸ن໛֦େ࣌ʹ΋ҖྗΛൃش
33. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ Angular (2016.9.15 v2 -just call me “Angular”- Release) ▸ 2 way bindings ʹΑΔ PDSͱ
 IoC, DI Λ౷ׅతʹఏڙ͢Δϑϧ૷උͷϑϨʔϜϫʔΫ ▸ ຆͲͷػೳ͕ಠ࣮ࣗ૷͞Ε͍ͯΔ (jQuery తͳػೳ΋) ▸ ίϛϡχςΟ͕׆ൃͰඇৗʹେ͖͍ˠΤίγεςϜ͕ൃୡ ▸ εϚϗΞϓϦΛJSͰ։ൃ͢Δ Apache Cordova Λࢧ͑Δ ٕज़ͱͯ͠ɺΞϓϦΛ࡞Δͱ͖ʹΑ͘࢖͏෦඼͕ἧ͍ͬͯ Δ
34. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ Aurelia (2016.7.27 v1 Release) ▸ 2 way bindings ʹΑΔ PDSͱ
 IoC, DI Λ౷ׅతʹఏڙ͢Δϑϧ૷උͷϑϨʔϜϫʔΫ ▸ ͢΂ͯͷػೳ͕ϓϥάΠϯˠ ஔ͖׵͑Մೳ ▸ ϘΠϥʔϓϨʔτʢ͍ͭ΋ॻ͘ढจʣΛపఈతʹഉআ͓ͯ͠Γɺ ؆ܿʹ΍Γ͍ͨ͜ͱΛදݱͰ͖Δ ▸ View ͱ ViewModel ͸໊લͰରԠ෇͚ΒΕΔ
 Կ΋ॻ͔ͳ͚Ε͹ඪ४తͳڍಈ / ໌ه͢Ε͹ѹ౗తͳࣗ༝
35. PDS࣮ݱͷํ޲ੑ PDS ࣮ݱͷํ޲ੑͱ୅දతͳϑϨʔϜϫʔΫ ▸ Stateless Components ▸ React.js, Riot.js ▸ 2 way bindings ▸ Vue, Angular, Aurelia
 →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ
36. PDS࣮ݱͷํ޲ੑ ڈ೥४උ͕΍ͬͱ੔ͬͨͱ͸Ͳ͏͍͏͜ͱ͔ ▸ Vue, Angular, Aurelia
 →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ ▸ ͦΕͧΕެࣜͷ CLI (Scaffolding Tool) ͕෇͍͍ͯΔ ▸ ίϚϯυҰൃͰ։ൃΛ࢝ΊΒΕΔ
 ؀ڥߏஙͱ͍͏นΛӽ͑Δ଍৔͕੔ͬͨ
 (task runner, module loader, …etc)
37. JS ϑϨʔϜϫʔΫͷٕज़πϦʔ JS ᴈ໌ظ εςʔτϑϧWebʹடংΛ React.js Windows Presentation Foundation
 (WPF)→ݩωλ 2 way binding lib
 ιʔεΛಡΉͷʹྑ͍ Vue v1 Vue v2 PDS ͷͨΊͷ
 2 way bindings Knockout Λ࢖ͬͨ
 ϑϨʔϜϫʔΫ FLUX REDUX
38. FRIENDS OF 2 WAY BINDINGS FRIENDS OF STATELESS COMPONENTS JS ϑϨʔϜϫʔΫͷٕज़πϦʔ JS ᴈ໌ظ εςʔτϑϧWebʹடংΛ React.js Windows Presentation Foundation
 (WPF)→ݩωλ 2 way binding lib
 ιʔεΛಡΉͷʹྑ͍ Vue v1 Vue v2 PDS ͷͨΊͷ
 2 way bindings Knockout Λ࢖ͬͨ
 ϑϨʔϜϫʔΫ FLUX REDUX
39. JS ϑϨʔϜϫʔΫબఆ React.js Vue v2 ͦͷଞʹ΋͍Ζ͍Ζ…
40. ڵຯͷ͋Δ ํ͸ͥͻ͝ ࿈བྷΛʂ @ken_zookie
41. ͋Γ͕ͱ͏͍͟͝·ͨ͠