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
950
Other Decks in Programming
See All in Programming
みんなでプロポーザルを書いてみた
yuriko1211
0
260
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
180
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
イベント駆動で成長して委員会
happymana
1
320
Realtime API 入門
riofujimon
0
150
subpath importsで始めるモック生活
10tera
0
310
Ethereum_.pdf
nekomatu
0
460
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
330
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Building Applications with DynamoDB
mza
90
6.1k
It's Worth the Effort
3n
183
27k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Fireside Chat
paigeccino
34
3k
The Language of Interfaces
destraynor
154
24k
Gamification - CAS2011
davidbonilla
80
5k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Done Done
chrislema
181
16k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠