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
革命と秩序とSPA
Search
joe_re
September 16, 2016
Technology
9
14k
革命と秩序とSPA
Frontend Meetup vol.1 LT
http://connpass.com/event/38112/
react + flux + floetypw
joe_re
September 16, 2016
Tweet
Share
More Decks by joe_re
See All by joe_re
Building Public API with GraphQL
joere
3
89
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1.1k
Real-Time applications with GraphQL
joere
0
240
Prisma2 with Graphql
joere
3
950
Go beyound static on Netlify
joere
1
290
Building Real-time Vue App
joere
4
4.6k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
320
Mock Native API in your E2E test
joere
2
1.2k
Data feching and caching on Apollo Client
joere
2
2.8k
Other Decks in Technology
See All in Technology
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
140
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
370
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
PO初心者が考えた ”POらしさ”
nb_rady
0
220
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
240
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
8k
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
160
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
110
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
CDK Vibe Coding Fes
tomoki10
0
100
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Side Projects
sachag
455
42k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
ֵ໋ͱடংͱSPA @joe_re
Who am I? • twitter: @joe_re • github: @joe-re •
freeeͱ͍͏ޒాͷ ձࣾͰಇ͍͍ͯ·͢ • ΫϥυձܭιϑτΛ ࡞͍ͬͯ·͢
None
͢͜ͱ • ϑϩϯτΤϯυͷύϥμΠϜγϑτͱ freeeͷؔΘΓํ • React + Fluxͷߏங • flowtypeʹΑΔtype-safe
flux
ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ http://qiita.com/joe-re/items/3b6730eb90dbeb2f8272
ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "KBYͷൃݟ 1SPUPUZQFKTɺK2VFSZͷ੮ר #BDLCPOFKTͷొ ϑϩϯτΤϯυʹ.7$͕࣋ͪࠐ·ΕΔ XBZCJOEJOHͷྲྀߦ .77. "OHVMBSKTɺ7VFKTɺ.BSJOPOFUUFKTFUDʜ ձܭGSFFFϩʔϯν
7JSUVBM%0.ͷొ %FLVɺ3FBDUɺ7VFKT Y FUDʜ main topics of fronted history of freee 2010 2005 2012 2014 څ༩ܭࢉGSFFFϩʔϯν ձܭGSFFF։ൃ։࢝ ձࣾઃཱGSFFFϩʔϯν now!
ॳظͷձܭfreeeͷϑϩϯτΤϯυ • 2012࣌ΑΖ͘͠ɺϑϩϯτBackbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.jsಈ͖Λ͚ͭΔఔ • SPAͰͳ͍
͕࣌ܦͭʹͭΕߴ·ΔSPAཉ
ঃʑʹBackboneMVCΛ ϑϧʹ׆͔ͨ͠ ΞʔΩςΫνϟ (ϖʔδ୯ҐͰͷSPA)
ͦͯ͠ߴ·ΔͭΒΈ
ͭΒΈ • Backbone.jsͷviewಉ࢜ͷΠϕϯτϋϯυϦϯάͭ Β͍ • ࢠؔʹ͋Δviewͷఆ͕ٛᐆດ • ։ൃऀ͕૿͑Δʹ͕ͨͬͯ͠ɺΠϕϯτͷߪಡղআ ϛεʹΑΔϝϞϦϦʔΫ͕ى͖ͨΓͯͨ͠ •
ͦͦDOMૢ࡞ਓؒͷΔ͜ͱ͡Όͳ͍
ֵ໋
freee-mvc-framework ͱ͍͏ࣾϑϨʔϜϫʔΫ͕ ੜ·Εͨ
freee-mvc-frameworkͰ ͍ͬͯΔ͜ͱ • backbone.jsΛϥοϓͯ͠ػೳڧԽ • viewͷΤϯτϦʔϙΠϯτͱͳΔ’page view’ͷՃ • backbone.jsͷϥΠϑαΠΫϧΛڧԽ •
renderingͷޙʹɺ1͚ͩΑΕΔϥΠϑαΠΫϧrenderingޙʹݺͿϥΠϑαΠΫ ϧͷՃͳͲͳͲ • ঢ়ଶཧڧԽͯ͠ɺin-documented͔ͦ͏Ͱͳ͍͔ͳͲΛߟྀͨ͠͏͑Ͱͷ ϋϯυϦϯάՄೳʹͨ͠ • ࢠؔͷDOMૢ࡞ɺΠϕϯτϋϯυϦϯάͷڧԽ • ͋ͱదʹศརౕΛಥͬࠐΉ
ͦΕͰDOMૢ࡞ͷͭΒΈ ܰݮ͞Εͳ͍͠ɺ ΠϕϯτϋϯυϦϯά ଟ͗ͯ͢ෳࡶոحͳͷ มΘΒͣ
ͦͷࠒੈؒͰ 2way-binding͕ྲྀߦ͠ɺ ੈ·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌ (2013ʙ2014)
࣌Λಉͯ͘͡͠ څ༩ܭࢉfreeeͷϩʔϯν
څ༩ܭࢉfreeeͷελοΫ • freee-js-framework(based on backbone) • Vue.js(MVVM) • શͳSPA
ͱ͜ΖͰMVVMͱ 7JFX .PEFM 7JFX.PEFM User 2way binding apply notify interaction
#BDLCPOF7JFX #BDLCPOF.PEFM 7VF
MVVMʹΑͬͯಘͨͷ • 2way-bindingʹΑΔDOMૢ࡞͔Βͷ։์ • Viewঢ়ଶΛ࣋ͨͳͯ͘ྑ͍(VM) • View͔ΒࡶͳϩδοΫͷআڈ
fin..?
ͦΜͳΘ͚ͳ͘ • ෳϞσϧ͕ొ͢ΔViewͰ VMͰؔ࿈Λ੍ޚ͢Δͷ͕ͭΒ͍ • ModelͱVMͷঢ়ଶͷ྆ํΛཧ͢ΔͷͭΒ͍ • ·ͱΊΔͱঢ়ଶཧͭΒ͍ • Object.obseveࢮΜͩ͠…
·͞ʹ͜Ε(͜ͷਤMVC͚ͩͲ) https://www.infoq.com/news/2014/05/facebook-mvc-flux
͋ͱVue.jsɺ0.10.6͔Β0.11.x ͷBreaking changesଟ͗͢ • https://github.com/vuejs/vue/wiki/0.10- to-0.11-migration-guide
freee-mvc-framework εέʔϧ͠ͳ͍ • ෳࡶԽ͍ͯ͘͠ΞϓϦέʔγϣϯʹ ঃʑʹଠଧͪͰ͖ͳ͘ͳ͍ͬͯΔ • ΠϕϯτϋϯυϦϯάViewͷࢠؔΛՄࢹԽ͢Δ͜ͱ ͕ୈҰͷతͳͷͰɺDOMૢ࡞ͷͭΒܰ͞ݮ͞Εͳ͍ • ύϥμΠϜͷมԽʹରԠ͢Δؾྗͳ͘ɺਰୀ͍ͯ͘͠
• ·͊ࣾಠࣗFWͷ࿏ͳΜͯ͜ΜͳͷͰ͢ΑͶ
ֵ໋
React + Flux
React͓͞Β͍ • FacebookͷViewϥΠϒϥϦ • ঢ়ଶཧΛపఈతʹview͔Βഉআ͢Δ (ঢ়ଶཧfluxʹΑΓStore) • Propsͱͯ͋͠ΔΛ͞ΕΔݶΓɺ ඞͣಉ͡ϨϯμϦϯάΛ͢ΔؔܕతΞϓϩʔν (ReactDOMมثʹͳΔ)
• ࠩΛܭࢉͯ͠ө͢ΔɺVirtualDOMͷ࣮
Flux͓͞Β͍ • ୯ํσʔλϑϩʔΛ࣮ݱ͢Δ࣮ύλʔϯ • ActionCreator → Dispatcher → Store →
View • Component͔Βঢ়ଶΓ͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫStoreʹͭΊ͜ΈɺViewʹඳըʹඞཁͳใ͕ߏࡁΈ Ͱ௨͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
2015ॳ಄ɺԶ͕࠷ڧͷFlux ࣮ͩઓ૪ຄൃ • Alt • Reflux • Fluxxor • Fluxible
• nuclear-js • Arda • Material Flux • Delorean • Flummox • Redux • etc...
ଟ͍…
ԿΛબͿ͔ ͋Δ͍બͳ͍͔
Reduxͷ಄(20155݄) • શͯͷঢ়ଶ1ͭͷJSONͰද͢(Single Store) • Data Flowͷొਓ(Action, Reducer) PureͳؔʹͳΔ •
state͕ActionΛ௨ͯ͡ߋ৽͞ΕΔࡍʹɺ reducerͱ͍͏PureͳؔΛ௨͢͜ͱͰߋ৽͢Δ
ReduxͷੈքΛͬ͘͟Γ
طଘ࣮͕͋Δͱ͜Ζʹ ಋೖ͢Δ্ͰɺReduxͭΒ͍
ͪͳΈʹ࠷ॳʹಋೖ͞Εͨػೳ ͜Ε(on Backbone view)
Single StoreͲ͜ʹ ࣋ͭ…??
flux-utilsΛ͏ͱ͍͏બ • ReduxΛ࢝Ίͱ͢Δflux࣮Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ facebook͕͍͍ͱ͜औΓͨ͠(ओ؍) • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘ Storeͷϕʔε࣮ͱContainerͱ͍͏֓೦͕Ճ͞Εͨ • fluxʹର͢ΔཉΛશͯຬͨ͢ͷͰͳ͍ (ϛχϚϜͳ࣮ͰɺϩοΫΠϯ͕গͳ͍)
• ࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘ εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ͋Δ
αϙʔτൣғখ͍͞ (ϑϨʔϜϫʔΫͰͳ͍)
Reduxͱͷڞ௨ • ContainerComponent → Container • Reducer → Reduce Store
flux-utilsͷ͍͍ͱ͜Ζ • طଘͷflux͔Βဃ͠ͳ͍ • αϙʔτൣғ͕খ͍͞ɺϩοΫΠϯ͕গͳ ͍(͍͟ͱͳΕࣗͰ࣮Ͱ͖ΔϨϕϧ) • ΞϓϦέʔγϣϯશମʹؔΘΔϞδϡʔϧ ͳ͍ͷͰɺ෦తʹద༻Մೳ
͍ͦͯͬͯ͘͠ؾ࣋ͪ • ϑϩϯτΤϯυҕһձΛ݁ • bowerΛΊͯnpmҠߦ • SprocketsΛࣺͯͯwebpack • ౖ౭ͷґଘղܾྗ(sprockets͔Βͷ٫) •
React + FluxΛಋೖͰ͖Δج൫Λ͑ͨ
fin..?
ͱ͍͏Θ͚ͳ͘ • ϩοΫΠϯ͠ͳ͍ɺ࣮ʹࣗ༝͕͋Δ • Actionͷ࣮IFʹ౷Ұੑ͕ͳ͍ • Storeͷঢ়ଶ͕ෳࡶʹ͋Γɺ࣌ͱͯ͠Viewʹ ϩδοΫ͕࿙Εग़ͯ͠Δ • StoreΛݟ͚ͨͩͰͲ͏͍͏ঢ়ଶΛཧ͍ͯ͠Δͷ
͔͔ΓͮΒ͍
ػೳՃͷࡍʹ֤ͷIFΛ ཧղͤͣʹͨΓతʹ࣮ ͞ΕΔͷ͕ෳࡶ͞Λ૿͢ҰҼ ʹͳ͍ͬͯΔ
jsʹܕ͕͋Ε…
ܕ…
டং
flowtype
flowtype͓͞Β͍ • FacebookͷJavaScriptͷੈքʹ੩తͳܕνΣοΫΛಋೖͰ͖Δπʔϧ • OCaml • ASTղੳͯ͠ɺґଘؔͷ͋Δͷ͚ͩΛ νΣοΫରʹ͢ΔͷͰ2Ҏ߱ͷίϯύΠϧ͕ര • ڧྗͳܕਪ
• ఏڙ͢Δͷܕ͚༻ͷγϯλοΫεͱɺͦͷղੳͱิͷΈ (Not AltJS) • ͢ͰʹbabelΛ͍ͬͯΔ߹ʹpluginΛՃ͢Δ͚ͩͰ͙͑͢Δ
ཱ • jsʹඞͣ͠ܕ͕ඞཁ͔ͱ͍͏ͱͦ͏Ͱͳ͍͚Ͳɺ νʔϜ։ൃͰඞਢͱߟ͍͑ͯΔ • ͕࣮ࣗͨ͠ϞδϡʔϧͷIFΛ໌֬ʹ͢Δ͜ͱͰ յΕʹ͍࣮͘ʹͰ͖Δ (յ͞ΕͨΒΤϥʔʹͳΔ) • νΣοΫ͕Ұ൪ͷత͚ͩͲɺ
ิʹΑΔ։ൃޮͷ্ૂͬͯߦ͖͍ͨ
flow-typed component UZQF1SPQT\ UJUMFTUSJOH WJTJUFECPPMFBO PO$MJDL WPJE
^ DMBTT#VUUPOFYUFOET3FBDU$PNQPOFOU\ QSPQT1SPQT TUBUF\ EJTQMBZTUBUJDcIPWFScBDUJWF ^ ʜ ^ ΫϥεԼʹ1SPQTɺ4UBUFͷUZQFΛࢦఆ ˞ཁUSBOTGPSNDMBTTQSPQFSUJFT TUBHF
flow-typed component FYQPSUEFGBVMUDMBTT)PHF$PNQPOFOUFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO #VUUPOUJUMFIJHFWJTJUFE\GBMTF^
^ ^ PO$MJDLϓϩύςΟΛ͠Ε͍ͯΔͷͰ Τϥʔ͕ग़Δ qPX )PHF$PNQPFOUOKTY #VUUPOUJUMFIJHFWJTJUFE\GBMTF^ ???????????????????????????????????????3FBDUFMFNFOUA#VUUPOA QSPQT1SPQT ?????QSPQFSUZAPO$MJDLA1SPQFSUZOPUGPVOEJO4FFCVUUPOKTY #VUUPOUJUMFIJHFWJTJUFE\GBMTF^ ???????????????????????????????????????QSPQTPG3FBDUFMFNFOUA#VUUPOA
flow-typed action UZQF'&5$)@"--\UZQFbGFUDI@BMM` IPQFT"SSBZ)PHF^ UZQF4"7&\UZQFTBWF IPHF)PHF^ UZQF%&-&5&\UZQFEFMFUF JEOVNCFS^ FYQPSUUZQF"DUJPO5ZQFT'&5$)@"--c4"7&c%&-&5& GVODUJPOEJBQBUDI
QBSBNT"DUJPO5ZQFT \ "QQ%JTQBUDIFSEJTQBUDI QBSBNT ^ FYQPSUEFGBVMU\ GFUDI"MM \ HFU bIPHF` UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFTEBUBIPHFT^ ^ ^ TBWF IPHF)PHF \ QVU AIPHF\IPHFJE^A \ ʜIPHF`TQBSBNT ^ UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^ ^ ^ EFMFUF JEOVNCFS \ EFMFUF AIPHF\JE^A UIFO @EBUB EJTQBUDI \UZQFbEFMFUF` JE^ ^ ֤"DUJPOͷUZQFΛఆٛ͠ɺ VOJPOUZQFTͱͯ͠·ͱΊΔ BDUJPOͰEJTQBUDI͢ΔUZQFΛ ఆٛͨ͠VOJPOUZQFTʹ͢Δ ֤EJTQBUDIఆٛͨ͠ VOJPOUZQFTͷ͍ͣΕ͔Λ ຬͨ͢
flow-typed action FYQPSUEFGBVMU\ GFUDI"MM \ HFU bIPHF` UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM`
IPHFTEBUBIPHFT^ ^ ^ TBWF IPHF)PHF \ QVU AIPHF\IPHFJE^A \ ʜIPHF`TQBSBNT ^ UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^ ^ ^ EFMFUF JEOVNCFS \ EFMFUF AIPHF\JE^A UIFO @EBUB EJTQBUDI \UZQFbEFMFUF` JE^ ^ FYQPSUEFGBVMU)PHF$PNQPOFOUFYUFOET3FBDU$PNQPOFOU\ IBOEMF$MJDL%FMFUF)PHF F \ "DUJPOEFMFUF \JEUIJTTUBUFTFMFDUFE^ ^ ʜ ^ Action Component $PNQPOFOU͔Β"DUJPO$SFBUFS Λୟ͘ࡍͷ*'อূ͞ΕΔ
flow-typed state JNQPSUUZQFT\"DUJPO5ZQFT^GSPN)PHF"DUJPO FYQPSUUZQF4UBUF\IPHFT\<LFZOVNCFS>)PHFT^^ DMBTT)PHF4UPSFFYUFOET3FEVDF4UPSF4UBUF\ HFU*OJUJBM4UBUF 4UBUF\ SFUVSO\)PHFT\^^ ^ SFEVDF
TUBUF4UBUF BDUJPO"DUJPO5ZQFT 4UBUF\ TXJUDI BDUJPOUZQF \ DBTFGFUDI@BMM SFUVSO\IPHFTBDUJPOIPHFTSFEVDF D W \ D<WJE>W SFUVSOD ^ \^ ^ DBTFTBWF DPOTUIPHF\^ IPHF<BDUJPOIPHFJE>BDUJPOIPHF SFUVSO0CKFDUBTTJHO \^ TUBUF IPHF DBTFEFMFUF SFUVSOTUBUFIPHFTTFMFDU IPHFIPHFJEBDUJPOJE ʜ "DUJPO5ZQFT VOJPOUZQFT ΛJNQPSU 4UBUFΛఆٛͯ͠4UPSFʹ͢ ͍Έͪޙड़ DBTFจʹΑͬͯVOJPOUZQFT͕ߜΒΕΔ BDUJPOTIPHFTʹΞΫηεͰ͖ΔͷGFUDI@BMMԼͷϒϩοΫ͚ͩ BDUJPOTIPHFʹΞΫηεͰ͖ΔͷTBWFԼͷϒϩοΫ͚ͩ BDUJPOTJEʹΞΫηεͰ͖ΔͷEFMFUFԼͷϒϩοΫ͚ͩ
flow-typed store EFDMBSFNPEVMFqVYVUJMT\ EFDMBSFDMBTT3FEVDF4UPSF5\ HFU4UBUF 5 ^ ^ JNQPSU)PHF4UPSFGSPN)PHF4UPSF
JNQPSUUZQF\4UBUF^GSPN)PHF4UPSF DMBTT)PHF$POUBJOFSFYUFOET3FBDU$PNQPOFOU\ TUBUF4UBUF TUBUJDHFU4UPSFT \SFUVSO<)PHF4UPSF>^ TUBUJDDBMDVMBUF4UBUF @QSFW4UBUF4UBUF 4UBUF\ SFUVSO)PHF4UPSFHFU4UBUF ^ SFOEFS \ ʜ Declare ReduceStore Component HFOFSJDTͰ4UPSFʹ༩͑ͨ ܕΛHFU4UBUFͰड͚औΕΔΑ͏ʹ͢Δ 3FEVDF4UPSFͷHFU4UBUFΛݺͼग़ͨ࣌͠ʹ 4UPSFͰఆٛͨ͠ܕใΛड͚औΕΔ
We got type-safe flux!
ͱ͍ͬͨͷͷ ͜͜·Ͱग़དྷ͍ͯΔ ͱ͜Ζ͕͋Δ͔ͱ͍͏ͱ ࣮ͷͱ͜Ζ·ͩ͋·Γͳ͍
We are hiring! http://jobs.jobvite.com/freee/jobs
Thank you for your attention!