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
フロントエンドのパラダイムシフトとプロダクトの成長
Search
joe_re
November 05, 2016
Technology
18
13k
フロントエンドのパラダイムシフトとプロダクトの成長
Front Line of Frontend − Forkwell Meetup #2 発表資料
http://forkwell.connpass.com/event/42527/
joe_re
November 05, 2016
Tweet
Share
More Decks by joe_re
See All by joe_re
Building Public API with GraphQL
joere
3
85
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1k
Real-Time applications with GraphQL
joere
0
230
Prisma2 with Graphql
joere
3
940
Go beyound static on Netlify
joere
1
280
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
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
120
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
440
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
230
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
AIとSREの未来 / AI and SRE
ymotongpoo
2
700
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
350
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
690
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
330
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
7k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
The Language of Interfaces
destraynor
158
25k
The Invisible Side of Design
smashingmag
299
50k
Become a Pro
speakerdeck
PRO
28
5.4k
Typedesign – Prime Four
hannesfritz
41
2.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
What's in a price? How to price your products and services
michaelherold
245
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
ϑϩϯτΤϯυͷ ύϥμΠϜγϑτͱ ϓϩμΫτͷ @joe_re
Who am I? • twitter: @joe_re • github: @joe-re •
freeeͱ͍͏ޒాͷ ձࣾͰಇ͍͍ͯ·͢ • ΫϥυձܭιϑτΛ ࡞͍ͬͯ·͢
None
ࠓ͢͜ͱ • freeeͷϏϧυϓϩηεͷมԽ • ੈͷதͷύϥμΠϜγϑτͱ freeeͷϑϩϯτΤϯυͷมԽ • ਓྨڞ௨ίϯϙʔωϯτͷೖख • ։ൃ৫
freeeͷϑϩϯτΤϯυͷࠓͱੲ 2012(ϩʔϯν࣌) 2016(ݱࡏ) • BowerͰdependenciesͷཧ (use bower-rails) • CoffeeScript •
SproketsʹΑΔassetsͷbuild • BackboneMVC(not SPA) • npmͰdependenciesͷཧ • ESNext • gulp + WebpackʹΑΔassetsͷ build(Babel) • React + Flux(෦తͳSPA) • flowtype
ϏϧυϓϩηεͷมԽ
SprocketsΛࣺ͍ͯͨʂ • http://www.slideshare.net/ masatonoguchi169/sprockets-49965435
ͦͦSprocketsͱ • Railsඪ४ͷΞηοτͷϓϦϓϩηοα(Ruby) • AltJSɺSassͷτϥϯεύΠϧ • concatɺuglifyɺminifyɺfingerprintͷ༩ • ґଘؔͷఆٛ(requireσΟϨΫςΟϒͷఏڙ)
Sprocketsͷ • ϑϩϯτΤϯυͷπʔϧख़͠ɺ Sprocketsͷ͍ͬͯͨ͜ͱͯ͢ସͰ͖ΔΑ͏ʹ ͳͬͨ • جຊతʹGemԽ͞Ε͍ͯͳ͍ͱ͑ͳ͍ • ES Modules/CommonJSʹΑΔґଘղܾ͕Ͱ͖ͳ͍
• ϑϩϯτଆ·ͰRailsʹϩοΫΠϯ͞Εͯ͠·͏
Sprocketsͷrequire • ͜ͷॱ൪ΛकΒͳ͍ͱࢮ͵
͜ΕΛ͍ͬͯͯ ϞδϡʔϧԽ͞Εͨ ESNextͷੈքʹ͍ͭ·Ͱ ౸ୡͰ͖ͳ͍
gulp + webpackͷಋೖ • ES Modules/CommonJSʹΑΔґଘղܾ • npm͔ΒϥΠϒϥϦΛ importͰ͖Δੈք •
WebpackͰbundle͢Δ͜ͱͰɺ css modules͕ಋೖՄೳʹ
app/assetsʹϑϩϯτͷ Ϗϧυ݁ՌΛग़ྗ͢Δͱ͍͏બ • ϑϩϯτΤϯυͷϏϧυ݁ՌΛapp/assetsʹग़ྗ ͠ɺ࠷ऴతʹ࠶ͼSprocketsΛ௨͢ • طଘͷσϓϩΠϑϩʔΛม͑ͣʹ Ճ͢ΔܗͰͤΒΕΔͷͰಋೖָ͕ • Sprocketsʹґଘ͍ͯ͠ΔϑΝΠϧ
ͻͱ·ͣԿߟ͑ͣʹίϐʔ͓͚ͯ͠ಈ͘
MPDBMEJSFDUPSZ GSPOUEJSFDUPSZ SBJMTBTTFUTEJSFDUPSZ BQQBTTFUT Ϗϧυͷߏ gulpɺwebpack - transpile(coffee,esnext,sass) - concat
- uglify - minify QSPEVDUJPOTFSWFS sprockets - resolve server context - fingerprint QVCMJDEJSFDUPSZ
࣍ʹΔ͖͜ͱ • Railsʹґଘ͍ͯ͠ΔϏϧυΛऔΓআ͘ • WebpackͷϏϧυ࣌ʹmanifest.jsonΛ ੜ͠ɺSprocketsͷશʹ͍Βͳ͍ੈք
৽ͨʹු্͢Δ՝ • RailsଆͱͲ͏ͯ͠ڞ༗͍ͨ͠ͷ Ͳ͏͢Δ͖͔(i18nimageͳͲ) • େྔͷjs(1500)ͱෳͷentry point(80)ʹର͢ΔϦιʔε ෆ(ॳճϏϧυʹ2͔͔Δ) • େنϓϩμΫτʹର͢ΔϑϩϯτΤϯυͷ
Ϗϧυڥߏங͕͋·Γੈʹݟ͕ͳ͍ • ͍ͬͯ͘ؾ࣋ͪ
͍ͬͯ͘ؾ࣋ͪ • http://www.slideshare.net/tkm64/webpack-62692382
ੈͷதͷύϥμΠϜγϑτͱ freeeͷϑϩϯτΤϯυͷมԽ
ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "KBYͷൃݟ 1SPUPUZQFKTɺK2VFSZͷ੮ר #BDLCPOFKTͷొ ϑϩϯτΤϯυʹ.7$͕࣋ͪࠐ·ΕΔ XBZCJOEJOHͷྲྀߦ .77. "OHVMBSKTɺ7VFKTɺ.BSJOPOFUUFKTFUDʜ ձܭGSFFFϩʔϯν
7JSUVBM%0.ͷొ %FLVɺ3FBDUɺ7VFKT Y FUDʜ main topics of frontend history of freee 2010 2005 2012 2014 څ༩ܭࢉGSFFFϩʔϯν ձܭGSFFF։ൃ։࢝ ձࣾઃཱGSFFFϩʔϯν now!
ॳظͷfreeeͷϑϩϯτΤϯυ • 2012࣌ΑΖ͘͠ɺϑϩϯτBackbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.jsಈ͖Λ͚ͭΔఔ • SPAͰͳ͍
ঃʑʹBackboneMVCΛ ϑϧʹ׆͔ͨ͠ ΞʔΩςΫνϟ (ϖʔδ୯ҐͰͷSPA)
ͦͯ͠૿͍ͯ͘͠ݫ͠͞… • ϓϩμΫτ͕ਐԽ͢ΔͭΕɺരൃతʹ૿େ͢ ΔViewͱModel (ෳࡶոحͳΠϕϯτϋϯυϦϯά) • ͦͦDOMૢ࡞ͭΒ͗͢ • ߴ·ΔSPAͷཉٻ
ͦͷࠒੈؒͰ 2way-binding͕ྲྀߦ͠ɺ ੈ·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌ (2013ʙ2014)
࣌Λಉͯ͘͡͠ څ༩ܭࢉfreeeͷϩʔϯν
څ༩ܭࢉfreeeͷελοΫ • backboneMVC • 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
React + Flux
React͓͞Β͍ • FacebookͷViewϥΠϒϥϦ • ঢ়ଶཧΛపఈతʹview͔Βഉআ͢Δ (ঢ়ଶཧfluxʹΑΓStore) • Propsͱͯ͋͠ΔΛ͞ΕΔݶΓɺ ඞͣಉ͡ϨϯμϦϯάΛ͢ΔؔܕతΞϓϩʔν (ReactDOMมثʹͳΔ)
• ࠩΛܭࢉͯ͠ө͢ΔɺVirtualDOMͷ࣮
Flux͓͞Β͍ • ୯ํσʔλϑϩʔΛ࣮ݱ͢Δ࣮ύλʔϯ • ActionCreator → Dispatcher → Store →
View • Component͔Βঢ়ଶΓ͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫStoreʹͭΊ͜ΈɺViewʹඳըʹඞཁͳใ͕ߏࡁΈ Ͱ௨͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
Redux
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͔Βဃ͠ͳ͍ • αϙʔτൣғ͕খ͍͞ɺϩοΫΠϯ͕গͳ ͍(͍͟ͱͳΕࣗͰ࣮Ͱ͖ΔϨϕϧ) • ΞϓϦέʔγϣϯશମʹؔΘΔϞδϡʔϧ ͳ͍ͷͰɺ෦తʹద༻Մೳ
ͪΖΜ͜ͷબ͕࠷ڧͱ͍͏ Θ͚Ͱͳ͍ • freeeͰReact + Flux(flux-utils)ͱ͍͏બΛ͍ͯ͠ Δ͕ɺඞͣ͜͠Ε͕શͯʹͯ·ΔΘ͚Ͱͳ͍ • ۃͳɺඞཁͷͳ͍ੈքͰjQueryͰྑ͍ •
freeeͰ֤໘ʹ͓͍ͯɺϓϩμΫτ๊͕͍͑ͯΔ ͭΒΈɺύϥμΠϜΛม͑Δ͜ͱʹΑΔίετɺ ϝϦοτΛఱṝʹ͔͚͖ͯͨ
ύϥμΠϜγϑτʹ໘ͨ࣌͠ ʹେࣄͳࣄ • ࠓϓϩμΫτͷ๊͍͑ͯΔԿ͔Λཧղ ͢Δ • ύϥμΠϜͷมԽʹΑͬͯղܾ͢Δ͕Կ͔ Λཧղ͢Δ
ਓྨڞ௨ίϯϙʔωϯτͷ ೖख
͜͏͍͏ͷ
͜͏ݟ͑ͯ150ߦͷ ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍Λબ͠ͳ͍ (2016/3/31 ➡ 2016/2/29ʹͳΔ)
• ͳͲͳͲ
ෳϓϩμΫτΛ ๊͑ͨԶͨͪ • freeeʹ3ͭͷओཁϓϩμΫτ͕͋Δ (ձܭɺڅ༩ɺձࣾઃཱ) • ϓϩμΫτͷϏδωεϩδοΫʹΑΒͳ͍ ෦ڞ௨͍ͯ࣋ͪͨ͠ • ݟͨ౷Ұ͍ͨ͠
ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢ΔΒͭ ͖Λͳͤ͘Δ (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨɺৼΔ͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ
Խ
࠶ར༻Մೳͳίϯϙʔωϯτ ͷཉ • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯཁٻͨ͘͠ͳ ͍(babelͷόʔδϣϯͱ͔) • ͱ͍͑༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ֤Ξϓ ϦέʔγϣϯͰཧ͍ͨ͠ • ݟͨἧ͍͑ͨ(styleఆؚٛΈ͍ͨ)
• ͱ͍͑ར༻ଆͰstyleͷඍௐ͍ͨ͠(styleͷଧͪফ͠ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)
WebpackʹΑΔ ίϯϙʔωϯτͷఏڙ
Webpackͷexternalsͷࢦఆ
Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ ᶅґଘղܾํ๏
ɾϏϧυલ ɾϏϧυޙ Webpackͷexternalsͷࢦఆ
ɾϏϧυલ ɾϏϧυޙ Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶅґଘղܾํ๏ ᶄτϥϯεύΠϧޙͷจࣈྻ
externalsࢦఆͰಘΔͷ • ϥΠϒϥϦͷόʔδϣϯࢦఆར༻ଆʹدͤ ΒΕΔ • ϏϧυޙͷjsΛఏڙͯ͠αΠζ͕͑ΒΕΔ
css loaderͷར༻ IPHFSFBDUKT IPHFTDTT
css loaderͷར༻
css loaderʹΑͬͯಘΔͷ • styleίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨͷ Β͖ͭΛ͑ΒΕΔ • ϩʔΧϧείʔϓηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ͕ߴ͘ͳ Δ͜ͱͳ͍ (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)
• ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ
ίϯϙʔωϯτͷߏͷن ൪֎ଆʹ֎෦͔Β͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ ൪ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ ͦΕΑΓଆʹίϯϙʔωϯτͷ༰Λهड़͢Δ
نΛ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ্͠ॻ͖͕ ͘͢͠ͳΔ
։ൃ৫
։ൃମ੍ • ΤϯδχΞ60ਓ • αʔόαΠυ/ϑϩϯτΤϯυͱ͍͏ ͚ํ͍ͯ͠ͳ͍ͷͰɺશһ͕ͲͪΒ ͍͡Δ
͋ΔϓϩμΫτ1िؒͰ300ίϛοτ (160ίϛοτ) HJUMPHTJODFVOUJMPOFMJOFOPNFSHFTcXDM
ͱ͢Εຐք͕ൃੜ͢Δ • Singletonʹͳ͍ͬͯͳ͍Storeͱ͔ • PresentationalComponent͕Storeͷߪಡͯ͠ Δ͡ΌΜͱ͔
νʔϜ։ൃ
ϑϩϯτΤϯυҕһձͷൃ • ձܭϑϩϯτΤϯυҕһձ • cssඪ४Խҕһձ • ڞ௨ίϯϙʔωϯτ࡞ҕһձ • etc..
݂Λు͘Α͏ͳ׆ಈ༰ • coffeeεΫϦϓτ໓ӡಈ • ౖ౭ͷґଘղܾྗ(import/export) • ͞ΑͳΒbower • etc..
ใڞ༗
ཧͷੈքۙͮͨ͘Ίʹ
We are hiring! http://jobs.jobvite.com/freee/jobs
Thank you for your attention!