Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSフレームワーク選定の勘所
Search
Kenta Suzuki
February 18, 2017
Programming
38
13k
JSフレームワーク選定の勘所
大づかみなお話です
結論: 課題を知ったらなんでもいいから手を出してみよう!
(細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか)
Kenta Suzuki
February 18, 2017
Tweet
Share
More Decks by Kenta Suzuki
See All by Kenta Suzuki
Aurelia をプロダクトで使う話
sukobuto
0
970
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
830
DROBEの生成AI活用事例 with AWS
ippey
0
140
技術を改善し続ける
gumioji
0
110
GAEログのコスト削減
mot_techtalk
0
120
楽しく向き合う例外対応
okutsu
0
570
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
ML.NETで始める機械学習
ymd65536
0
220
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
890
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
1
340
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
The Language of Interfaces
destraynor
156
24k
Code Reviewing Like a Champion
maltzj
521
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GraphQLとの向き合い方2022年版
quramy
44
13k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Become a Pro
speakerdeck
PRO
26
5.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Transcript
બఆͷצॴ JSϑϨʔϜϫʔΫ
ҠΓมΘΓͷܹ͍͠ ऑڧ৯ͷੈքʂʁ 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 COMPONENTS PDS ࣮ݱͷํੑͦͷ̍
PDS࣮ݱͷํੑͦͷ̍ STATELESS COMPONENTS ▸ σʔλ(ঢ়ଶ)Λը໘දࣔʹม͢Δ’ؔ’Λఆٛ͢Δ ͦͷؔͷ͜ͱΛ component (෦) ͱݺͿ
▸ component Λͬͯ component Λ࡞Δ DATA (STATE) UI component
PDS࣮ݱͷํੑͦͷ̍ STATELESS COMPONENTS ▸ େຊͷ component ʹ༩͑ΒΕͨσʔλ͕ ͷ component ·Ͱٴ͢Δ͜ͱͰը໘͕࡞ΒΕΔ
▸ σʔλ(ঢ়ଶ)Λߋ৽͢Δʹը໘͕࡞Γ͞ΕΔʂʁ ˠ ࠷ऴతͳ͚ࠩͩΛө͢ΔΈΛ͍ͬͯΔ DATA (STATE)
PDS࣮ݱͷํੑͦͷ̍ STATELESS COMPONENTS React.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 BINDINGS PDS ࣮ݱͷํੑͦͷ̎
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.js Windows Presentation Foundation (WPF)→ݩωλ
2 way binding lib ιʔεΛಡΉͷʹྑ͍ Vue v1 Vue v2 PDS ͷͨΊͷ 2 way bindings Knockout Λͬͨ ϑϨʔϜϫʔΫ FLUX REDUX
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
JS ϑϨʔϜϫʔΫબఆ React.js Vue v2 ͦͷଞʹ͍Ζ͍Ζ…
ڵຯͷ͋Δ ํͥͻ͝ ࿈བྷΛʂ @ken_zookie
͋Γ͕ͱ͏͍͟͝·ͨ͠