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. બఆͷצॴ
    JSϑϨʔϜϫʔΫ

    View full-size slide

  2. ҠΓมΘΓͷܹ͍͠
    ऑ೑ڧ৯ͷੈքʂʁ
    JavaScriptͪ΄ʔ

    View full-size slide

  3. JS ͸ऑ೑ڧ৯ͷੈքͳͷ͔
    JS ϑϨʔϜϫʔΫ …ڈ೥΍ͬͱ४උ͕੔ͬͨʂ
    ▸ ͜Ε·Ͱˠ ੈքతͳࢼߦࡨޡʹΑΓͨ͘͞Μੜ·Εͨ
    ▸ ʮ৽͍͠΋ͷ͕ग़Δ౓ʹ͍͍͔ͭͯͳ͍ͱʯˠצҧ͍ʂ
    ▸ ͲΜͳߟ͑ํͷ΋ͱʹࢼߦࡨޡ͕ߦΘΕ͖ͯͨͷ͔
    ͦͷࠜװΛ஌Ε͹ڪΕΔ͜ͱ͸ͳ͍ʂ

    View full-size slide

  4. ࠓճ఻͍͑ͨ͜ͱ
    ▸ JavaScript ϑϨʔϜϫʔΫͷߟ͑ํͷࠜຊ
    ▸ ͲΜͳબ୒ࢶ͕͋ͬͯɺͲ͜Ͱ೰Ή΂͖ͳͷ͔
    ▸ ڈ೥΍ͬͱ४උ͕੔ͬͨͱ͸Ͳ͏͍͏͜ͱ͔
    ▸ ࢲͷ޷͖ͳ JavaScript ϑϨʔϜϫʔΫʹ͍ͭͯগ͠

    View full-size slide

  5. ࠓ೔࿩͞ͳ͍͜ͱ
    ▸ ଞͷํ͕࿩͢ϑϨʔϜϫʔΫʹ͍ͭͯͷৄ͍͜͠ͱ
    ▸ MVC ΍ MVVM ʹ͍ͭͯͷৄ͍͜͠ͱ
    ▸ JavaScript ͦͷ΋ͷͷਐԽʹ͍ͭͯ

    View full-size slide

  6. զʑͷ՝୊͸Կͳͷ͔
    ߟ͑ํͷࠜװ

    View full-size slide

  7. զʑͷ՝୊͸Կͳͷ͔
    εςʔτϑϧͳWEB։ൃͱ͍͏৽ͨͳબ୒ࢶ
    ▸ ͦΕ·Ͱͷ Web ։ൃ
    ▸ Webαʔό͕͢΂ͯʢεςʔτϨεʣ

    JS ͸ͪΐͬͱಈ͖Λτοϐϯά͢ΔͨΊͷ΋ͷ
    ▸ ৽ొ৔εςʔτϑϧWeb
    ▸ ಉ͡ը໘্ͰΰϦΰϦಈ͘ΞϓϦͷΑ͏ͳ଄Γ

    ϒϥ΢βଆʹओಋݖ͕ҠΓ࢝Ίͨ

    View full-size slide

  8. զʑͷ՝୊͸Կͳͷ͔
    jQuery ͕͢΂ͯΛࢧ഑͍ͯͨ࣌͠୅
    ▸ αʔό͔Βདྷͨ HTML ΛಡΈऔͬͯ

    ಈ͖ͷ͋Δ UI ʹஔ͖׵͑Δ

    ฏ࿨ͳੈք
    ▸ Ajax ௨৴ʹΑͬͯεςʔτϑϧͳ
    Web ʹՄೳੑΛײ࢝͡ΊΔ
    ▸ σεϩʔυ͕։͘

    View full-size slide

  9. զʑͷ՝୊͸Կͳͷ͔
    ৽ͨͳબ୒ࢶ͕എෛ͖ͬͯͨ՝୊ᶃ
    ▸ ݟͨ໨ͱৼΔ෣͍ (UI) Λෳࡶʹ࡞ΓࠐΉ͜ͱ͕Ͱ͖Δ

    ˠ ίʔυͷෳࡶ͞͸Ճ଎౓తʹ্ঢ࢝͠ΊΔ…

    → ԿΛͲ͜ʹॻ͘ͷ͔੔ཧ͢Δඞཁ͕͋ΔΑͶʂ

    View full-size slide

  10. զʑͷ՝୊͸Կͳͷ͔
    ᶃԿΛͲ͜ʹॻ͘ͷ͔੔ཧ͢Δඞཁ͕͋Δ
    ▸ Inverse of Control (IoC)
    ▸ ؅ཧ͢Δํ๏Ͱ͸ͳ͘΍Γ͍ͨ͜ͱʹ஫໨͢Δ
    ▸ ౴ҊͷҰ͕ͭ MVC
    ▸ ࢧԉ͢Δ֓೦͕ DI
    ▸ JS ϑϨʔϜϫʔΫʹݶͬͨ࿩Ͱ΋ͳ͍͠ɺ౰વͩΑͶɻ

    View full-size slide

  11. զʑͷ՝୊͸Կͳͷ͔
    Backbone ͷొ৔ʹΑΓடংΛऔΓ໭͔ͨ͠ʹݟ͑ͨ
    ▸ IoC (MVC) ΛऔΓೖΕͯશମͷݟ௨
    ͠ΛΑͨ͘͠
    ▸ ϧʔςΟϯάػೳΛखʹೖΕͨ

    (Client side routing) #/hoge~
    ▸ ը໘Λಈ͔͢ϩδοΫ͸ jQuery Ͱ
    खଓ͖తʹهड़͍ͯͨ͠

    ˠ ΍͸ΓσβΠϯ͕มΘΔͱ

    ৼΔ෣͍ϩδοΫ΋मਖ਼͢Δ͜ͱʹ

    View full-size slide

  12. զʑͷ՝୊͸Կͳͷ͔
    ৽ͨͳબ୒ࢶ͕എෛ͖ͬͯͨ՝୊ᶄ
    ▸ UIʹ௚઀ؔ܎ͷͳ͍ϏδωεϩδοΫ

    ˠ UIͷϩδοΫʹৼΓճ͞Ε࢝ΊΔ…

    ɹ ঢ়ଶ͕UIʹΑͬͯอ࣋…σβΠϯΛม͑Δͱ͋͋͋͋͋

    → UIͱϏδωεϩδοΫΛ෼཭͢Δඞཁ͕͋ΔΑͶʂ

    View full-size slide

  13. զʑͷ՝୊͸Կͳͷ͔
    UIͱϏδωεϩδοΫΛ෼཭͢Δඞཁ͕͋Δ
    ▸ UI ʹؔ͢ΔϩδοΫͷ෼཭

    Presentation Domain Separation = PDS





    ▸ JS ϑϨʔϜϫʔΫ͸ PDS Λ࣮ݱ͢ΔͨΊʹ࡞ΒΕΔʂ
    ը໘ͷݟͨ໨
    ৼΔ෣͍
    ԿΛͲ͏ݟͤΔͷ͔
    ௨৴ɾͦͷଞͷΦϒδΣΫτ͕

    ෳࡶʹ࿈ܞ͠߹͏ੈք
    Ͳ͏੾Γ෼͚Δʁʁ

    View full-size slide

  14. PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ!?
    JSϑϨʔϜϫʔΫ

    View full-size slide

  15. JSϑϨʔϜϫʔΫ͸PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ
    PDS ࣮ݱͷํ޲ੑ͸2ͭ͋Δ
    ▸ Stateless Components
    ▸ 2 way binding (data binding)

    View full-size slide

  16. STATELESS COMPONENTS
    PDS ࣮ݱͷํ޲ੑͦͷ̍

    View full-size slide

  17. PDS࣮ݱͷํ޲ੑͦͷ̍
    STATELESS COMPONENTS
    ▸ σʔλ(ঢ়ଶ)Λը໘දࣔʹม׵͢Δ’ؔ਺’Λఆٛ͢Δ

    ͦͷؔ਺ͷ͜ͱΛ component (෦඼) ͱݺͿ




    ▸ component Λ࢖ͬͯ component Λ࡞Δ
    DATA

    (STATE)
    UI
    component

    View full-size slide

  18. PDS࣮ݱͷํ޲ੑͦͷ̍
    STATELESS COMPONENTS
    ▸ େຊͷ component ʹ༩͑ΒΕͨσʔλ͕

    ຤୺ͷ component ·Ͱ೾ٴ͢Δ͜ͱͰը໘͕࡞ΒΕΔ




    ▸ σʔλ(ঢ়ଶ)Λߋ৽͢Δ౓ʹը໘͕࡞Γ௚͞ΕΔʂʁ

    ˠ ࠷ऴతͳࠩ෼͚ͩΛ൓ө͢Δ࢓૊ΈΛ΋͍ͬͯΔ
    DATA

    (STATE)

    View full-size slide

  19. PDS࣮ݱͷํ޲ੑͦͷ̍
    STATELESS COMPONENTS
    React.js ެࣜαΠτΑΓҾ༻ https://facebook.github.io/react/

    View full-size slide

  20. PDS࣮ݱͷํ޲ੑͦͷ̍
    STATELESS COMPONENTS
    ▸ ෭࡞༻ͷͳ͍ؔ਺Λ૊Έ߹Θ͍͚ͤͯͩ͘

    ඇৗʹϞδϡʔϧڧ౓ͷߴ͍ݎ࿚ͳ։ൃ͕Մೳ
    ▸ খͯ͘͞୯७ͳ΋ͷͷੵΈॏͶͰͰ͖͍ͯΔ
    ▸ Good! อकϑΣʔζʹਅՁΛൃش͢Δ
    ▸ Bad… ։ൃͷॳظஈ֊Ͱ͸ूதྗΛอͪͮΒ͍
    DATA

    View full-size slide

  21. STATELESS COMPONENTS 

    Λجૅͱͨ͠ϑϨʔϜϫʔΫ

    View full-size slide

  22. PDS࣮ݱͷํ޲ੑͦͷ̍
    STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
    ▸ React.js
    ▸ Riot.js

    View full-size slide

  23. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
    REACT.JS
    ▸ Stateless components Λ࠷ॳʹ࣮ݱͨ͠ϥΠϒϥϦ
    ▸ React.js ͸σʔλΛ component Λը໘දࣔʹ

    ม׵͢Δػೳ͔͠ͳ͍ʢϑϨʔϜϫʔΫͰ͸ͳ͍ʣ
    ▸ ࠩ෼Λ൓ө͢Δ࢓૊Έͱͯ͠ VirtualDOM Λར༻

    View full-size slide

  24. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
    REACT.JS IS JUST A LIBRARY
    ▸ ౷ׅతͳΞʔΩςΫνϟ͸ผʹࢼߦࡨޡ͕ਐΊΒΕ͍ͯΔ
    ▸ Flux

    σʔλͷมԽ͕ى͜Δ৔ॴΛҰͭʹ·ͱΊɺ

    σʔλϑϩʔΛ̍ํ޲ʹ͢Δ
    ▸ Redux

    Flux ͔Β೿ੜͨ͠ΞʔΩςΫνϟ

    View full-size slide

  25. STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
    RIOT.JS
    ▸ React.js ͷߟ͑ํΛ΋ͱʹɺΑΓ؆୯ʹॻ͖࢝ΊΒΕΔΑ͏
    ʹ࡞ΒΕͨখن໛ϑϨʔϜϫʔΫ
    ▸ ϧʔςΟϯάػೳ͕͍ͭͯΔ
    ▸ Web Components ͷ࢓༷ΛઌऔΓ͢Δจ๏Λ࠾༻
    ▸ ࠩ෼Λ൓ө͢Δ࢓૊ΈΛಠ࣮ࣗ૷

    View full-size slide

  26. JSϑϨʔϜϫʔΫ͸PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ
    PDS ࣮ݱͷํ޲ੑ͸2ͭ͋Δ
    ▸ Stateless Components
    ▸ 2 way bindings (data binding)

    View full-size slide

  27. 2 WAY BINDINGS
    PDS ࣮ݱͷํ޲ੑͦͷ̎

    View full-size slide

  28. PDS࣮ݱͷํ޲ੑͦͷ̎
    2 WAY BINDINGS ( DATA BINDING )
    ▸ ViewModel(୯ͳΔΦϒδΣΫτ)ͷϓϩύςΟ(ঢ়ଶ)ʹ

    ը໘σβΠϯΛఆٛͨ͠View(HTML)Λએݴతʹඥ෇͚Δ





    ViewModel ͷϓϩύςΟΛมߋˠ View ʹ൓ө

    View(formͳͲ)Λૢ࡞ˠ ViewModel ʹ൓ө
    View

    (HTML)
    data binding ViewModel
    (JS Object)

    View full-size slide

  29. PDS࣮ݱͷํ޲ੑͦͷ̎
    2 WAY BINDINGS ( DATA BINDING )
    ViewModel
    (JS Object)
    View

    (HTML)

    View full-size slide

  30. 2 WAY BINDINGS

    Λجૅͱͨ͠ϑϨʔϜϫʔΫ

    View full-size slide

  31. PDS࣮ݱͷํ޲ੑͦͷ̎
    2 WAY BINDINGSΛجૅͱͨ͠ϑϨʔϜϫʔΫ
    ▸ Vue
    ▸ Angular
    ▸ Aurelia

    View full-size slide

  32. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
    Vue (2016.9.30 v2 -Ghost IN The Shell- Release)
    ▸ binding ॳ৺ऀʹ͓͢͢Ί
    ▸ ࢖͍΍͢͞

    ɹશମతͳߏ଄ͷΘ͔Γ΍͢͞

    ɹߏ଄Λ೺Ѳ͢ΔͨΊͷ৘ใྔͷద੾͞
    ▸ ߏ଄ͷΘ͔Γ΍͢͞͸ن໛֦େ࣌ʹ΋ҖྗΛൃش

    View full-size slide

  33. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
    Angular (2016.9.15 v2 -just call me “Angular”- Release)
    ▸ 2 way bindings ʹΑΔ PDSͱ

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

    View full-size slide

  34. 2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
    Aurelia (2016.7.27 v1 Release)
    ▸ 2 way bindings ʹΑΔ PDSͱ

    IoC, DI Λ౷ׅతʹఏڙ͢Δϑϧ૷උͷϑϨʔϜϫʔΫ
    ▸ ͢΂ͯͷػೳ͕ϓϥάΠϯˠ ஔ͖׵͑Մೳ
    ▸ ϘΠϥʔϓϨʔτʢ͍ͭ΋ॻ͘ढจʣΛపఈతʹഉআ͓ͯ͠Γɺ
    ؆ܿʹ΍Γ͍ͨ͜ͱΛදݱͰ͖Δ
    ▸ View ͱ ViewModel ͸໊લͰରԠ෇͚ΒΕΔ

    Կ΋ॻ͔ͳ͚Ε͹ඪ४తͳڍಈ / ໌ه͢Ε͹ѹ౗తͳࣗ༝

    View full-size slide

  35. PDS࣮ݱͷํ޲ੑ
    PDS ࣮ݱͷํ޲ੑͱ୅දతͳϑϨʔϜϫʔΫ
    ▸ Stateless Components
    ▸ React.js, Riot.js
    ▸ 2 way bindings
    ▸ Vue, Angular, Aurelia

    →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ

    View full-size slide

  36. PDS࣮ݱͷํ޲ੑ
    ڈ೥४උ͕΍ͬͱ੔ͬͨͱ͸Ͳ͏͍͏͜ͱ͔
    ▸ Vue, Angular, Aurelia

    →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ
    ▸ ͦΕͧΕެࣜͷ CLI (Scaffolding Tool) ͕෇͍͍ͯΔ
    ▸ ίϚϯυҰൃͰ։ൃΛ࢝ΊΒΕΔ

    ؀ڥߏஙͱ͍͏นΛӽ͑Δ଍৔͕੔ͬͨ

    (task runner, module loader, …etc)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  39. JS ϑϨʔϜϫʔΫબఆ
    React.js
    Vue v2
    ͦͷଞʹ΋͍Ζ͍Ζ…

    View full-size slide

  40. ڵຯͷ͋Δ
    ํ͸ͥͻ͝
    ࿈བྷΛʂ
    @ken_zookie

    View full-size slide

  41. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide