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
1k
Other Decks in Programming
See All in Programming
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
私はどうやって技術力を上げたのか
yusukebe
43
17k
Catch Up: Go Style Guide Update
andpad
0
170
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
CSC509 Lecture 06
javiergs
PRO
0
240
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
470
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Rails Girls Zürich Keynote
gr2m
95
14k
Context Engineering - Making Every Token Count
addyosmani
5
180
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
For a Future-Friendly Web
brad_frost
180
9.9k
Agile that works and the tools we love
rasmusluckow
331
21k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠