大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
બఆͷצॴJSϑϨʔϜϫʔΫ
View Slide
ҠΓมΘΓͷܹ͍͠ऑڧ৯ͷੈքʂʁJavaScriptͪ΄ʔ
JS ऑڧ৯ͷੈքͳͷ͔JS ϑϨʔϜϫʔΫ …ڈͬͱ४උ͕ͬͨʂ▸ ͜Ε·Ͱˠ ੈքతͳࢼߦࡨޡʹΑΓͨ͘͞Μੜ·Εͨ▸ ʮ৽͍͠ͷ͕ग़Δʹ͍͍͔ͭͯͳ͍ͱʯˠצҧ͍ʂ▸ ͲΜͳߟ͑ํͷͱʹࢼߦࡨޡ͕ߦΘΕ͖ͯͨͷ͔ͦͷࠜװΛΕڪΕΔ͜ͱͳ͍ʂ
ࠓճ͍͑ͨ͜ͱ▸ JavaScript ϑϨʔϜϫʔΫͷߟ͑ํͷࠜຊ▸ ͲΜͳબࢶ͕͋ͬͯɺͲ͜ͰΉ͖ͳͷ͔▸ ڈͬͱ४උ͕ͬͨͱͲ͏͍͏͜ͱ͔▸ ࢲͷ͖ͳ JavaScript ϑϨʔϜϫʔΫʹ͍ͭͯগ͠
ࠓ͞ͳ͍͜ͱ▸ ଞͷํ͕͢ϑϨʔϜϫʔΫʹ͍ͭͯͷৄ͍͜͠ͱ▸ MVC MVVM ʹ͍ͭͯͷৄ͍͜͠ͱ▸ JavaScript ͦͷͷͷਐԽʹ͍ͭͯ
զʑͷ՝Կͳͷ͔ߟ͑ํͷࠜװ
զʑͷ՝Կͳͷ͔εςʔτϑϧͳWEB։ൃͱ͍͏৽ͨͳબࢶ▸ ͦΕ·Ͱͷ Web ։ൃ▸ Webαʔό͕ͯ͢ʢεςʔτϨεʣ JS ͪΐͬͱಈ͖Λτοϐϯά͢ΔͨΊͷͷ▸ ৽ొεςʔτϑϧWeb▸ ಉ͡ը໘্ͰΰϦΰϦಈ͘ΞϓϦͷΑ͏ͳΓ ϒϥβଆʹओಋݖ͕ҠΓ࢝Ίͨ
զʑͷ՝Կͳͷ͔jQuery ͕ͯ͢Λࢧ͍ͯͨ࣌͠▸ αʔό͔Βདྷͨ HTML ΛಡΈऔͬͯ ಈ͖ͷ͋Δ UI ʹஔ͖͑Δ ฏͳੈք▸ Ajax ௨৴ʹΑͬͯεςʔτϑϧͳWeb ʹՄೳੑΛײ࢝͡ΊΔ▸ σεϩʔυ͕։͘
զʑͷ՝Կͳͷ͔৽ͨͳબࢶ͕എෛ͖ͬͯͨ՝ᶃ▸ ݟͨͱৼΔ͍ (UI) Λෳࡶʹ࡞ΓࠐΉ͜ͱ͕Ͱ͖Δ ˠ ίʔυͷෳࡶ͞Ճతʹ্ঢ࢝͠ΊΔ… → ԿΛͲ͜ʹॻ͘ͷ͔ཧ͢Δඞཁ͕͋ΔΑͶʂ
զʑͷ՝Կͳͷ͔ᶃԿΛͲ͜ʹॻ͘ͷ͔ཧ͢Δඞཁ͕͋Δ▸ Inverse of Control (IoC)▸ ཧ͢Δํ๏Ͱͳ͘Γ͍ͨ͜ͱʹ͢Δ▸ ҊͷҰ͕ͭ MVC▸ ࢧԉ͢Δ֓೦͕ DI▸ JS ϑϨʔϜϫʔΫʹݶͬͨͰͳ͍͠ɺવͩΑͶɻ
զʑͷ՝Կͳͷ͔Backbone ͷొʹΑΓடংΛऔΓ͔ͨ͠ʹݟ͑ͨ▸ IoC (MVC) ΛऔΓೖΕͯશମͷݟ௨͠ΛΑͨ͘͠▸ ϧʔςΟϯάػೳΛखʹೖΕͨ (Client side routing) #/hoge~▸ ը໘Λಈ͔͢ϩδοΫ jQuery Ͱखଓ͖తʹهड़͍ͯͨ͠ ˠ ΓσβΠϯ͕มΘΔͱ ৼΔ͍ϩδοΫमਖ਼͢Δ͜ͱʹ
զʑͷ՝Կͳͷ͔৽ͨͳબࢶ͕എෛ͖ͬͯͨ՝ᶄ▸ UIʹؔͷͳ͍ϏδωεϩδοΫ ˠ UIͷϩδοΫʹৼΓճ͞Ε࢝ΊΔ… ɹ ঢ়ଶ͕UIʹΑͬͯอ࣋…σβΠϯΛม͑Δͱ͋͋͋͋͋ → UIͱϏδωεϩδοΫΛ͢Δඞཁ͕͋ΔΑͶʂ
զʑͷ՝Կͳͷ͔UIͱϏδωεϩδοΫΛ͢Δඞཁ͕͋Δ▸ UI ʹؔ͢ΔϩδοΫͷ Presentation Domain Separation = PDS ▸ JS ϑϨʔϜϫʔΫ PDS Λ࣮ݱ͢ΔͨΊʹ࡞ΒΕΔʂը໘ͷݟͨৼΔ͍ԿΛͲ͏ݟͤΔͷ͔௨৴ɾͦͷଞͷΦϒδΣΫτ͕ ෳࡶʹ࿈ܞ͠߹͏ੈքͲ͏Γ͚Δʁʁ
PDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨ!?JSϑϨʔϜϫʔΫ
JSϑϨʔϜϫʔΫPDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨPDS ࣮ݱͷํੑ2ͭ͋Δ▸ Stateless Components▸ 2 way binding (data binding)
STATELESS COMPONENTSPDS ࣮ݱͷํੑͦͷ̍
PDS࣮ݱͷํੑͦͷ̍STATELESS COMPONENTS▸ σʔλ(ঢ়ଶ)Λը໘දࣔʹม͢Δ’ؔ’Λఆٛ͢Δ ͦͷؔͷ͜ͱΛ component (෦) ͱݺͿ ▸ component Λͬͯ component Λ࡞ΔDATA (STATE)UIcomponent
PDS࣮ݱͷํੑͦͷ̍STATELESS COMPONENTS▸ େຊͷ component ʹ༩͑ΒΕͨσʔλ͕ ͷ component ·Ͱٴ͢Δ͜ͱͰը໘͕࡞ΒΕΔ ▸ σʔλ(ঢ়ଶ)Λߋ৽͢Δʹը໘͕࡞Γ͞ΕΔʂʁ ˠ ࠷ऴతͳ͚ࠩͩΛө͢ΔΈΛ͍ͬͯΔDATA (STATE)
PDS࣮ݱͷํੑͦͷ̍STATELESS COMPONENTSReact.js ެࣜαΠτΑΓҾ༻ https://facebook.github.io/react/
PDS࣮ݱͷํੑͦͷ̍STATELESS COMPONENTS▸ ෭࡞༻ͷͳ͍ؔΛΈ߹Θ͍͚ͤͯͩ͘ ඇৗʹϞδϡʔϧڧͷߴ͍ݎ࿚ͳ։ൃ͕Մೳ▸ খͯ͘͞୯७ͳͷͷੵΈॏͶͰͰ͖͍ͯΔ▸ Good! อकϑΣʔζʹਅՁΛൃش͢Δ▸ Bad… ։ൃͷॳظஈ֊ͰूதྗΛอͪͮΒ͍DATA
STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
PDS࣮ݱͷํੑͦͷ̍STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫ▸ React.js▸ Riot.js
STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫREACT.JS▸ Stateless components Λ࠷ॳʹ࣮ݱͨ͠ϥΠϒϥϦ▸ React.js σʔλΛ component Λը໘දࣔʹ ม͢Δػೳ͔͠ͳ͍ʢϑϨʔϜϫʔΫͰͳ͍ʣ▸ ࠩΛө͢ΔΈͱͯ͠ VirtualDOM Λར༻
STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫREACT.JS IS JUST A LIBRARY▸ ౷ׅతͳΞʔΩςΫνϟผʹࢼߦࡨޡ͕ਐΊΒΕ͍ͯΔ▸ Flux σʔλͷมԽ͕ى͜ΔॴΛҰͭʹ·ͱΊɺ σʔλϑϩʔΛ̍ํʹ͢Δ▸ Redux Flux ͔Βੜͨ͠ΞʔΩςΫνϟ
STATELESS COMPONENTS Λجૅͱͨ͠ϑϨʔϜϫʔΫRIOT.JS▸ React.js ͷߟ͑ํΛͱʹɺΑΓ؆୯ʹॻ͖࢝ΊΒΕΔΑ͏ʹ࡞ΒΕͨখنϑϨʔϜϫʔΫ▸ ϧʔςΟϯάػೳ͕͍ͭͯΔ▸ Web Components ͷ༷ΛઌऔΓ͢Δจ๏Λ࠾༻▸ ࠩΛө͢ΔΈΛಠ࣮ࣗ
JSϑϨʔϜϫʔΫPDSΛ࣮ݱ͢ΔͨΊʹੜΈग़͞Ε͍ͯͨPDS ࣮ݱͷํੑ2ͭ͋Δ▸ Stateless Components▸ 2 way bindings (data binding)
2 WAY BINDINGSPDS ࣮ݱͷํੑͦͷ̎
PDS࣮ݱͷํੑͦͷ̎2 WAY BINDINGS ( DATA BINDING )▸ ViewModel(୯ͳΔΦϒδΣΫτ)ͷϓϩύςΟ(ঢ়ଶ)ʹ ը໘σβΠϯΛఆٛͨ͠View(HTML)Λએݴతʹඥ͚Δ ViewModel ͷϓϩύςΟΛมߋˠ View ʹө View(formͳͲ)Λૢ࡞ˠ ViewModel ʹөView (HTML)data binding ViewModel(JS Object)
PDS࣮ݱͷํੑͦͷ̎2 WAY BINDINGS ( DATA BINDING )ViewModel(JS Object)View (HTML)
2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫ
PDS࣮ݱͷํੑͦͷ̎2 WAY BINDINGSΛجૅͱͨ͠ϑϨʔϜϫʔΫ▸ Vue▸ Angular▸ Aurelia
2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫVue (2016.9.30 v2 -Ghost IN The Shell- Release)▸ binding ॳ৺ऀʹ͓͢͢Ί▸ ͍͢͞ ɹશମతͳߏͷΘ͔Γ͢͞ ɹߏΛѲ͢ΔͨΊͷใྔͷద͞▸ ߏͷΘ͔Γ͢͞ن֦େ࣌ʹҖྗΛൃش
2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫAngular (2016.9.15 v2 -just call me “Angular”- Release)▸ 2 way bindings ʹΑΔ PDSͱ IoC, DI Λ౷ׅతʹఏڙ͢ΔϑϧඋͷϑϨʔϜϫʔΫ▸ ຆͲͷػೳ͕ಠ࣮ࣗ͞Ε͍ͯΔ (jQuery తͳػೳ)▸ ίϛϡχςΟ͕׆ൃͰඇৗʹେ͖͍ˠΤίγεςϜ͕ൃୡ▸ εϚϗΞϓϦΛJSͰ։ൃ͢Δ Apache Cordova Λࢧ͑Δٕज़ͱͯ͠ɺΞϓϦΛ࡞Δͱ͖ʹΑ͘͏෦͕ἧ͍ͬͯΔ
2 WAY BINDINGS Λجૅͱͨ͠ϑϨʔϜϫʔΫAurelia (2016.7.27 v1 Release)▸ 2 way bindings ʹΑΔ PDSͱ IoC, DI Λ౷ׅతʹఏڙ͢ΔϑϧඋͷϑϨʔϜϫʔΫ▸ ͯ͢ͷػೳ͕ϓϥάΠϯˠ ஔ͖͑Մೳ▸ ϘΠϥʔϓϨʔτʢ͍ͭॻ͘ढจʣΛపఈతʹഉআ͓ͯ͠Γɺ؆ܿʹΓ͍ͨ͜ͱΛදݱͰ͖Δ▸ View ͱ ViewModel ໊લͰରԠ͚ΒΕΔ Կॻ͔ͳ͚Εඪ४తͳڍಈ / ໌ه͢Εѹతͳࣗ༝
PDS࣮ݱͷํੑPDS ࣮ݱͷํੑͱදతͳϑϨʔϜϫʔΫ▸ Stateless Components▸ React.js, Riot.js▸ 2 way bindings▸ Vue, Angular, Aurelia →ڈͷ݄̓ʙ݄̕ʹग़ἧͬͨ
PDS࣮ݱͷํੑڈ४උ͕ͬͱͬͨͱͲ͏͍͏͜ͱ͔▸ Vue, Angular, Aurelia →ڈͷ݄̓ʙ݄̕ʹग़ἧͬͨ▸ ͦΕͧΕެࣜͷ CLI (Scaffolding Tool) ͕͍͍ͯΔ▸ ίϚϯυҰൃͰ։ൃΛ࢝ΊΒΕΔ ڥߏஙͱ͍͏นΛӽ͑Δ͕ͬͨ (task runner, module loader, …etc)
JS ϑϨʔϜϫʔΫͷٕज़πϦʔJS ᴈ໌ظεςʔτϑϧWebʹடংΛReact.jsWindowsPresentationFoundation (WPF)→ݩωλ2 way binding lib ιʔεΛಡΉͷʹྑ͍Vue v1 Vue v2PDS ͷͨΊͷ 2 way bindingsKnockout Λͬͨ ϑϨʔϜϫʔΫFLUXREDUX
FRIENDS OF 2 WAY BINDINGSFRIENDS OF STATELESS COMPONENTSJS ϑϨʔϜϫʔΫͷٕज़πϦʔJS ᴈ໌ظεςʔτϑϧWebʹடংΛReact.jsWindowsPresentationFoundation (WPF)→ݩωλ2 way binding lib ιʔεΛಡΉͷʹྑ͍Vue v1 Vue v2PDS ͷͨΊͷ 2 way bindingsKnockout Λͬͨ ϑϨʔϜϫʔΫFLUXREDUX
JS ϑϨʔϜϫʔΫબఆReact.jsVue v2ͦͷଞʹ͍Ζ͍Ζ…
ڵຯͷ͋Δํͥͻ͝࿈བྷΛʂ@ken_zookie
͋Γ͕ͱ͏͍͟͝·ͨ͠
sukobuto
furukawayasuto
usamik26
yutootsuka
sji
microcms
y0gi
yoshikouki
masayaaoyama
weddingpark
fishofprey
manfredsteyer
itohiro73
chrislema
lauravandoore
bcantrill
marktimemedia
aarron
caitiem20
gr2m
deanohume
dotmariusz
danielanewman
lemiorhan
bkeepers