Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

B72422afc5f3ffc844f672b59122e16d?s=47 joe_re
November 05, 2016

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

Front Line of Frontend − Forkwell Meetup #2 発表資料
http://forkwell.connpass.com/event/42527/

B72422afc5f3ffc844f672b59122e16d?s=128

joe_re

November 05, 2016
Tweet

Transcript

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

  2. Who am I? • twitter: @joe_re • github: @joe-re •

    freeeͱ͍͏ޒ൓ాͷ
 ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ
 ࡞͍ͬͯ·͢
  3. None
  4. ࠓ೔࿩͢͜ͱ • freeeͷϏϧυϓϩηεͷมԽ • ੈͷதͷύϥμΠϜγϑτͱ
 freeeͷϑϩϯτΤϯυͷมԽ • ਓྨڞ௨ίϯϙʔωϯτͷೖख • ։ൃ૊৫

  5. 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
  6. ϏϧυϓϩηεͷมԽ

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

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

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

    • ϑϩϯτଆ·ͰRailsʹϩοΫΠϯ͞Εͯ͠·͏
  10. Sprocketsͷrequire • ͜ͷॱ൪ΛकΒͳ͍ͱࢮ͵

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

  12. gulp + webpackͷಋೖ • ES Modules/CommonJSʹΑΔґଘղܾ • npm͔Β௚઀ϥΠϒϥϦΛ
 importͰ͖Δੈք΁ •

    WebpackͰbundle͢Δ͜ͱͰɺ
 css modules͕ಋೖՄೳʹ
  13. app/assetsʹϑϩϯτͷ
 Ϗϧυ݁ՌΛग़ྗ͢Δͱ͍͏બ୒ • ϑϩϯτΤϯυͷϏϧυ݁ՌΛapp/assetsʹग़ྗ ͠ɺ࠷ऴతʹ͸࠶ͼSprocketsΛ௨͢ • طଘͷσϓϩΠϑϩʔΛม͑ͣʹ
 ௥Ճ͢ΔܗͰ৐ͤΒΕΔͷͰಋೖָ͕ • Sprocketsʹґଘ͍ͯ͠ΔϑΝΠϧ΋


    ͻͱ·ͣԿ΋ߟ͑ͣʹίϐʔ͓͚ͯ͠͹ಈ͘
  14. MPDBMEJSFDUPSZ GSPOUEJSFDUPSZ SBJMTBTTFUTEJSFDUPSZ
 BQQBTTFUT Ϗϧυͷߏ੒ gulpɺwebpack
 - transpile(coffee,esnext,sass)
 - concat


    - uglify
 - minify QSPEVDUJPOTFSWFS sprockets
 - resolve server context
 - fingerprint QVCMJDEJSFDUPSZ
  15. ࣍ʹ΍Δ΂͖͜ͱ • Railsʹґଘ͍ͯ͠ΔϏϧυΛऔΓআ͘ • WebpackͷϏϧυ࣌ʹmanifest.jsonΛ
 ੜ੒͠ɺSprocketsͷ׬શʹ͍Βͳ͍ੈք΁

  16. ৽ͨʹු্͢Δ՝୊ • RailsଆͱͲ͏ͯ͠΋ڞ༗͍ͨ͠΋ͷ͸
 Ͳ͏͢Δ΂͖͔(i18n΍imageͳͲ) • େྔͷjs(໿1500)ͱෳ਺ͷentry point(໿80)ʹର͢ΔϦιʔε ෆ଍(ॳճϏϧυʹ2෼͔͔Δ) • େن໛ϓϩμΫτʹର͢ΔϑϩϯτΤϯυͷ


    Ϗϧυ؀ڥߏங͕͋·Γੈʹ஌ݟ͕ͳ͍ • ΍͍ͬͯ͘ؾ࣋ͪ
  17. ΍͍ͬͯ͘ؾ࣋ͪ • http://www.slideshare.net/tkm64/webpack-62692382

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

  19. ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "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!
  20. ॳظͷfreeeͷϑϩϯτΤϯυ • 2012೥౰࣌ΑΖ͘͠ɺϑϩϯτ͸Backbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.js͸ಈ͖Λ͚ͭΔఔ౓ • SPAͰ͸ͳ͍

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

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

  23. ͦͷࠒੈؒͰ͸
 2way-binding͕ྲྀߦ͠ɺ
 ੈ͸·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌୅
 (2013ʙ2014)

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

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

  26. ͱ͜ΖͰMVVMͱ͸ 7JFX .PEFM 7JFX.PEFM User
 2way binding apply notify interaction

    #BDLCPOF7JFX #BDLCPOF.PEFM 7VF
  27. MVVMʹΑͬͯಘͨ΋ͷ • 2way-bindingʹΑΔDOMૢ࡞͔Βͷ։์ • View͸ঢ়ଶΛ࣋ͨͳͯ͘ྑ͍(VM΁) • View͔Β൥ࡶͳϩδοΫͷআڈ

  28. fin..?

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

  30. ·͞ʹ͜Ε(͜ͷਤ͸MVC͚ͩͲ) https://www.infoq.com/news/2014/05/facebook-mvc-flux

  31. React + Flux

  32. React͓͞Β͍ • Facebook੡ͷViewϥΠϒϥϦ • ঢ়ଶ؅ཧΛపఈతʹview͔Βഉআ͢Δ
 (ঢ়ଶ؅ཧ͸fluxʹΑΓStore΁) • Propsͱͯ͋͠Δ஋Λ౉͞ΕΔݶΓɺ
 ඞͣಉ͡ϨϯμϦϯάΛ͢Δؔ਺ܕతΞϓϩʔν
 (React͸DOMม׵ثʹͳΔ)

    • ࠩ෼Λܭࢉͯ͠൓ө͢ΔɺVirtualDOMͷ࣮૷
  33. Flux͓͞Β͍ • ୯ํ޲σʔλϑϩʔΛ࣮ݱ͢Δ࣮૷ύλʔϯ • ActionCreator → Dispatcher → Store →

    View • Component͔Βঢ়ଶ͸੾Γ཭͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫ͸StoreʹͭΊ͜ΈɺViewʹ͸ඳըʹඞཁͳ৘ใ͕ߏ੒ࡁΈ
 Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
  34. Redux

  35. ReduxͷੈքΛͬ͘͟Γ

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

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

  38. Single Store͸Ͳ͜ʹ
 ࣋ͭ…??

  39. flux-utilsΛ࢖͏ͱ͍͏બ୒ • ReduxΛ࢝Ίͱ͢Δflux࣮૷Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ facebook͕͍͍ͱ͜औΓͨ͠(ओ؍) • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘
 Storeͷϕʔε࣮૷ͱContainerͱ͍͏֓೦͕௥Ճ͞Εͨ • fluxʹର͢Δཉ๬Λશͯຬͨ͢΋ͷͰ͸ͳ͍
 (ϛχϚϜͳ࣮૷ͰɺϩοΫΠϯ͕গͳ͍)

    • ౰࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘
 εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ΋͋Δ
  40. αϙʔτൣғ͸খ͍͞
 (ϑϨʔϜϫʔΫͰ͸ͳ͍)

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

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

  43. ΋ͪΖΜ͜ͷબ୒͕࠷ڧͱ͍͏ Θ͚Ͱ͸ͳ͍ • freeeͰ͸React + Flux(flux-utils)ͱ͍͏બ୒Λ͍ͯ͠ Δ͕ɺඞͣ͠΋͜Ε͕શͯʹ౰ͯ͸·ΔΘ͚Ͱ͸ͳ͍ • ۃ୺ͳ࿩ɺඞཁͷͳ͍ੈքͰ͸jQueryͰྑ͍ •

    freeeͰ͸֤৔໘ʹ͓͍ͯɺϓϩμΫτ๊͕͍͑ͯΔ ͭΒΈɺύϥμΠϜΛม͑Δ͜ͱʹΑΔίετɺ
 ϝϦοτΛఱṝʹ͔͚͖ͯͨ
  44. ύϥμΠϜγϑτʹ௚໘ͨ࣌͠ ʹେࣄͳࣄ • ࠓϓϩμΫτͷ๊͍͑ͯΔ໰୊͸Կ͔Λཧղ ͢Δ • ύϥμΠϜͷมԽʹΑͬͯղܾ͢Δ໰୊͕Կ͔ Λཧղ͢Δ

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

  46. ͜͏͍͏ͷ

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

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

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

    Խ
  50. ࠶ར༻Մೳͳίϯϙʔωϯτ΁ ͷཉ๬ • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯ͸ཁٻͨ͘͠ͳ ͍(babelͷόʔδϣϯͱ͔) • ͱ͸͍͑࢖༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ͸֤Ξϓ ϦέʔγϣϯͰ؅ཧ͍ͨ͠ • ݟͨ໨΋ἧ͍͑ͨ(styleఆٛ΋ؚΈ͍ͨ)

    • ͱ͸͍͑ར༻ଆͰstyleͷඍௐ੔͸͍ͨ͠(styleͷଧͪফ͠΍ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)
  51. WebpackʹΑΔ
 ίϯϙʔωϯτͷఏڙ

  52. Webpackͷexternalsͷࢦఆ

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

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

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

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

  57. css loaderͷར༻ IPHFSFBDUKT IPHFTDTT

  58. css loaderͷར༻

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

    • ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ
  60. ίϯϙʔωϯτͷߏ଄ͷن໿ ൪֎ଆʹ͸֎෦͔Β౉͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ ൪໨͸ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ ͦΕΑΓ಺ଆʹίϯϙʔωϯτͷ಺༰Λهड़͢Δ

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

  62. ։ൃ૊৫

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

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

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

  66. νʔϜ։ൃ

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

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

  69. ৘ใڞ༗

  70. ཧ૝ͷੈք΁ۙͮͨ͘Ίʹ

  71. We are hiring! http://jobs.jobvite.com/freee/jobs

  72. Thank you
 for your attention!