フロントエンドエンジニアが伝えたい最近の事情

1bf676e4bd36a48bf616c82d6f52c83a?s=47 sota ohara
July 14, 2018
16k

 フロントエンドエンジニアが伝えたい最近の事情

2018-07-14 PHPカンファレンス関西

1bf676e4bd36a48bf616c82d6f52c83a?s=128

sota ohara

July 14, 2018
Tweet

Transcript

  1. ϑϩϯτΤϯυΤϯδχΞ͕఻͍͑ͨ࠷ۙͷࣄ৘ Mercari, Inc. Software Engineer Sota Ohara PHP Conference Kansai

    2018
  2. about me Sota Ohara / sottar Mercari, Inc. Software Engineer

    Web, JavaScript, React Sell, mercari NOW, CSTool @sottar_ sottar
  3. ϑϩϯτΤϯυͷಈ޲ɺ௥͍ͬͯ·͔͢

  4. ͔ͭͯͷϑϩϯτΤϯυ

  5. ࠷ۙͷϑϩϯτΤϯυ

  6. None
  7. • JavaScript ࣗମͷ࿩͠ • ϑϩϯτΤϯυपΓͷ৭ʑͳτϨϯυͷ࿩͠ • ϑϩϯτΤϯυΤϯδχΞͱ͏·͘ڠۀ͢Δํ๏ ࠓ೔͸͜͏ݴͬͨ࿩͠Λ͠·͢

  8. JavaScript ʹۤखҙࣝ͋Δ

  9. ͍Ζ͍Ζ᠘͕࢓ֻ͚ΒΕ͍ͯΔ DBMMCBDL஍ࠈͱ͔ ಈతͳܕม׵ͷڍಈ͕Θ͔Γʹ͍͘ͱ͔ VOEFpOFEͱOVMMͱ͔ ͳͷ͔ͳͷ͔ͱ͔ &$."4DSJQUͬͯͳΜͰ͔͢ͱ͔ ม਺ͷר্͖͛ͱ͔ UIJT͕Α͘Θ͔Βͳ͍ͱ͔ QSPUPUZQFͬͯͳʹͱ͔

  10. JavaScript ͷ᠘̍ var hoge = ‘global’; function foo() { console.log(hoge);

    // global? local? if (true) { var hoge = ‘local’; console.log(hoge); // global? local? } } foo();
  11. JavaScript ͷ᠘̍ var hoge = ‘global’; function foo() { console.log(hoge);

    // undefined if (true) { var hoge = ‘local’; console.log(hoge); // local } } foo();
  12. JavaScript ͷ᠘̍ var hoge = ‘global’; function foo() { var

    hoge; console.log(hoge); // -> undefined if (true) { var hoge = ‘local’; console.log(hoge); // -> local } } foo(); ࣮ࡍͷΤϯδϯͰ͸͜͏͍͏ղऍʹͳΔ ม਺ͷר্͖͛
  13. JavaScript ͷ᠘̎ var Person = function(name){ this.name = name; };

    Person.prototype.sayName = function(){ console.log(this.name); // sottar? var hoge = function() { console.log(this.name); // sottar? }(); }; var sottar = new Person(‘sottar’) sottar.sayName();
  14. JavaScript ͷ᠘̎ var Person = function(name){ this.name = name; };

    Person.prototype.sayName = function(){ console.log(this.name); // sottar var hoge = function() { console.log(this.name); // undefined }(); }; var sottar = new Person(‘sottar’) sottar.sayName();
  15. JavaScript ͷ᠘̎ var Person = function(name){ this.name = name; };

    Person.prototype.sayName = function(){ console.log(this.name); // this -> Person var name = function() { console.log(this.name); // this -> Global Object }(); }; var sottar = new Person(‘sottar’) sottar.sayName(); UIJTͷࢦ͍ͯ͠Δ΋ͷ͕ҟͳΔ
  16. JavaScript ͷ᠘̏ '' == false; '' === false; 9 +

    '1'; 9 - '1'; null == undefined 0.1 + 0.2 == 0.3; . . .
  17. JavaScript ͷ᠘̏ '' == false; // true '' === false;

    // false 9 + '1'; // '91' 9 - '1'; // 8 null == undefined // true 0.1 + 0.2 == 0.3; // false . . .
  18. IUUQTUXJUUFSDPNDEFTJPTUBUVTQIPUP

  19. ͜͏͍ͬͨ᠘Λճආ͢ΔͨΊͷ؀ڥ͸੔͍ͭͭ͋Δ

  20. JavaScript ͷ᠘̍ var hoge = ‘global’; function foo() { console.log(hoge);

    // undefined if (true) { var hoge = ‘local’; console.log(hoge); // local } } foo(); ม਺ͷר্͖͛໰୊
  21. ES2015 ͷ let ͔ const Λ࢖͏

  22. JavaScript ͷ᠘̍ const hoge = ‘global’; function foo() { console.log(hoge);

    // global if (true) { const hoge = ‘local’; console.log(hoge); // local } } foo(); 
  23. JavaScript ͷ᠘̎ var Person = function(name){ this.name = name; };

    Person.prototype.sayName = function(){ console.log(this.name); // sottar var name = function() { console.log(this.name); // undefined }(); }; var sottar = new Person(‘sottar’) sottar.sayName(); UIJTͷࢀরมΘΔ໰୊
  24. ES2015 ͷΞϩʔؔ਺Λ࢖͏

  25. JavaScript ͷ᠘̎ var Person = function(name){ this.name = name; };

    Person.prototype.sayName = function(){ console.log(this.name); // sottar var hoge = () => { console.log(this.name); // sottar }; hoge(); }; var sottar = new Person(‘sottar’) sottar.sayName(); UIJTͷର৅͕มߋ͞Εͳ͍ 
  26. JavaScript ͷ᠘̏ '' == false; // true '' === false;

    // false 9 + '1'; // '91' 9 - '1'; // 8 null == undefined // true 0.1 + 0.2 == 0.3; // false . . . ܕม׵Α͘Θ͔Βͳ͍໰୊
  27. ܕΛಋೖ͢Δ

  28. FlowType or TypeScript

  29. • ͲͪΒ΋ JavaScript ͷੈքʹܕΛ΋ͨΒ͢΋ͷ • FlowType ͸ Facebook੡ɺTypeScript ͸ Microsoft

    ੡ • React ͸ FlowType ΛಋೖɺAngular ͸ TypeScript Λಋೖ • Flowtype ͸ϓϩδΣΫτͷ్த͔Β΋ಋೖՄೳ FlowType or TypeScript
  30. TypeScript ͷྫ IUUQTXXXUZQFTDSJQUMBOHPSHQMBZJOEFYIUNM

  31. FlowType ͷྫ IUUQTqPXPSHUSZ

  32. • ίʔϧόοΫ஍ࠈ => Promise, Async / Await • class ߏจ

    • Template literal, Spread operator, Destructuring assignment, import / export, Symbol ଞʹ΋͍Ζ͍Ζศརʹͳ͖͍ͬͯͯ·͢
  33. class Λ࢖͏ͱ var Person = function(name){ this.name = name; };

    Person.prototype.sayName = function(){ console.log(this.name); var name = function() { console.log(this.name); }(); }; var sottar = new Person(‘sottar’) sottar.sayName();
  34. class Λ࢖͏ͱ class Person { constructor(name){ This.name = name; }

    sayName = () => { console.log(this.name); var name = () => { console.log(this.name); }; name(); } } const sottar = new Person(‘sottar’) sottar.sayName();
  35. JavaScript ΋ਐԽ͍ͯ͠Δ

  36. • JavaScriptࣗମͷ࿩͠ • ϑϩϯτΤϯυपΓͷ৭ʑͳτϨϯυͷ࿩͠ • ϑϩϯτΤϯυΤϯδχΞͱ͏·͘ڠۀ͢Δํ๏ ࠓ೔͸͜͏ݴͬͨ࿩͠Λ͠·͢

  37. SPA, SSR, BFF

  38. • Single Page Application ͷུ • ୯ҰϖʔδͰߏ੒͞ΕΔWebΞϓϦέʔγϣϯ • ϖʔδભҠΛߦΘͣʹ JavaScript

    Ͱ DOM Λૢ࡞ͯ͠ϖʔδΛ੾Γସ͑Δ • Routing ͸ϑϩϯτଆͰߦͬͯɺదٓɺඞཁͳ৘ใΛAPIͰऔಘɾૹ৴͢Δ SPAͱ͸
  39. ैདྷͷΞϓϦέʔγϣϯ #SPXTFS 4FSWFS ᶃΠϕϯτൃੜ ʢྫ͑͹ϖʔδભҠʣ ᶄ)551ϦΫΤετ ᶅ3PVUJOH )5.-ੜ੒ ᶆ)5.-

  40. SPA #SPXTFS ᶅ"KBY ᶆσʔλऔಘ ᶇKTPO +4 ᶈը໘Λߋ৽ 4FSWFS ᶄ3PVUJOH ᶃΠϕϯτൃੜ

    ʢྫ͑͹ϖʔδભҠʣ ʢඞཁʹԠͯ͡σʔλΛऔಘʣ
  41. • ߴ଎ͳϖʔδભҠ • UXͷ޲্ • ։ൃɾӡ༻ίετ͕௿͍* SPA (Pros)

  42. • ֶशίετߴ͍ • ॳճΞΫηε࣌ʹύϑΥʔϚϯε͕ѱ͍ • SEO ͕ෆ҆ఆ • OGPλά͕࢖͑ͳ͍ SPA

    (Cons)
  43. ॳճΞΫηε࣌ #SPXTFS 4FSWFS 1BHF3FRVFTU ۭͷ)5.-ฦ͢ 3FOEFSJOH ॳճදࣔʹ͕͔͔࣌ؒΔʂʂ ෳ਺ϖʔδ෼ͷڊେͳKTΛ ಡΈࠐΜͰ࣮ߦ͢Δ ඞཁʹԠͯ͡"1*ୟ͘

  44. SEO ͕ෆ҆ఆɺOGPλά͕࢖͑ͳ͍

  45. Ϋϩʔϥʔ͕ JavaScript Λղੳͯ͘͠Εͳ͍ͱ ۭͷϖʔδͩͱೝࣝ͞ΕΔ

  46. • SEO ͕ෆ҆ఆ • جຊతʹ͸ google ͷΫϩʔϥʔ͸ JavaScript Λ࣮ߦͯ͘͠ΕΔ͕… SPA

    (Cons)
  47. • OGPλά͕࢖͑ͳ͍ • Twitter ΍ facebook ͸ JavaScript Λղੳͯ͘͠Εͳ͍ SPA

    (Cons)
  48. SSR

  49. • Server Side Rendering ͷུ • Client ଆ ͰϨϯμϦϯά͢Δ͜ͱΛ Client

    Side Rendering ͱݺͿ • ͦΕʹରͯ͠ Server ଆ Ͱ΋ϨϯμϦϯά͢Δ͜ͱΛ Server Side Rendering ͱݺͿ • ॳճͷΞΫηεͷ͚࣌ͩ Server ଆͰ Rendering Λߦ͏ SSRͱ͸
  50. #SPXTFS 4FSWFS "1*%# DPNQPOFOUT 3FOEFSJOH 3FOEFSJOH 3FOEFSJOHޙͷ)5.- 1BHF3FRVFTU ॳճΞΫηε࣌ʢSSRʣ ॳճΞΫηεҎ߱͸41"ͱͯ͠

    ΫϥΠΞϯτଆͰϨϯμϦϯάΛߦ͏ ϑϩϯτͱαʔόʔͰಉ͡ ϩδοΫͰ3FOEFSJOHΛߦ͏
  51. • ✅ ॳճϨϯμϦϯά࣌ͷύϑΥʔϚϯε͕ѱ͍ • ✅ SEO ͕ෆ҆ఆ • ✅ OGPλά͕࢖͑ͳ͍

    Server Side Rendering
  52. BFF

  53. • Backends for Frontends ͷུ BFFͱ͸ #SPXTFS #BDLFOET GPS 'SPOUFOET

    %BUBCBTF "1* "1* %BUBCBTF "1*
  54. ͳͥBFF͕ඞཁͳͷ͔

  55. • ैདྷͷ web ΞϓϦέʔγϣϯ • HTMLςϯϓϨʔτͰදࣔ • ߋ৽͸ form ܥ

    • SPAతͳ web ΞϓϦέʔγϣϯ • ϖʔδ͝ͱʹඞཁͳ৘ใΛ Ajax Ͱऔಘ͢Δ • ಈ͖΋ Ajax Λ࢖ͬͯΠϯλϥΫςΟϒʹ • 1ϖʔδදࣔ͢ΔͷʹԿճ΋APIΛ౤͛Δͷ͸ύϑΥʔϚϯε্Α͘ͳ͍ • υϝΠϯ୯ҐͰ͸ͳ͘ϖʔδ΍ඞཁͳ৘ใ୯ҐͰΤϯυϙΠϯτΛ࡞Γ͍ͨ BFF͕ඞཁͳཧ༝
  56. • ϖʔδΛͭ͘Δ৔ॴͱσʔλΛ؅ཧ͢Δ৔ॴΛ෼͚͍ͨ • σʔλΛ؅ཧ͢Δͱ͜Ζ͸αʔόʔαΠυͰ؅ཧʢRESTͳͲʣ • ϖʔδΛ࡞Δͱ͜Ζ͸ϑϩϯτΤϯυͰ؅ཧʢϖʔδ͝ͱʹඞཁͳ৘ใʣ BFF͕ඞཁͳཧ༝

  57. BFFͱ͸ #SPXTFS %BUBCBTF "1* "1* %BUBCBTF #BDLFOET GPS 'SPOUFOET "1*

    ϖʔδΛߏங͢Δ σʔλͷૢ࡞ɾ؅ཧ 'SPOUFOE 4FSWFSTJEF
  58. ૄ݁߹ʹͳͬͯ੹຿Λ෼ׂͰ͖Δ 

  59. • JavaScriptࣗମͷ࿩͠ • ϑϩϯτΤϯυपΓͷ৭ʑͳτϨϯυͷ࿩͠ • ϑϩϯτΤϯυΤϯδχΞͱ͏·͘ڠۀ͢Δํ๏ ࠓ೔͸͜͏ݴͬͨ࿩͠Λ͠·͢

  60. • ϑϩϯτΤϯυ͔Β΋࢖͍΍͍͢APIઃܭΛߦ͍͍ͨ • APIͷΤϯυϙΠϯτͱฦͬͯ͘ΔJSONͷத਎͕ܾ·ͬͪΌ͑͹ ͋ͱ͸෼ۀͰ͖Δ • ͭ·ΓઌʹAPIΛϑϩϯτΤϯυɺαʔόʔαΠυ྆ํͷࢹ఺Λ ࣋ͬͯఆٛ͢Δඞཁ͕͋Δ • Protocol

    Buffers, API blueprint, excel … ͏·͘ڠۀ͢Δʹ͸
  61. IUUQTTXBHHFSJP

  62. • The world’s most popular framework for APIs.ʢެࣜʣ • YAML

    or JSON Ͱ؅ཧՄೳ • REST API ͷઃܭ͔ΒυΩϡϝϯτԽɺςετɺσϓϩΠ·Ͱߦ ͏͜ͱ͕Ͱ͖Δ • APIఆٛ • Blueprint (ϞοΫ) • Codegen Swagger ͱ͸
  63. • Swagger Editor • to design, define and document RESTful

    APIs in the Swagger Specification. • Swagger Codegen • to build server stubs and client SDKs directly from a Swagger defined RESTful API • Swagger UI • meant for consumption by JavaScript web projects that include module bundlers, such as Webpack, Browserify, and Rollup Swagger ͱ͸
  64. • Swagger Editor • to design, define and document RESTful

    APIs in the Swagger Specification. • Swagger Codegen • to build server stubs and client SDKs directly from a Swagger defined RESTful API • Swagger UI • meant for consumption by JavaScript web projects that include module bundlers, such as Webpack, Browserify, and Rollup Swagger ͱ͸
  65. Swagger Editor IUUQTFEJUPSTXBHHFSJP

  66. Swagger Editor "1*ͷϕʔε63-

  67. Swagger Editor εΩʔϚ

  68. Swagger Editor "1*ͷύεɾ)551ϝιου

  69. Swagger Editor CPEZͷఆٛ NPEFMΛࢀর͢Δ͜ͱ΋Ͱ͖Δ

  70. Swagger Editor Ϩεϙϯε

  71. ϞοΫαʔόʔ΋࡞ΕΔ

  72. Swagger Editor

  73. • JavaScript ͸ES2015Ͱ͔ͳΓਐԽ͠ɺ᠘΋ݮͬͨ • ͓ޓ͍ؾ࣋ͪΑ͘։ൃ͢ΔͨΊʹɺ࠷௿ݶͰ΋͓ޓ͍ͷ͜ͱΛ஌ͬ ͓ͯ͘͜ͱ͸େ੾ ·ͱΊ

  74. Thank you