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

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

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

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

Kenta Suzuki

February 18, 2017
Tweet

More Decks by Kenta Suzuki

Other Decks in Programming

Transcript

  1. զʑͷ՝୊͸Կͳͷ͔ εςʔτϑϧͳWEB։ൃͱ͍͏৽ͨͳબ୒ࢶ ▸ ͦΕ·Ͱͷ Web ։ൃ ▸ Webαʔό͕͢΂ͯʢεςʔτϨεʣ
 JS ͸ͪΐͬͱಈ͖Λτοϐϯά͢ΔͨΊͷ΋ͷ

    ▸ ৽ొ৔εςʔτϑϧWeb ▸ ಉ͡ը໘্ͰΰϦΰϦಈ͘ΞϓϦͷΑ͏ͳ଄Γ
 ϒϥ΢βଆʹओಋݖ͕ҠΓ࢝Ίͨ
  2. զʑͷ՝୊͸Կͳͷ͔ jQuery ͕͢΂ͯΛࢧ഑͍ͯͨ࣌͠୅ ▸ αʔό͔Βདྷͨ HTML ΛಡΈऔͬͯ
 ಈ͖ͷ͋Δ UI ʹஔ͖׵͑Δ


    ฏ࿨ͳੈք ▸ Ajax ௨৴ʹΑͬͯεςʔτϑϧͳ Web ʹՄೳੑΛײ࢝͡ΊΔ ▸ σεϩʔυ͕։͘
  3. զʑͷ՝୊͸Կͳͷ͔ ᶃԿΛͲ͜ʹॻ͘ͷ͔੔ཧ͢Δඞཁ͕͋Δ ▸ Inverse of Control (IoC) ▸ ؅ཧ͢Δํ๏Ͱ͸ͳ͘΍Γ͍ͨ͜ͱʹ஫໨͢Δ ▸

    ౴ҊͷҰ͕ͭ MVC ▸ ࢧԉ͢Δ֓೦͕ DI ▸ JS ϑϨʔϜϫʔΫʹݶͬͨ࿩Ͱ΋ͳ͍͠ɺ౰વͩΑͶɻ
  4. զʑͷ՝୊͸Կͳͷ͔ Backbone ͷొ৔ʹΑΓடংΛऔΓ໭͔ͨ͠ʹݟ͑ͨ ▸ IoC (MVC) ΛऔΓೖΕͯશମͷݟ௨ ͠ΛΑͨ͘͠ ▸ ϧʔςΟϯάػೳΛखʹೖΕͨ


    (Client side routing) #/hoge~ ▸ ը໘Λಈ͔͢ϩδοΫ͸ jQuery Ͱ खଓ͖తʹهड़͍ͯͨ͠
 ˠ ΍͸ΓσβΠϯ͕มΘΔͱ
 ৼΔ෣͍ϩδοΫ΋मਖ਼͢Δ͜ͱʹ
  5. զʑͷ՝୊͸Կͳͷ͔ UIͱϏδωεϩδοΫΛ෼཭͢Δඞཁ͕͋Δ ▸ UI ʹؔ͢ΔϩδοΫͷ෼཭
 Presentation Domain Separation = PDS


    
 
 
 
 ▸ JS ϑϨʔϜϫʔΫ͸ PDS Λ࣮ݱ͢ΔͨΊʹ࡞ΒΕΔʂ ը໘ͷݟͨ໨ ৼΔ෣͍ ԿΛͲ͏ݟͤΔͷ͔ ௨৴ɾͦͷଞͷΦϒδΣΫτ͕
 ෳࡶʹ࿈ܞ͠߹͏ੈք Ͳ͏੾Γ෼͚Δʁʁ
  6. PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS ▸ େຊͷ component ʹ༩͑ΒΕͨσʔλ͕
 ຤୺ͷ component ·Ͱ೾ٴ͢Δ͜ͱͰը໘͕࡞ΒΕΔ


    
 
 
 ▸ σʔλ(ঢ়ଶ)Λߋ৽͢Δ౓ʹը໘͕࡞Γ௚͞ΕΔʂʁ
 ˠ ࠷ऴతͳࠩ෼͚ͩΛ൓ө͢Δ࢓૊ΈΛ΋͍ͬͯΔ DATA
 (STATE)
  7. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ REACT.JS ▸ Stateless components Λ࠷ॳʹ࣮ݱͨ͠ϥΠϒϥϦ ▸ React.js

    ͸σʔλΛ component Λը໘දࣔʹ
 ม׵͢Δػೳ͔͠ͳ͍ʢϑϨʔϜϫʔΫͰ͸ͳ͍ʣ ▸ ࠩ෼Λ൓ө͢Δ࢓૊Έͱͯ͠ VirtualDOM Λར༻
  8. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ REACT.JS IS JUST A LIBRARY ▸ ౷ׅతͳΞʔΩςΫνϟ͸ผʹࢼߦࡨޡ͕ਐΊΒΕ͍ͯΔ

    ▸ Flux
 σʔλͷมԽ͕ى͜Δ৔ॴΛҰͭʹ·ͱΊɺ
 σʔλϑϩʔΛ̍ํ޲ʹ͢Δ ▸ Redux
 Flux ͔Β೿ੜͨ͠ΞʔΩςΫνϟ
  9. PDS࣮ݱͷํ޲ੑͦͷ̎ 2 WAY BINDINGS ( DATA BINDING ) ▸ ViewModel(୯ͳΔΦϒδΣΫτ)ͷϓϩύςΟ(ঢ়ଶ)ʹ


    ը໘σβΠϯΛఆٛͨ͠View(HTML)Λએݴతʹඥ෇͚Δ
 
 
 
 
 ViewModel ͷϓϩύςΟΛมߋˠ View ʹ൓ө
 View(formͳͲ)Λૢ࡞ˠ ViewModel ʹ൓ө View
 (HTML) data binding ViewModel (JS Object)
  10. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ Vue (2016.9.30 v2 -Ghost IN The

    Shell- Release) ▸ binding ॳ৺ऀʹ͓͢͢Ί ▸ ࢖͍΍͢͞
 ɹશମతͳߏ଄ͷΘ͔Γ΍͢͞
 ɹߏ଄Λ೺Ѳ͢ΔͨΊͷ৘ใྔͷద੾͞ ▸ ߏ଄ͷΘ͔Γ΍͢͞͸ن໛֦େ࣌ʹ΋ҖྗΛൃش
  11. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ Angular (2016.9.15 v2 -just call me

    “Angular”- Release) ▸ 2 way bindings ʹΑΔ PDSͱ
 IoC, DI Λ౷ׅతʹఏڙ͢Δϑϧ૷උͷϑϨʔϜϫʔΫ ▸ ຆͲͷػೳ͕ಠ࣮ࣗ૷͞Ε͍ͯΔ (jQuery తͳػೳ΋) ▸ ίϛϡχςΟ͕׆ൃͰඇৗʹେ͖͍ˠΤίγεςϜ͕ൃୡ ▸ εϚϗΞϓϦΛJSͰ։ൃ͢Δ Apache Cordova Λࢧ͑Δ ٕज़ͱͯ͠ɺΞϓϦΛ࡞Δͱ͖ʹΑ͘࢖͏෦඼͕ἧ͍ͬͯ Δ
  12. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ Aurelia (2016.7.27 v1 Release) ▸ 2

    way bindings ʹΑΔ PDSͱ
 IoC, DI Λ౷ׅతʹఏڙ͢Δϑϧ૷උͷϑϨʔϜϫʔΫ ▸ ͢΂ͯͷػೳ͕ϓϥάΠϯˠ ஔ͖׵͑Մೳ ▸ ϘΠϥʔϓϨʔτʢ͍ͭ΋ॻ͘ढจʣΛపఈతʹഉআ͓ͯ͠Γɺ ؆ܿʹ΍Γ͍ͨ͜ͱΛදݱͰ͖Δ ▸ View ͱ ViewModel ͸໊લͰରԠ෇͚ΒΕΔ
 Կ΋ॻ͔ͳ͚Ε͹ඪ४తͳڍಈ / ໌ه͢Ε͹ѹ౗తͳࣗ༝
  13. PDS࣮ݱͷํ޲ੑ PDS ࣮ݱͷํ޲ੑͱ୅දతͳϑϨʔϜϫʔΫ ▸ Stateless Components ▸ React.js, Riot.js ▸

    2 way bindings ▸ Vue, Angular, Aurelia
 →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ
  14. PDS࣮ݱͷํ޲ੑ ڈ೥४උ͕΍ͬͱ੔ͬͨͱ͸Ͳ͏͍͏͜ͱ͔ ▸ Vue, Angular, Aurelia
 →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ ▸ ͦΕͧΕެࣜͷ CLI

    (Scaffolding Tool) ͕෇͍͍ͯΔ ▸ ίϚϯυҰൃͰ։ൃΛ࢝ΊΒΕΔ
 ؀ڥߏஙͱ͍͏นΛӽ͑Δ଍৔͕੔ͬͨ
 (task runner, module loader, …etc)
  15. JS ϑϨʔϜϫʔΫͷٕज़πϦʔ JS ᴈ໌ظ εςʔτϑϧWebʹடংΛ React.js Windows Presentation Foundation
 (WPF)→ݩωλ

    2 way binding lib
 ιʔεΛಡΉͷʹྑ͍ Vue v1 Vue v2 PDS ͷͨΊͷ
 2 way bindings Knockout Λ࢖ͬͨ
 ϑϨʔϜϫʔΫ FLUX REDUX
  16. 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