サーバーサイドエンジニアも知っておくべきフロントエンドの今

Rails Developers Meetup 2019

Transcript

1. αʔόʔαΠυΤϯδχΞ΋
   ஌͓ͬͯ͘΂͖
   ϑϩϯτΤϯυͷࠓ
   

   View Slide

2. ࣗݾ঺հ
   • ൘૔ ୡ໵ (@itkrt2y)
   • λέϢʔɾ΢Σϒגࣜձࣾ
   • Ruby on Rails ͷडୗ։ൃձࣾ
   • RubyKaigi 2019 Platinum εϙϯαʔ
   • Ruby on Rails ͷ͓࢓ࣄืूதʂ
   

   View Slide

3. View Slide

4. ࠓ೔࿩͢͜ͱ
   ϑϩϯτΤϯυͷ
   1. ݱࡏͷΤίγεςϜ
   2. ࠷ۙͷ஫໨ͷ࿩୊͔ΒҰͭϐοΫΞοϓ
   

   View Slide

5. ࠓ೔࿩͢͜ͱ
   ϑϩϯτΤϯυͷ
   1. ݱࡏͷΤίγεςϜ <=
   2. ࠷ۙͷ஫໨ͷ࿩୊͔ΒҰͭϐοΫΞοϓ
   

   View Slide

6. ݱࡏͷΤίγεςϜ
   

   View Slide

7. ݴޠ
   

   View Slide

8. ݴޠ
   TypeScript
   TS ʹग़དྷͳ͍ཧ༝͕͋Δ৔߹ͷΈ
   ESNext
   ʮTS Λಋೖ͢΂͖͔ʯͰ೰Ή࣌୅͸ط
   ʹऴΘ͍ͬͯΔ
   

   View Slide

9. ίϯύΠϧʢτϥϯεύΠϧʣઌ
   Ұൠతʹ͸ ES5
   ͨͩɺͦΖͦΖ IE11 ඇରԠͷܾஅΛͯ͠ɺES2015 Ҏ্ʹͯ͠
   ΋͍͍࣌୅
   

   View Slide

10. DOM ؅ཧ
    

    View Slide

11. DOM ؅ཧ
    Ծ૝ DOM ܥʢએݴత Viewʣ
    • React
    • Vue
    • Angular
    • Elm
    

    View Slide

12. એݴత View ʹΑΓ DOM ͕؅ཧՄೳʹ
    Ҏલ͸ jQuery ͳͲͰखଓ͖తʹ DOM Λૢ࡞͍ͯͨ͠ɻ
    Ծ૝ DOM ʹΑͬͯαʔόʔαΠυతͳʮ͋Δঢ়ଶʹରͯ͋͠
    Δ΂͖ DOM Λఆٛ͢Δʯͱ͍͏એݴత View ͷύϥμΠϜ͕ϑ
    ϩϯτΤϯυʹ࣋ͪࠐ·ΕɺJS Ͱ DOM Λ؅ཧͰ͖ΔΑ͏ʹ
    ͳͬͨɻ
    

    View Slide

13. lit-html
    Google ͷ Polymer νʔϜ͕࡞͍ͬͯΔ
    ϥΠϒϥϦ
    Ծ૝ DOM Ͱ͸ͳ͍͚ͲɺDOM ͷ diff
    Λऔͬͯࠩ෼ߋ৽ग़དྷͯɺԾ૝ DOM ܥ
    ΑΓ΋଎͍
    ·ͩྲྀߦΒͳ͍ͱࢥ͏͚Ͳɺ
    ஌͓͍ͬͯͯଛ͸ͳ͍Ͱ͢
    

    View Slide

14. Editor
    

    View Slide

15. Editor
    Visual Studio Code
    vscode + TypeScript + ESLint + Prettier
    ͷ։ൃମݧ͕ྑ͗͢Δɻ
    ଞͷΤσΟλΛ࢖͍͍ͨਓ΋ɺ·ͣ͸͜
    ͷ։ൃମݧΛຯΘ্ͬͨͰଞͷΤσΟλ
    Λ࢖͍ͬͯͩ͘͞ɻ
    

    View Slide

16. Linter
    

    View Slide

17. Linter
    • ESLint
    • TSLintʢͨͩ͠ɺۙʑ deprecated ʹ
    ͳΔʣ
    ੲ͸ JSHint, JSLint ͳͲ͋Γ·͕ͨ͠ɺ
    ࠓ͸ ESLint Ұڧ
    

    View Slide

18. Formatter
    

    View Slide

19. Formatter
    Prettier
    ࠓ೥ʹೖ͔ͬͯΒ prettier-ruby ͷ։ൃ
    ͕ٸܹʹਐΜͰ͍Δͷ͕ͱͯ΋خ͍͠
    

    View Slide

20. module bundler
    

    View Slide

21. module bundler
    • WEB αʔϏε։ൃ => webpack
    • ϥΠϒϥϦ։ൃ => Rollup
    pika ͷಈ޲͸ཁνΣοΫ
    webpacker ͸࢖Θͳ͍ํ͕͍͍Ͱ͢
    

    View Slide

22. Test
    

    View Slide

23. Test
    • Jest
    • E2E ςετ͸ Jest + Puppeteer
    ੲ͸ Mocha, Chai, Karma, Jasmine ͳͲ
    ৭ʑ͋Γ·͕ͨ͠ɺࠓ͸جຊ Jest
    

    View Slide

24. ඇಉظॲཧ
    

    View Slide

25. ඇಉظॲཧ
    axios
    GET ͚ͩͳΒ fetch Ͱ΋͍͍Ͱ͕͢ɺGET Ҏ֎Λ࢝͠ΊΔͱ໘
    ౗ʹͳΔͷͰ axios ͕Φεεϝ
    ajax ͸ࠓ͔Βಋೖ͢Δٕज़Ͱ͸΋͏ͳ͍Ͱ͢
    

    View Slide

26. Web Components
    

    View Slide

27. Web Components
    polyfill ΛೖΕΕ͹࢖͑Δٕज़ʹ͸ͳ͍ͬͯΔɻ
    ͨͩɺpolyfill ͷग़དྷ͕ѱ͍ͱ͍͏࿩͕͋ΔͷͰɺ࢖͏࣌͸஫ҙ
    ͕ඞཁɻ
    

    View Slide

28. Web Components ͰԾ૝ DOM ͸ࢮ͵ʁ
    ݱঢ়ͷ Web Components ͸Ծ૝ DOM ʹൺ΂ͯ໌Β͔ʹػೳ
    ͕଍Γ͍ͯͳ͍͠ෆࣗ༝ͳͷͰɺࠓͷͱ͜ΖͦΕ͸ͳ͍
    ͨͩɺWeb Components Ͱॻ͚Δ΋ͷ͸ Web Components Ͱ
    ॻ͘ྲྀΕʹ͸ͳ͖͍ͬͯͯΔɻ
    

    View Slide

29. Ҏ্ɺݱࡏͷΤίγεςϜͰͨ͠
    

    View Slide

30. ࠓ೔࿩͢͜ͱ
    ϑϩϯτΤϯυͷ
    1. ݱࡏͷΤίγεςϜ
    2. ࠷ۙͷ஫໨ͷ࿩୊͔ΒҰͭϐοΫΞοϓ <=
    

    View Slide

31. ࠷ۙͷ஫໨ͷ࿩୊
    

    View Slide

32. ࠷ۙͷ஫໨ͷ࿩୊
    • CDN Worker
    • Micro Frontends
    • PWA
    • ϨϯμϦϯά࠷దԽ
    • Web Payments / Web Authentication
    

    View Slide

33. ࠷ۙͷ஫໨ͷ࿩୊
    • CDN Worker <= ࠓ೔͸͜Ε͚ͩ
    • Micro Frontends
    • PWA
    • ϨϯμϦϯά࠷దԽ
    • Web Payments / Web Authentication
    

    View Slide

34. CDN Worker
    

    View Slide

35. ͓͜ͱΘΓ
    ਖ਼໊ࣜশ͕ଟ෼ଘࡏ͠ͳ͍ͷͰɺCDN Worker ͸ԾͷදݱͰ͢
    

    View Slide

36. CDN Worker ͱ͸ʁ
    CDN ΁ͷϦΫΤετɾϨεϙϯεʹϑοΫͯ͠ɺCDN ͷ͋Δ
    ΤοδϩέʔγϣϯͰॲཧΛ૸ΒͤΔ͜ͱͷͰ͖Δ JS ࣮ߦ؀ڥ
    

    View Slide

37. ϓϥοτϑΥʔϜ
    • AWS Lambda@Edge + CloudFront
    • Cloudflare Workers
    • Google Cloud Functions + Firebase Hosting
    Cloud Functions ͷ࣮ߦ؀ڥ͸ΤοδϩέʔγϣϯͰ͸ͳ͍͕ɺ΍ΕΔ͜ͱ͸େମಉ͡
    

    View Slide

38. CDN Worker ͷ
    ೤͍ͱ͜Ζ
    

    View Slide

39. BFF Λ
    Τοδϩέʔγϣϯʹ
    ஔ͚Δ
    

    View Slide

40. BFF
    Backend For Frontend
    ϑϩϯτΤϯυͱόοΫΤϯυͷ஥հ໾
    ໾ׂͷྫ
    • ೝূ
    • API Aggregation
    • Server Side Rendering
    • Cache
    

    View Slide

41. SPA ٕज़Λ༻͍ͨ؀ڥͰ
    ͜Ε·Ͱ΍Γ͔ͨͬͨ͜ͱͱ
    ͦͷ՝୊
    

    View Slide

42. ΍Γ͔ͨͬͨ͜ͱ 1
    1. FMP / SEO Λ࠷దԽ͍ͨ͠
    2. ͦͷͨΊʹ͸ɺϨϯμϦϯάࡁΈ HTML ΛΫϥΠΞϯτʹૹΓͨ
    ͍
    3. ͭ·ΓɺSSR ͍ͨ͠
    ՝୊
    SSR ʹ͸ JS ࣮ߦ؀ڥ͕ඞཁ
    

    View Slide

43. ΍Γ͔ͨͬͨ͜ͱ 2
    1. RTT Λߴ଎Խ͍ͨ͠
    2. ͦͷͨΊʹ͸ɺ௨৴ڑ཭Λ࠷୹ʹ͍ͨ͠
    3. ͭ·ΓɺΤοδϩέʔγϣϯͰ௨৴Λ׬͍݁ͨ͠
    ՝୊
    ಈతαΠτͷ৔߹ɺΦϦδϯαʔόʔͰ HTML Λ࡞ͬͯૹͬͯ΋ΒΘ
    ͳ͚Ε͹ͳΒͳ͍
    

    View Slide

44. CDN Worker ͳΒղܾͰ͖Δ
    • ΤοδϩέʔγϣϯͰϨϯμϦϯάͯ͠ϨεϙϯεΛฦͤΔ
    • ϨϯμϦϯάࡁΈ HTML Λ CDN ʹΩϟογϡ͢Δ͜ͱͰɺ2 ճ໨Ҏ߱ͷϨε
    ϙϯε͸͞Βʹ଎͍
    • ࠷ߴͷ RTT / FMP / SEO
    • ϨϯμϦϯά༻ͷ Node.js αʔόʔΛࣗલͰݐͯͳ͍͍ͯ͘
    • ΦϦδϯαʔόʔΛͲͷϦʔδϣϯʹஔ͍ͯ΋଎౓͕໰୊ͳ͘ͳΔ
    • ίετͷ͍҆ɾαʔϏεఏڙͷૣ͍ϦʔδϣϯΛબ୒Ͱ͖ΔΑ͏ʹͳΔ
    • ΦϦδϯαʔόʔ΁ͷϦΫΤετ਺Λ࠷খԽͰ͖Δ
    

    View Slide

45. Ұ൪ظ଴͍ͯ͠ΔϓϥοτϑΥʔϜ
    

    View Slide

46. Ҏ্ɺCDN Worker Ͱͨ͠
    

    View Slide

47. ࠷ޙʹɺϑϩϯτΤϯυʹ͍ͭͯ఻͍͑ͨ͜ͱ
    • ΤίγεςϜ͸े෼ʹ੒ख़͍ͯ͠Δ
    • ։ൃମݧ͕΋ͷ͘͢͝ྑ͘ͳ͍ͬͯΔ
    • ϥΠϒϥϦͷཚཱ΋མͪண͍͍ͯͯɺมԽ͸ૣ͘ͳ͍
    • ࠷ۙͷ࿩୊͸ UX ʹ௚݁͢Δ΋ͷ͕ଟ͍
    • ϢʔβʔͷͨΊʹ΋ɺαʔόʔαΠυΤϯδχΞ΋ཧղ࣮͠ફ͢Δ΂͖
    • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱ؅ཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ
    ଘࡏ͢Δ
    • ࠷దͳઃܭΛߟ͑Δʹ͸ɺϑϩϯτΤϯυͷ஌ࣝ΋ඞਢ
    

    View Slide