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
100
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1.1k
Real-Time applications with GraphQL
joere
0
260
Prisma2 with Graphql
joere
3
970
Go beyound static on Netlify
joere
1
310
Building Real-time Vue App
joere
4
4.6k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
330
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
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
310
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
170
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
280
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.9k
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
140
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
100
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building Applications with DynamoDB
mza
96
6.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Rails Girls Zürich Keynote
gr2m
95
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Agile that works and the tools we love
rasmusluckow
331
21k
Docker and Python
trallard
46
3.6k
How to train your dragon (web standard)
notwaldorf
96
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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!