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
Teruo Kunihiro
February 12, 2017
Programming
0
2.3k
JSフレームワークを振り返る
合同勉強会 in 福岡で発表した資料
https://connpass.com/event/49117/
Teruo Kunihiro
February 12, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1.1k
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
decksh - a little language for decks
ajstarks
4
21k
実践!App Intents対応
yuukiw00w
0
110
Vibe coding コードレビュー
kinopeee
0
400
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Documentation Writing (for coders)
carmenintech
73
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How GitHub (no longer) Works
holman
314
140k
Raft: Consensus for Rubyists
vanstee
140
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
How STYLIGHT went responsive
nonsquared
100
5.7k
4 Signs Your Business is Dying
shpigford
184
22k
Music & Morning Musume
bryan
46
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
JSϑϨʔϜϫʔΫΛ ৼΓฦΔ IN 2017 2017/02/11 Teruo Kunihiro
➤ ࡢ9݄͔Β גࣜձࣾNulab & Ԭ ➤ ۀ: HTML5ͷCacooͷ։ൃͱ͔ ➤ ࠓ·ͰJS։ൃҊ͕݅ଟ͔ͬͨͷͰओʹJSॻ͍
ͯ·͢ Twitterͱ͔Qiitaͱ͔ͨ·ʹGithub @knhr__ ➤ I love JavaScript!!But I want to study another languages. ࣗݾհ
CACOOʹ͍ͭͯ
͡Ίʹ ϑϩϯτΤϯυʹ͓͍ͯͷॲཧͷϓϩηε Event + DataStore => DOM ͔͠͠DOMͷมͷࡍʹViewʹ߹ΘͤͨDataͷՃ͕ඞཁ Event or
DataStore => DataStore + Data(For View) => DOM ͜ͷॲཧΛղ͘ͷ͕ϑϨʔϜϫʔΫ
͡Ίʹ ➤ ༻ޠ Model = DataStore, DataͷೖΕɺϏδωεϩδοΫ Controller = Πϕϯτड͚ͨΓɺ߹ʹΑͬͯView༻ͷσʔλ
ՃɺEvent Handleɻ ViewModel = View༻ͷσʔλՃɺEventͷϋϯυϦϯάɺσʔ λͷอ࣋ View = ͨͩͷςϯϓϨʔτ, JSXͱ͔ => ͨͩͷݴ༿ͳͷͰదͳ֓೦ͱͯ͠ଊ͑Δ
JSϑϨʔϜϫʔΫԿΛ͍·͔ͨ͠ʁ ➤ Backbone.js ➤ Knockout.js ➤ angular ➤ React ➤
Polymer ➤ riot.js ➤ angular2 ➤ Vue
ͦͷมԽʁ ➤ Componentࢦ ➤ jQueryʹΑΔDOMૢ࡞͔ΒVirtualDOM ➤ Stateཧํ๏ͷมԽ
WEBCOMPONENTͱ ➤ 2011ʹఏҊ͞ΕͨΞΠσΞ ➤ ωΠςΟϒͳAPIݱࡏChormeͷΈʹ࣮͞Ε͍ͯΔ ➤ ༷ࡦఆʹߤ͓ͯ͠Γͣͬ͜͜ͱDraftঢ়ଶ
WEBCOMPONENTͱ DOMͰݴ͑ҎԼͷΑ͏ͳλάΛࢦ͢ <hello-world></hello-world> => <div>hello world</div> DOMɺৼΔ͍ɺState(JS)ɺσβΠϯ(CSS)ɺ(JS)͕ΧϓηϧԽ͞ Εͨλά Data(for View)
+ DOM ϑϩϯτΤϯυͷViewͱಠཱͨ͠ίϯϙʔωϯτͷू߹ମͱଊ͑ Δ͜ͱ͕Ͱ͖Δ
COMPONENTͷ(ͩͬͨ) ➤ DOMͷߋ৽ͷॲཧ͕ॏ͍ DOMؙ͝ͱΛೖΕସ͑ΔͨΊDOMͷߋ৽ॲཧ͕ॏ͔ͬͨɻ ͔͠͠Componentͷߋ৽ҰׅͰߦΘͳ͍ͱෆ߹͕ى͖Δ ࠓ·Ͱͦ͜ΛjQueryͰؤுΔɻ ͘͠Two-way-data-bindingͰؤு͍ͬͯͨ jQueryͰؤுΓͨ͘ͳ͍ɻɻɻ
COMPONENTͷվળ DOMͷߋ৽ΛͰࠩߋ৽(Virtual DOMͳͲʹΑΓ)Ͱߦ͏ϑϨʔϜϫʔΫ͕ ಄͖ͯͨ͠ ࠩߋ৽ϥΠϒϥϦͤʹͰ͖Δ͜ͱʹΑͬͯɺରͷComponentͷߋ৽ ΛҰׅͰߦ͑ΔΑ͏ʹͳͬͨ ͨͩ͠WebComponent࣏తʹ࣮ݱ·ͩ·ͩͬΆ͍ͷͰ֤छϑϨʔϜ ϫʔΫ͕ݸผʹؤு͍ͬͯΔঢ়گ ͳͷͰWebComponentͷํͱׂͱҧ͏ͷ͋ΔɻReactͱ͔ https://github.com/reactjs/react-future/tree/master/02%20-
%20Web%20Components
COMPONENTࢦʹ͍ͭͯ ͰෳͷComponentͲͷΑ͏ʹ࿈ܞ͢Δͷ͔ ࢠͷίϯϙʔωϯτ͕ࢠίϯϙʔωϯτʹରͯ͠σʔλΛྲྀ͠ɺΠϕ ϯτΛड͚औΔΑ͏ʹಈ࡞ͤ͞Δ Component͕૿͑ͨΒঢ়ଶͷཧେมɻɻɻ
ΞϓϦέʔγϣϯͷSTATEཧ ➤ ෳͷComponentͷStateΛݸผʹ࿈ܞͤͯ͞ཧͤ͞Δͷ ݁ߏେม ➤ ͢ΔͱStateཧ·ͨผͰߦ͍͍ͨ!!ͬͯͳΔ ➤ શମͷStateཧݱࡏFluxϥΠΫ(͍͍ͩͨRedux)ͳͷ ͕ओྲྀͱͳ͍ͬͯΔ
STATEͷมભ ➤ MVCϑϨʔϜϫʔΫ ➤ ํόΠϯσΟϯά ➤ Elm / Flux /
Redux ͷΑ͏ͳؔܕϥΠΫͳStateཧ
MVCͱ ➤ Model - ΞϓϦݻ༗ͷσʔλ, ϏδωεϩδοΫ ➤ View - HTML,
ModelͷΛදࣔ ➤ Controller - ViewͷೖྗΛड͚औΔ, ModelΛૢ࡞ View͕ModelΛࢀরͯ͠ඳը͢Δɻ
MVCͱ ➤ ҰํํͳσʔλͷྲྀΕ ➤ ViewModelΛࢹ͍ͯ͠Δ ➤ ControllerΠϕϯτΛड͚ औͬͯModelΛߋ৽͢ΔͷΈ ➤ දతͳϑϨʔϜϫʔΫ
Backbone.js
MVCͱ VitrualDOMҎલͷMVCʹ͍͔͕ͭ͋ͬͨ͘ɻ ➤ DOMঢ়ଶΛอ͍࣋ͯ͠ΔͨΊʹ͠DOMΛશʹ࠶ඳը͢ ΔͱࣦΘΕΔσʔλ͕ଘࡏ͢ΔɻEventListernerͳͲ ➤ DOMͷૢ࡞ͱ͍ͯͨΊʹɺஞҰ࠶ඳըΛߦ͏ͷύ ϑΥʔϚϯεΛ͔ͳΓࣦ͏͜ͱʹͳΓ͏Δ ➤ ࠶ඳըͤͨ͘͞ͳ͍ͷͰɺControllerʹσʔλΛอ࣋ͤͯ͞Ξ
ϓϦέʔγϣϯͷঢ়ଶ͕͙ͪΌ͙ͪΌʹͳͬͨʢମݧஊʣ
MVVMͱ ➤ MVCΛݩʹͨ͠σβΠϯύλʔϯ ➤ ViewΛϏδωεϩδοΫΞϓϦέʔγϣϯͷৼΔ͍͔Β MVCΑΓ໌֬ʹͤ͞Δ ➤ Model - MVCͱಉ͡ɻViewModelͱ݁߹
➤ ViewModel - ModelͱViewͷσʔλͷՃɺσʔλͷอ࣋ ➤ View - ViewModelͱͷ݁߹ɻData-bindings, Event
MVVMͱ ➤ ViewModelͱͷؔ࿈Λ࣋ͨ ͳ͍ɻViewৗʹViewModelͱ ಉظ͢Δ ➤ σʔλͷํҰํํͰͳ͍ ➤ Ͳ͏ΒTwo-way-binding͕͋Δ ͷΛMVVMͱݴͬͯΔͬΆ͍
➤ ComponentࢦʹࣅͯViewʹର ͢ΔStateΛอ࣋͢Δ ➤ දతͳϥΠϒϥϦ Knockout.js
MVVMͱ ➤ όΠσΟϯά͞Ε͍ͯΔσʔλ෦ͷΈͷDOMΛߋ৽͢Δ͜ ͱͰɺMVVMMVCͷஞ࣍શ࠶ඳըͷΛղܾͨ͠ ➤ UI͝ͱʹViewModelΛ࡞͢Ε͍͍ͷͰUIͷฒྻ։ൃΛ؆ ୯ʹͨ͠ʢComponentࢦʣ ͔͠͠MVVMҎԼͷΛҾ͖ى͜͠·ͨ͠ ➤ εςʔτϑϧͳ֊ͷ૿ՃʹΑΓσʔλͷෳࡶ্͕ͬͨ
FLUX(REDUX)ͱ ➤ 2014͝ΖʹFacebook͕ൃදͨ͠Ұํํσʔλϑϩʔ ➤ ؔܕνοΫͳStateཧϑϨʔϜϫʔΫ ➤ ReduxFluxϥΠΫͳσʔλϑϩʔͷछྨͷҰͭ https://facebook.github.io/flux/docs/in-depth-overview.html#content
ͦͯ͠FLUX ➤ React͕ग़͖ͯͯDOMͷஞ࣍ߋ৽ͷίετ͕ݮͬͨ => σʔλͷมߋΛݕؙͯ͠͝ͱViewΛೖΕସ͑ΔॲཧΛؾ ܰʹߦ͑ΔΑ͏ʹͳͬͨ ➤ MVVM(Component)εςʔτϑϧͳ෦Λ૿ͯ͠͠ ·ͬͨ ➤
ͦͯ͠ModelҎ֎εςʔτϨεͳҰํํσʔλϑϩʔͰ͋ ΔMVCతͳΞʔΩςΫνϟ͕ඞཁͱͳͬͨ
TODO MVCΛݟͯΈΑ͏ ➤ TodoͷMVCͷྫΛݟͯݟ·͠ΐ͏
TODO MVCΛݟͯΈΑ͏ ➤ Model͕૿͑Δ ➤ View, Modelͷґଘ͕ؔෳ ࡶʹͳΔ ➤ ༷ʑͳσʔλͷߋ৽ʹରͯ͠
͜ͷΞϓϦέʔγϣϯ༧ଌ Մೳͳঢ়ଶΛҡ࣋Ͱ͖ΔͰ͠ΐ ͏͔
FLUXͳΒ ➤ Storeͷґଘؔ֊ߏʹ อͨΕɺͯ͢ͷStoreͷߋ৽ ͕ߦΘΕΔ·ͰViewʹө͞ Εͳ͍ ➤ StoreΛ৮Δ͜ͱ͕Ͱ͖ͳ ͍ɻಛఆͷAction͔Βৗʹ ಉ݁͡ՌΛಘΔ͜ͱ͕Ͱ͖Δ
ͨΊʹΞϓϦέʔγϣϯͷঢ় ଶΛ༧ଌՄೳʹͰ͖Δ
FLUXͱ ➤ Α͘ݟΔͱMVCͷম͖͠Ͱશ͘৽͍֓͠೦ͱ͍͏͜ͱͰ ͳ͍͕ɺΑΓڧ͍نͰറΒΕΔΠϝʔδ ➤ ΞϓϦέʔγϣϯͷঢ়ଶStoreʢͱComponentʣʹ͚ͩด͡ ࠐΊΒΕΔͨΊʹMVVMͷ࣌ΑΓ༧ଌՄೳͳΞϓϦέʔγϣ ϯ ➤ Stateͷߋ৽ৗʹ
f(State, Actions) => NewState
FLUX(REDUX)ͷ ➤ ݁ߏɻҰͭͷػೳΛՃ͢ΔͨΊʹView࡞ͬͯAction ࡞ͬͯStoreͷߋ৽࡞ͬͯStoreͷใΛComponentʹͭͳ͍Ͱ ͱͨ͘͞ΜͷϑΝΠϧΛฤू͢Δඞཁ͕͋Δɻ ➤ ඇಉظͷॲཧɺFormͷσʔλɺRoutingͷσʔλͳͲΛ্ख͘ ѻ͓͏ͱࢥ͏ͱ͍ΖΜͳϥΠϒϥϦΛೖΕΔ͜ͱʹͳͬͯͱ ʹ͔͘ർΕΔ
ྫ͑REDUX
·ͱΊɾݱঢ় ➤ ίϯϙʔωϯτԽ(WebComponentؔͳ͘)Λߟྀ͞Ε͍ͯ Δ ➤ VirtualDOMతͳDOMΛࠩͰඳըΛߦ͏ͷ͕ଟ͍ ➤ MV*తͳΞϓϩʔν͕ѱ͍Θ͚Ͱͳ͍ ➤ ݱঢ়Reduxʹ͕͋ΔͷͰɺ͍ΖΜͳσʔλϑϩʔͷ
StateཧϑϨʔϜϫʔΫ͕ཚཱ͍ͯ͠Δɻ ➤ ͱ͍͑࠷ۙReduxϥΠΫͳͷ͕ଟ͍ͷͰษڧ͍ͨ͠ਓ ਓ·ͣReduxΛͬͯΈΑ͏!!
༨ஊ(CACOOͷHTML5Խͷ) ➤ HTMLͷViewriotͬͯΔ ➤ riotcomponentࢦͷϑϨʔϜϫʔΫɻVirtualDOMͰͳ ͍͕DOMͷࠩߋ৽Λߦͬͯ͘ΕΔ ➤ StateཧࣗલͰͬͯΔɻComponent͝ͱͷStateͱΞϓϦ શମͷStateΛཧ ➤
ΞϓϦશମͷStateindexedDBʹ֨ೲ͍ͯ͠Δ