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

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