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

Transcript

1. 1.

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

   2018
2. 2.

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

   Web, JavaScript, React Sell, mercari NOW, CSTool @sottar_ sottar
3. 3.

   ϑϩϯτΤϯυͷಈ޲ɺ௥͍ͬͯ·͔͢

4. 4.

   ͔ͭͯͷϑϩϯτΤϯυ

5. 5.

   ☺

6. 6.

   ࠷ۙͷϑϩϯτΤϯυ

7. 7.

   None
8. 8.

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

9. 9.

   JavaScript ʹۤखҙࣝ͋Δ

10. 10.

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

11. 11.

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

    // global? local? if (true) { var hoge = ‘local’; console.log(hoge); // global? local? } } foo();
12. 12.

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

    // undefined if (true) { var hoge = ‘local’; console.log(hoge); // local } } foo();
13. 13.

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

    hoge; console.log(hoge); // -> undefined if (true) { var hoge = ‘local’; console.log(hoge); // -> local } } foo(); ࣮ࡍͷΤϯδϯͰ͸͜͏͍͏ղऍʹͳΔ
    
    
    ม਺ͷר্͖͛
14. 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); // sottar? }(); }; var sottar = new Person(‘sottar’) sottar.sayName();
15. 15.

    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();
16. 16.

    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
    ͷࢦ͍ͯ͠Δ΋ͷ͕ҟͳΔ
17. 17.

    JavaScript ͷ᠘̏ '' == false; '' === false; 9 +

    '1'; 9 - '1'; null == undefined 0.1 + 0.2 == 0.3; . . .
18. 18.

    JavaScript ͷ᠘̏ '' == false; // true '' === false;

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

    IUUQTUXJUUFSDPNDEFTJPTUBUVTQIPUP

20. 20.

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

21. 21.

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

    // undefined if (true) { var hoge = ‘local’; console.log(hoge); // local } } foo(); ม਺ͷר্͖͛໰୊
22. 22.

    ES2015 ͷ let ͔ const Λ࢖͏

23. 23.

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

    // global if (true) { const hoge = ‘local’; console.log(hoge); // local } } foo();
    
24. 24.

    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
    ͷࢀরมΘΔ໰୊
25. 25.

    ES2015 ͷΞϩʔؔ਺Λ࢖͏

26. 26.

    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
    ͷର৅͕มߋ͞Εͳ͍
    
27. 27.

    JavaScript ͷ᠘̏ '' == false; // true '' === false;

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

    ܕΛಋೖ͢Δ

29. 29.

    FlowType or TypeScript

30. 30.

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

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

    TypeScript ͷྫ IUUQTXXXUZQFTDSJQUMBOHPSHQMBZJOEFYIUNM

32. 32.

    FlowType ͷྫ IUUQTqPXPSHUSZ

33. 33.

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

    • Template literal, Spread operator, Destructuring assignment, import / export, Symbol ଞʹ΋͍Ζ͍Ζศརʹͳ͖͍ͬͯͯ·͢
34. 34.

    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();
35. 35.

    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();
36. 36.

    JavaScript ΋ਐԽ͍ͯ͠Δ

37. 37.

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

38. 38.

    SPA, SSR, BFF

39. 39.

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

    Ͱ DOM Λૢ࡞ͯ͠ϖʔδΛ੾Γସ͑Δ • Routing ͸ϑϩϯτଆͰߦͬͯɺదٓɺඞཁͳ৘ใΛAPIͰऔಘɾૹ৴͢Δ SPAͱ͸
40. 40.

    ैདྷͷΞϓϦέʔγϣϯ #SPXTFS 4FSWFS ᶃ
    Πϕϯτൃੜ
    ʢྫ͑͹ϖʔδભҠʣ ᶄ
    )551ϦΫΤετ ᶅ
    3PVUJOH
    )5.-ੜ੒ ᶆ
    )5.-

41. 41.

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

    ʢྫ͑͹ϖʔδભҠʣ ʢඞཁʹԠͯ͡σʔλΛऔಘʣ
42. 42.

    • ߴ଎ͳϖʔδભҠ • UXͷ޲্ • ։ൃɾӡ༻ίετ͕௿͍* SPA (Pros)

43. 43.

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

    (Cons)
44. 44.

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

45. 45.

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

46. 46.

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

47. 47.

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

    (Cons)
48. 48.

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

    (Cons)
49. 49.

    SSR

50. 50.

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

    Side Rendering ͱݺͿ • ͦΕʹରͯ͠ Server ଆ Ͱ΋ϨϯμϦϯά͢Δ͜ͱΛ Server Side Rendering ͱݺͿ • ॳճͷΞΫηεͷ͚࣌ͩ Server ଆͰ Rendering Λߦ͏ SSRͱ͸
51. 51.

    #SPXTFS 4FSWFS "1*
    
    %# DPNQPOFOUT 3FOEFSJOH 3FOEFSJOH 3FOEFSJOH
    ޙͷ)5.- 1BHF
    3FRVFTU ॳճΞΫηε࣌ʢSSRʣ ॳճΞΫηεҎ߱͸
    41"
    ͱͯ͠
    

    ΫϥΠΞϯτଆͰϨϯμϦϯάΛߦ͏ ϑϩϯτͱαʔόʔͰಉ͡
    ϩδοΫͰ
    3FOEFSJOH
    Λߦ͏
52. 52.

    • ✅ ॳճϨϯμϦϯά࣌ͷύϑΥʔϚϯε͕ѱ͍ • ✅ SEO ͕ෆ҆ఆ • ✅ OGPλά͕࢖͑ͳ͍

    Server Side Rendering
53. 53.

    BFF

54. 54.

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

    %BUBCBTF "1* "1* %BUBCBTF "1*
55. 55.

    ͳͥBFF͕ඞཁͳͷ͔

56. 56.

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

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

    • ϖʔδΛͭ͘Δ৔ॴͱσʔλΛ؅ཧ͢Δ৔ॴΛ෼͚͍ͨ • σʔλΛ؅ཧ͢Δͱ͜Ζ͸αʔόʔαΠυͰ؅ཧʢRESTͳͲʣ • ϖʔδΛ࡞Δͱ͜Ζ͸ϑϩϯτΤϯυͰ؅ཧʢϖʔδ͝ͱʹඞཁͳ৘ใʣ BFF͕ඞཁͳཧ༝

58. 58.

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

    ϖʔδΛߏங͢Δ σʔλͷૢ࡞ɾ؅ཧ 'SPOUFOE 4FSWFS
    TJEF
59. 59.

    ૄ݁߹ʹͳͬͯ੹຿Λ෼ׂͰ͖Δ
    

60. 60.

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

61. 61.

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

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

    IUUQTTXBHHFSJP

63. 63.

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

    or JSON Ͱ؅ཧՄೳ • REST API ͷઃܭ͔ΒυΩϡϝϯτԽɺςετɺσϓϩΠ·Ͱߦ ͏͜ͱ͕Ͱ͖Δ • APIఆٛ • Blueprint (ϞοΫ) • Codegen Swagger ͱ͸
64. 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. 65.

    • 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 ͱ͸
66. 66.

    Swagger Editor IUUQTFEJUPSTXBHHFSJP

67. 67.

    Swagger Editor "1*ͷϕʔε63-

68. 68.

    Swagger Editor εΩʔϚ

69. 69.

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

70. 70.

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

71. 71.

    Swagger Editor Ϩεϙϯε

72. 72.

    ϞοΫαʔόʔ΋࡞ΕΔ

73. 73.

    Swagger Editor

74. 74.

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

75. 75.

    Thank you