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
940
Other Decks in Programming
See All in Programming
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
Java ジェネリクス入門 2024
nagise
0
610
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Identifying User Idenity
moro
6
7.9k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Side Projects
sachag
452
42k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Agile that works and the tools we love
rasmusluckow
327
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
It's Worth the Effort
3n
183
27k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing the Hi-DPI Web
ddemaree
280
34k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠