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

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

Transcript

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

   View Slide

2. about me
   Sota Ohara / sottar
   Mercari, Inc.
   Software Engineer
   Web, JavaScript, React
   Sell, mercari NOW, CSTool
   @sottar_
   sottar
   

   View Slide

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

   View Slide

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

   View Slide

5. ☺
   

   View Slide

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

   View Slide

7. View Slide

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

   View Slide

9. JavaScript ʹۤखҙࣝ͋Δ
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. IUUQTUXJUUFSDPNDEFTJPTUBUVTQIPUP
    

    View Slide

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

    View Slide

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

    View Slide

22. ES2015 ͷ let ͔ const Λ࢖͏
    

    View Slide

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

    View Slide

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

    View Slide

25. ES2015 ͷΞϩʔؔ਺Λ࢖͏
    

    View Slide

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

    View Slide

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

    View Slide

28. ܕΛಋೖ͢Δ
    

    View Slide

29. FlowType or TypeScript
    

    View Slide

30. • ͲͪΒ΋ JavaScript ͷੈքʹܕΛ΋ͨΒ͢΋ͷ
    • FlowType ͸ Facebook੡ɺTypeScript ͸ Microsoft ੡
    • React ͸ FlowType ΛಋೖɺAngular ͸ TypeScript Λಋೖ
    • Flowtype ͸ϓϩδΣΫτͷ్த͔Β΋ಋೖՄೳ
    FlowType or TypeScript
    

    View Slide

31. TypeScript ͷྫ
    IUUQTXXXUZQFTDSJQUMBOHPSHQMBZJOEFYIUNM
    

    View Slide

32. FlowType ͷྫ
    IUUQTqPXPSHUSZ
    

    View Slide

33. • ίʔϧόοΫ஍ࠈ => Promise, Async / Await
    • class ߏจ
    • Template literal, Spread operator, Destructuring assignment,
    import / export, Symbol
    ଞʹ΋͍Ζ͍Ζศརʹͳ͖͍ͬͯͯ·͢
    

    View Slide

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

    View Slide

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

    View Slide

36. JavaScript ΋ਐԽ͍ͯ͠Δ
    

    View Slide

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

    View Slide

38. SPA, SSR, BFF
    

    View Slide

39. • Single Page Application ͷུ
    • ୯ҰϖʔδͰߏ੒͞ΕΔWebΞϓϦέʔγϣϯ
    • ϖʔδભҠΛߦΘͣʹ JavaScript Ͱ DOM Λૢ࡞ͯ͠ϖʔδΛ੾Γସ͑Δ
    • Routing ͸ϑϩϯτଆͰߦͬͯɺదٓɺඞཁͳ৘ใΛAPIͰऔಘɾૹ৴͢Δ
    SPAͱ͸
    

    View Slide

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

    View Slide

41. SPA
    #SPXTFS
    ᶅ"KBY
    ᶆσʔλऔಘ
    ᶇKTPO
    +4
    ᶈը໘Λߋ৽
    4FSWFS
    ᶄ3PVUJOH
    ᶃΠϕϯτൃੜ
    ʢྫ͑͹ϖʔδભҠʣ
    ʢඞཁʹԠͯ͡σʔλΛऔಘʣ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. SSR
    

    View Slide

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

    View Slide

51. #SPXTFS 4FSWFS
    "1*%#
    DPNQPOFOUT
    3FOEFSJOH
    3FOEFSJOH
    3FOEFSJOHޙͷ)5.-
    1BHF3FRVFTU
    ॳճΞΫηε࣌ʢSSRʣ
    ॳճΞΫηεҎ߱͸41"ͱͯ͠
    ΫϥΠΞϯτଆͰϨϯμϦϯάΛߦ͏
    ϑϩϯτͱαʔόʔͰಉ͡
    ϩδοΫͰ3FOEFSJOHΛߦ͏
    

    View Slide

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

    View Slide

53. BFF
    

    View Slide

54. • Backends for Frontends ͷུ
    BFFͱ͸
    #SPXTFS
    #BDLFOET
    GPS
    'SPOUFOET
    %BUBCBTF
    "1*
    "1*
    %BUBCBTF
    "1*
    

    View Slide

55. ͳͥBFF͕ඞཁͳͷ͔
    

    View Slide

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

    View Slide

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

    View Slide

58. BFFͱ͸
    #SPXTFS
    %BUBCBTF
    "1*
    "1*
    %BUBCBTF
    #BDLFOET
    GPS
    'SPOUFOET
    "1*
    ϖʔδΛߏங͢Δ σʔλͷૢ࡞ɾ؅ཧ
    'SPOUFOE 4FSWFSTJEF
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

62. IUUQTTXBHHFSJP
    

    View Slide

63. • The world’s most popular framework for APIs.ʢެࣜʣ
    • YAML or JSON Ͱ؅ཧՄೳ
    • REST API ͷઃܭ͔ΒυΩϡϝϯτԽɺςετɺσϓϩΠ·Ͱߦ
    ͏͜ͱ͕Ͱ͖Δ
    • APIఆٛ
    • Blueprint (ϞοΫ)
    • Codegen
    Swagger ͱ͸
    

    View Slide

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 ͱ͸
    

    View Slide

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 ͱ͸
    

    View Slide

66. Swagger Editor
    IUUQTFEJUPSTXBHHFSJP
    

    View Slide

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

    View Slide

68. Swagger Editor
    εΩʔϚ
    

    View Slide

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

    View Slide

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

    View Slide

71. Swagger Editor
    Ϩεϙϯε
    

    View Slide

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

    View Slide

73. Swagger Editor
    

    View Slide

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

    View Slide

75. Thank you
    

    View Slide