フロントエンドのパラダイムシフトとプロダクトの成長

by joe_re

Slide 1

Slide 1 text

ϑϩϯτΤϯυͷ ύϥμΠϜγϑτͱ ϓϩμΫτͷ੒௕ @joe_re

Slide 2

Slide 2 text

Who am I? • twitter: @joe_re • github: @joe-re • freeeͱ͍͏ޒ൓ాͷ  ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ  ࡞͍ͬͯ·͢

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ • freeeͷϏϧυϓϩηεͷมԽ • ੈͷதͷύϥμΠϜγϑτͱ  freeeͷϑϩϯτΤϯυͷมԽ • ਓྨڞ௨ίϯϙʔωϯτͷೖख • ։ൃ૊৫

Slide 5

Slide 5 text

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) • ﬂowtype

Slide 6

Slide 6 text

ϏϧυϓϩηεͷมԽ

Slide 7

Slide 7 text

SprocketsΛࣺ͍ͯͨʂ • http://www.slideshare.net/ masatonoguchi169/sprockets-49965435

Slide 8

Slide 8 text

ͦ΋ͦ΋Sprocketsͱ͸ • Railsඪ४ͷΞηοτͷϓϦϓϩηοα(Ruby੡) • AltJSɺSassͷτϥϯεύΠϧ • concatɺuglifyɺminifyɺﬁngerprintͷ෇༩ • ґଘؔ܎ͷఆٛ(requireσΟϨΫςΟϒͷఏڙ)

Slide 9

Slide 9 text

Sprocketsͷ໰୊ • ϑϩϯτΤϯυͷπʔϧ͸੒ख़͠ɺ  Sprocketsͷ΍͍ͬͯͨ͜ͱ͸͢΂ͯ୅ସͰ͖ΔΑ͏ʹ ͳͬͨ • جຊతʹ͸GemԽ͞Ε͍ͯͳ͍ͱ࢖͑ͳ͍ • ES Modules/CommonJSʹΑΔґଘղܾ͕Ͱ͖ͳ͍ • ϑϩϯτଆ·ͰRailsʹϩοΫΠϯ͞Εͯ͠·͏

Slide 10

Slide 10 text

Sprocketsͷrequire • ͜ͷॱ൪ΛकΒͳ͍ͱࢮ͵

Slide 11

Slide 11 text

͜ΕΛ࢖͍ͬͯͯ͸  ϞδϡʔϧԽ͞Εͨ  ESNextͷੈքʹ͍ͭ·Ͱ΋  ౸ୡͰ͖ͳ͍

Slide 12

Slide 12 text

gulp + webpackͷಋೖ • ES Modules/CommonJSʹΑΔґଘղܾ • npm͔Β௚઀ϥΠϒϥϦΛ  importͰ͖Δੈք΁ • WebpackͰbundle͢Δ͜ͱͰɺ  css modules͕ಋೖՄೳʹ

Slide 13

Slide 13 text

app/assetsʹϑϩϯτͷ  Ϗϧυ݁ՌΛग़ྗ͢Δͱ͍͏બ୒ • ϑϩϯτΤϯυͷϏϧυ݁ՌΛapp/assetsʹग़ྗ ͠ɺ࠷ऴతʹ͸࠶ͼSprocketsΛ௨͢ • طଘͷσϓϩΠϑϩʔΛม͑ͣʹ  ௥Ճ͢ΔܗͰ৐ͤΒΕΔͷͰಋೖָ͕ • Sprocketsʹґଘ͍ͯ͠ΔϑΝΠϧ΋  ͻͱ·ͣԿ΋ߟ͑ͣʹίϐʔ͓͚ͯ͠͹ಈ͘

Slide 14

Slide 14 text

MPDBMEJSFDUPSZ GSPOUEJSFDUPSZ SBJMTBTTFUTEJSFDUPSZ  BQQBTTFUT Ϗϧυͷߏ੒ gulpɺwebpack  - transpile(coffee,esnext,sass)  - concat  - uglify  - minify QSPEVDUJPOTFSWFS sprockets  - resolve server context  - ﬁngerprint QVCMJDEJSFDUPSZ

Slide 15

Slide 15 text

࣍ʹ΍Δ΂͖͜ͱ • Railsʹґଘ͍ͯ͠ΔϏϧυΛऔΓআ͘ • WebpackͷϏϧυ࣌ʹmanifest.jsonΛ  ੜ੒͠ɺSprocketsͷ׬શʹ͍Βͳ͍ੈք΁

Slide 16

Slide 16 text

৽ͨʹු্͢Δ՝୊ • RailsଆͱͲ͏ͯ͠΋ڞ༗͍ͨ͠΋ͷ͸  Ͳ͏͢Δ΂͖͔(i18n΍imageͳͲ) • େྔͷjs(໿1500)ͱෳ਺ͷentry point(໿80)ʹର͢ΔϦιʔε ෆ଍(ॳճϏϧυʹ2෼͔͔Δ) • େن໛ϓϩμΫτʹର͢ΔϑϩϯτΤϯυͷ  Ϗϧυ؀ڥߏங͕͋·Γੈʹ஌ݟ͕ͳ͍ • ΍͍ͬͯ͘ؾ࣋ͪ

Slide 17

Slide 17 text

΍͍ͬͯ͘ؾ࣋ͪ • http://www.slideshare.net/tkm64/webpack-62692382

Slide 18

Slide 18 text

ੈͷதͷύϥμΠϜγϑτͱ  freeeͷϑϩϯτΤϯυͷมԽ

Slide 19

Slide 19 text

ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "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!

Slide 20

Slide 20 text

ॳظͷfreeeͷϑϩϯτΤϯυ • 2012೥౰࣌ΑΖ͘͠ɺϑϩϯτ͸Backbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.js͸ಈ͖Λ͚ͭΔఔ౓ • SPAͰ͸ͳ͍

Slide 21

Slide 21 text

ঃʑʹBackboneMVCΛ  ϑϧʹ׆͔ͨ͠  ΞʔΩςΫνϟ΁  (ϖʔδ୯ҐͰͷSPA)

Slide 22

Slide 22 text

ͦͯ͠૿͍ͯ͘͠ݫ͠͞… • ϓϩμΫτ͕ਐԽ͢ΔͭΕɺരൃతʹ૿େ͢ ΔViewͱModel  (ෳࡶոحͳΠϕϯτϋϯυϦϯά) • ͦ΋ͦ΋DOMૢ࡞ͭΒ͗͢ • ߴ·ΔSPA΁ͷཉٻ

Slide 23

Slide 23 text

ͦͷࠒੈؒͰ͸  2way-binding͕ྲྀߦ͠ɺ  ੈ͸·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌୅  (2013ʙ2014)

Slide 24

Slide 24 text

࣌Λಉͯ͘͡͠  څ༩ܭࢉfreeeͷϩʔϯν

Slide 25

Slide 25 text

څ༩ܭࢉfreeeͷελοΫ • backboneMVC • Vue.js(MVVM) • ׬શͳSPA

Slide 26

Slide 26 text

ͱ͜ΖͰMVVMͱ͸ 7JFX .PEFM 7JFX.PEFM User  2way binding apply notify interaction #BDLCPOF7JFX #BDLCPOF.PEFM 7VF

Slide 27

Slide 27 text

MVVMʹΑͬͯಘͨ΋ͷ • 2way-bindingʹΑΔDOMૢ࡞͔Βͷ։์ • View͸ঢ়ଶΛ࣋ͨͳͯ͘ྑ͍(VM΁) • View͔Β൥ࡶͳϩδοΫͷআڈ

Slide 28

Slide 28 text

ﬁn..?

Slide 29

Slide 29 text

ͦΜͳΘ͚͸ͳ͘ • ෳ਺Ϟσϧ͕ొ৔͢ΔViewͰ͸  VMͰؔ࿈Λ੍ޚ͢Δͷ͸૬มΘΒͣͭΒ͍ • ModelͱVMͷঢ়ଶͷ྆ํΛ؅ཧ͢ΔͷͭΒ͍ • ·ͱΊΔͱঢ়ଶ؅ཧͭΒ͍ • Object.obseve΋ࢮΜͩ͠…

Slide 30

Slide 30 text

·͞ʹ͜Ε(͜ͷਤ͸MVC͚ͩͲ) https://www.infoq.com/news/2014/05/facebook-mvc-ﬂux

Slide 31

Slide 31 text

React + Flux

Slide 32

Slide 32 text

React͓͞Β͍ • Facebook੡ͷViewϥΠϒϥϦ • ঢ়ଶ؅ཧΛపఈతʹview͔Βഉআ͢Δ  (ঢ়ଶ؅ཧ͸ﬂuxʹΑΓStore΁) • Propsͱͯ͋͠Δ஋Λ౉͞ΕΔݶΓɺ  ඞͣಉ͡ϨϯμϦϯάΛ͢Δؔ਺ܕతΞϓϩʔν  (React͸DOMม׵ثʹͳΔ) • ࠩ෼Λܭࢉͯ͠൓ө͢ΔɺVirtualDOMͷ࣮૷

Slide 33

Slide 33 text

Flux͓͞Β͍ • ୯ํ޲σʔλϑϩʔΛ࣮ݱ͢Δ࣮૷ύλʔϯ • ActionCreator → Dispatcher → Store → View • Component͔Βঢ়ଶ͸੾Γ཭͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫ͸StoreʹͭΊ͜ΈɺViewʹ͸ඳըʹඞཁͳ৘ใ͕ߏ੒ࡁΈ  Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ

Slide 34

Slide 34 text

Redux

Slide 35

Slide 35 text

ReduxͷੈքΛͬ͘͟Γ

Slide 36

Slide 36 text

طଘ࣮૷͕͋Δͱ͜Ζʹ  ಋೖ͢Δ্ͰɺRedux͸ͭΒ͍

Slide 37

Slide 37 text

ͪͳΈʹ࠷ॳʹಋೖ͞Εͨػೳ ͸͜Ε(on Backbone view)

Slide 38

Slide 38 text

Single Store͸Ͳ͜ʹ  ࣋ͭ…??

Slide 39

Slide 39 text

flux-utilsΛ࢖͏ͱ͍͏બ୒ • ReduxΛ࢝Ίͱ͢Δflux࣮૷Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ facebook͕͍͍ͱ͜औΓͨ͠(ओ؍) • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘  Storeͷϕʔε࣮૷ͱContainerͱ͍͏֓೦͕௥Ճ͞Εͨ • fluxʹର͢Δཉ๬Λશͯຬͨ͢΋ͷͰ͸ͳ͍  (ϛχϚϜͳ࣮૷ͰɺϩοΫΠϯ͕গͳ͍) • ౰࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘  εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ΋͋Δ

Slide 40

Slide 40 text

αϙʔτൣғ͸খ͍͞  (ϑϨʔϜϫʔΫͰ͸ͳ͍)

Slide 41

Slide 41 text

Reduxͱͷڞ௨఺ • ContainerComponent → Container • Reducer → Reduce Store

Slide 42

Slide 42 text

ﬂux-utilsͷ͍͍ͱ͜Ζ • طଘͷﬂux͔Βဃ཭͠ͳ͍ • αϙʔτൣғ͕খ͍͞෼ɺϩοΫΠϯ͕গͳ ͍(͍͟ͱͳΕ͹ࣗ෼Ͱ࣮૷Ͱ͖ΔϨϕϧ) • ΞϓϦέʔγϣϯશମʹؔΘΔϞδϡʔϧ͸ ͳ͍ͷͰɺ෦෼తʹద༻Մೳ

Slide 43

Slide 43 text

΋ͪΖΜ͜ͷબ୒͕࠷ڧͱ͍͏ Θ͚Ͱ͸ͳ͍ • freeeͰ͸React + Flux(ﬂux-utils)ͱ͍͏બ୒Λ͍ͯ͠ Δ͕ɺඞͣ͠΋͜Ε͕શͯʹ౰ͯ͸·ΔΘ͚Ͱ͸ͳ͍ • ۃ୺ͳ࿩ɺඞཁͷͳ͍ੈքͰ͸jQueryͰྑ͍ • freeeͰ͸֤৔໘ʹ͓͍ͯɺϓϩμΫτ๊͕͍͑ͯΔ ͭΒΈɺύϥμΠϜΛม͑Δ͜ͱʹΑΔίετɺ  ϝϦοτΛఱṝʹ͔͚͖ͯͨ

Slide 44

Slide 44 text

ύϥμΠϜγϑτʹ௚໘ͨ࣌͠ ʹେࣄͳࣄ • ࠓϓϩμΫτͷ๊͍͑ͯΔ໰୊͸Կ͔Λཧղ ͢Δ • ύϥμΠϜͷมԽʹΑͬͯղܾ͢Δ໰୊͕Կ͔ Λཧղ͢Δ

Slide 45

Slide 45 text

ਓྨڞ௨ίϯϙʔωϯτͷ  ೖख

Slide 46

Slide 46 text

͜͏͍͏ͷ

Slide 47

Slide 47 text

͜͏ݟ͑ͯ໿150ߦͷ  ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબ୒ΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍೔෇Λબ୒͠ͳ͍  (2016/3/31 ➡ 2016/2/29ʹͳΔ) • ͳͲͳͲ

Slide 48

Slide 48 text

ෳ਺ϓϩμΫτΛ  ๊͑ͨԶͨͪ͸ • freeeʹ͸3ͭͷओཁϓϩμΫτ͕͋Δ  (ձܭɺڅ༩ɺձࣾઃཱ) • ϓϩμΫτͷϏδωεϩδοΫʹΑΒͳ͍  ෦෼͸ڞ௨͍ͯ࣋ͪͨ͠ • ݟͨ໨΋౷Ұ͍ͨ͠

Slide 49

Slide 49 text

ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ࢖͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨ໨΍ૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢Δ͹Βͭ ͖Λͳͤ͘Δ  (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨ໨ɺৼΔ෣͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ཰ Խ

Slide 50

Slide 50 text

࠶ར༻Մೳͳίϯϙʔωϯτ΁ ͷཉ๬ • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯ͸ཁٻͨ͘͠ͳ ͍(babelͷόʔδϣϯͱ͔) • ͱ͸͍͑࢖༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ͸֤Ξϓ ϦέʔγϣϯͰ؅ཧ͍ͨ͠ • ݟͨ໨΋ἧ͍͑ͨ(styleఆٛ΋ؚΈ͍ͨ) • ͱ͸͍͑ར༻ଆͰstyleͷඍௐ੔͸͍ͨ͠(styleͷଧͪফ͠΍ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)

Slide 51

Slide 51 text

WebpackʹΑΔ  ίϯϙʔωϯτͷఏڙ

Slide 52

Slide 52 text

Webpackͷexternalsͷࢦఆ

Slide 53

Slide 53 text

Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTର৅ͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ ᶅґଘղܾํ๏

Slide 54

Slide 54 text

ɾϏϧυલ ɾϏϧυޙ Webpackͷexternalsͷࢦఆ

Slide 55

Slide 55 text

ɾϏϧυલ ɾϏϧυޙ Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTର৅ͷจࣈྻ ᶅґଘղܾํ๏ ᶄτϥϯεύΠϧޙͷจࣈྻ

Slide 56

Slide 56 text

externalsࢦఆͰಘΔ΋ͷ • ϥΠϒϥϦͷόʔδϣϯࢦఆ͸ར༻ଆʹدͤ ΒΕΔ • ϏϧυޙͷjsΛఏڙͯ͠΋αΠζ͕཈͑ΒΕΔ

Slide 57

Slide 57 text

css loaderͷར༻ IPHFSFBDUKT IPHFTDTT

Slide 58

Slide 58 text

css loaderͷར༻

Slide 59

Slide 59 text

css loaderʹΑͬͯಘΔ΋ͷ • style΋ίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨ໨ͷ͹ Β͖ͭΛ཈͑ΒΕΔ • ϩʔΧϧείʔϓ͸ηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ౓͕ߴ͘ͳ Δ͜ͱ͸ͳ͍  (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ) • ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ

Slide 60

Slide 60 text

ίϯϙʔωϯτͷߏ଄ͷن໿ ൪֎ଆʹ͸֎෦͔Β౉͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ ൪໨͸ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ ͦΕΑΓ಺ଆʹίϯϙʔωϯτͷ಺༰Λهड़͢Δ

Slide 61

Slide 61 text

ن໿Λ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ͠΍্ॻ͖͕ ͠΍͘͢ͳΔ

Slide 62

Slide 62 text

։ൃ૊৫

Slide 63

Slide 63 text

։ൃମ੍ • ΤϯδχΞ໿60ਓ • αʔόαΠυ/ϑϩϯτΤϯυͱ͍͏  ෼͚ํ͸͍ͯ͠ͳ͍ͷͰɺશһ͕ͲͪΒ΋  ͍͡Δ

Slide 64

Slide 64 text

͋ΔϓϩμΫτ͸1िؒͰ300ίϛοτ  (1೔60ίϛοτ) HJUMPHTJODFVOUJMPOFMJOFOPNFSHFTcXDM

Slide 65

Slide 65 text

ͱ΋͢Ε͹ຐք͕ൃੜ͢Δ • Singletonʹͳ͍ͬͯͳ͍Storeͱ͔ • PresentationalComponent͕Storeͷߪಡͯ͠ Δ͡ΌΜͱ͔

Slide 66

Slide 66 text

νʔϜ։ൃ

Slide 67

Slide 67 text

ϑϩϯτΤϯυҕһձͷൃ଍ • ձܭϑϩϯτΤϯυҕһձ • cssඪ४Խҕһձ • ڞ௨ίϯϙʔωϯτ࡞੒ҕһձ • etc..

Slide 68

Slide 68 text

݂Λు͘Α͏ͳ׆ಈ಺༰ • coffeeεΫϦϓτ๾໓ӡಈ • ౖ౭ͷґଘղܾྗ(import/export) • ͞ΑͳΒbower • etc..