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

by Kenta Suzuki

Slide 1

Slide 1 text

બఆͷצॴ JSϑϨʔϜϫʔΫ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

զʑͷ՝୊͸Կͳͷ͔ εςʔτϑϧͳWEB։ൃͱ͍͏৽ͨͳબ୒ࢶ ▸ ͦΕ·Ͱͷ Web ։ൃ ▸ Webαʔό͕͢΂ͯʢεςʔτϨεʣ  JS ͸ͪΐͬͱಈ͖Λτοϐϯά͢ΔͨΊͷ΋ͷ ▸ ৽ొ৔εςʔτϑϧWeb ▸ ಉ͡ը໘্ͰΰϦΰϦಈ͘ΞϓϦͷΑ͏ͳ଄Γ  ϒϥ΢βଆʹओಋݖ͕ҠΓ࢝Ίͨ

Slide 8

Slide 8 text

զʑͷ՝୊͸Կͳͷ͔ jQuery ͕͢΂ͯΛࢧ഑͍ͯͨ࣌͠୅ ▸ αʔό͔Βདྷͨ HTML ΛಡΈऔͬͯ  ಈ͖ͷ͋Δ UI ʹஔ͖׵͑Δ  ฏ࿨ͳੈք ▸ Ajax ௨৴ʹΑͬͯεςʔτϑϧͳ Web ʹՄೳੑΛײ࢝͡ΊΔ ▸ σεϩʔυ͕։͘

Slide 9

Slide 9 text

զʑͷ՝୊͸Կͳͷ͔ ৽ͨͳબ୒ࢶ͕എෛ͖ͬͯͨ՝୊ᶃ ▸ ݟͨ໨ͱৼΔ෣͍ (UI) Λෳࡶʹ࡞ΓࠐΉ͜ͱ͕Ͱ͖Δ  ˠ ίʔυͷෳࡶ͞͸Ճ଎౓తʹ্ঢ࢝͠ΊΔ…  → ԿΛͲ͜ʹॻ͘ͷ͔੔ཧ͢Δඞཁ͕͋ΔΑͶʂ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

զʑͷ՝୊͸Կͳͷ͔ Backbone ͷొ৔ʹΑΓடংΛऔΓ໭͔ͨ͠ʹݟ͑ͨ ▸ IoC (MVC) ΛऔΓೖΕͯશମͷݟ௨ ͠ΛΑͨ͘͠ ▸ ϧʔςΟϯάػೳΛखʹೖΕͨ  (Client side routing) #/hoge~ ▸ ը໘Λಈ͔͢ϩδοΫ͸ jQuery Ͱ खଓ͖తʹهड़͍ͯͨ͠  ˠ ΍͸ΓσβΠϯ͕มΘΔͱ  ৼΔ෣͍ϩδοΫ΋मਖ਼͢Δ͜ͱʹ

Slide 12

Slide 12 text

զʑͷ՝୊͸Կͳͷ͔ ৽ͨͳબ୒ࢶ͕എෛ͖ͬͯͨ՝୊ᶄ ▸ UIʹ௚઀ؔ܎ͷͳ͍ϏδωεϩδοΫ  ˠ UIͷϩδοΫʹৼΓճ͞Ε࢝ΊΔ…  ɹ ঢ়ଶ͕UIʹΑͬͯอ࣋…σβΠϯΛม͑Δͱ͋͋͋͋͋  → UIͱϏδωεϩδοΫΛ෼཭͢Δඞཁ͕͋ΔΑͶʂ

Slide 13

Slide 13 text

զʑͷ՝୊͸Կͳͷ͔ UIͱϏδωεϩδοΫΛ෼཭͢Δඞཁ͕͋Δ ▸ UI ʹؔ͢ΔϩδοΫͷ෼཭  Presentation Domain Separation = PDS          ▸ JS ϑϨʔϜϫʔΫ͸ PDS Λ࣮ݱ͢ΔͨΊʹ࡞ΒΕΔʂ ը໘ͷݟͨ໨ ৼΔ෣͍ ԿΛͲ͏ݟͤΔͷ͔ ௨৴ɾͦͷଞͷΦϒδΣΫτ͕  ෳࡶʹ࿈ܞ͠߹͏ੈք Ͳ͏੾Γ෼͚Δʁʁ

Slide 14

Slide 14 text

PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ!? JSϑϨʔϜϫʔΫ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS ▸ σʔλ(ঢ়ଶ)Λը໘දࣔʹม׵͢Δ’ؔ਺’Λఆٛ͢Δ  ͦͷؔ਺ͷ͜ͱΛ component (෦඼) ͱݺͿ        ▸ component Λ࢖ͬͯ component Λ࡞Δ DATA  (STATE) UI component

Slide 18

Slide 18 text

PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS ▸ େຊͷ component ʹ༩͑ΒΕͨσʔλ͕  ຤୺ͷ component ·Ͱ೾ٴ͢Δ͜ͱͰը໘͕࡞ΒΕΔ        ▸ σʔλ(ঢ়ଶ)Λߋ৽͢Δ౓ʹը໘͕࡞Γ௚͞ΕΔʂʁ  ˠ ࠷ऴతͳࠩ෼͚ͩΛ൓ө͢Δ࢓૊ΈΛ΋͍ͬͯΔ DATA  (STATE)

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

PDS࣮ݱͷํ޲ੑͦͷ̍ STATELESS COMPONENTS ▸ ෭࡞༻ͷͳ͍ؔ਺Λ૊Έ߹Θ͍͚ͤͯͩ͘  ඇৗʹϞδϡʔϧڧ౓ͷߴ͍ݎ࿚ͳ։ൃ͕Մೳ ▸ খͯ͘͞୯७ͳ΋ͷͷੵΈॏͶͰͰ͖͍ͯΔ ▸ Good! อकϑΣʔζʹਅՁΛൃش͢Δ ▸ Bad… ։ൃͷॳظஈ֊Ͱ͸ूதྗΛอͪͮΒ͍ DATA

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ REACT.JS ▸ Stateless components Λ࠷ॳʹ࣮ݱͨ͠ϥΠϒϥϦ ▸ React.js ͸σʔλΛ component Λը໘දࣔʹ  ม׵͢Δػೳ͔͠ͳ͍ʢϑϨʔϜϫʔΫͰ͸ͳ͍ʣ ▸ ࠩ෼Λ൓ө͢Δ࢓૊Έͱͯ͠ VirtualDOM Λར༻

Slide 24

Slide 24 text

STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ REACT.JS IS JUST A LIBRARY ▸ ౷ׅతͳΞʔΩςΫνϟ͸ผʹࢼߦࡨޡ͕ਐΊΒΕ͍ͯΔ ▸ Flux  σʔλͷมԽ͕ى͜Δ৔ॴΛҰͭʹ·ͱΊɺ  σʔλϑϩʔΛ̍ํ޲ʹ͢Δ ▸ Redux  Flux ͔Β೿ੜͨ͠ΞʔΩςΫνϟ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

PDS࣮ݱͷํ޲ੑͦͷ̎ 2 WAY BINDINGS ( DATA BINDING ) ▸ ViewModel(୯ͳΔΦϒδΣΫτ)ͷϓϩύςΟ(ঢ়ଶ)ʹ  ը໘σβΠϯΛఆٛͨ͠View(HTML)Λએݴతʹඥ෇͚Δ          ViewModel ͷϓϩύςΟΛมߋˠ View ʹ൓ө  View(formͳͲ)Λૢ࡞ˠ ViewModel ʹ൓ө View  (HTML) data binding ViewModel (JS Object)

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ Aurelia (2016.7.27 v1 Release) ▸ 2 way bindings ʹΑΔ PDSͱ  IoC, DI Λ౷ׅతʹఏڙ͢Δϑϧ૷උͷϑϨʔϜϫʔΫ ▸ ͢΂ͯͷػೳ͕ϓϥάΠϯˠ ஔ͖׵͑Մೳ ▸ ϘΠϥʔϓϨʔτʢ͍ͭ΋ॻ͘ढจʣΛపఈతʹഉআ͓ͯ͠Γɺ ؆ܿʹ΍Γ͍ͨ͜ͱΛදݱͰ͖Δ ▸ View ͱ ViewModel ͸໊લͰରԠ෇͚ΒΕΔ  Կ΋ॻ͔ͳ͚Ε͹ඪ४తͳڍಈ / ໌ه͢Ε͹ѹ౗తͳࣗ༝

Slide 35

Slide 35 text

PDS࣮ݱͷํ޲ੑ PDS ࣮ݱͷํ޲ੑͱ୅දతͳϑϨʔϜϫʔΫ ▸ Stateless Components ▸ React.js, Riot.js ▸ 2 way bindings ▸ Vue, Angular, Aurelia  →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ

Slide 36

Slide 36 text

PDS࣮ݱͷํ޲ੑ ڈ೥४උ͕΍ͬͱ੔ͬͨͱ͸Ͳ͏͍͏͜ͱ͔ ▸ Vue, Angular, Aurelia  →ڈ೥ͷ݄̓ʙ݄̕ʹग़ἧͬͨ ▸ ͦΕͧΕެࣜͷ CLI (Scaffolding Tool) ͕෇͍͍ͯΔ ▸ ίϚϯυҰൃͰ։ൃΛ࢝ΊΒΕΔ  ؀ڥߏஙͱ͍͏นΛӽ͑Δ଍৔͕੔ͬͨ  (task runner, module loader, …etc)

Slide 37

Slide 37 text

JS ϑϨʔϜϫʔΫͷٕज़πϦʔ JS ᴈ໌ظ εςʔτϑϧWebʹடংΛ React.js Windows Presentation Foundation  (WPF)→ݩωλ 2 way binding lib  ιʔεΛಡΉͷʹྑ͍ Vue v1 Vue v2 PDS ͷͨΊͷ  2 way bindings Knockout Λ࢖ͬͨ  ϑϨʔϜϫʔΫ FLUX REDUX

Slide 38

Slide 38 text

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