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

Transcript

1. 1.

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

2. 2.

   ࣗݾ঺հ • ൘૔ ୡ໵ (@itkrt2y) • λέϢʔɾ΢Σϒגࣜձࣾ • Ruby on

   Rails ͷडୗ։ൃձࣾ • RubyKaigi 2019 Platinum εϙϯαʔ • Ruby on Rails ͷ͓࢓ࣄืूதʂ
3. 3.

   None
4. 4.

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

5. 5.

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

6. 6.

   ݱࡏͷΤίγεςϜ

7. 7.

   ݴޠ

8. 8.

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

9. 9.

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

10. 10.

    DOM ؅ཧ

11. 11.

    DOM ؅ཧ Ծ૝ DOM ܥʢએݴత Viewʣ • React • Vue

    • Angular • Elm
12. 12.

    એݴత View ʹΑΓ DOM ͕؅ཧՄೳʹ Ҏલ͸ jQuery ͳͲͰखଓ͖తʹ DOM Λૢ࡞͍ͯͨ͠ɻ

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

    lit-html Google ͷ Polymer νʔϜ͕࡞͍ͬͯΔ ϥΠϒϥϦ Ծ૝ DOM Ͱ͸ͳ͍͚ͲɺDOM ͷ

    diff Λऔͬͯࠩ෼ߋ৽ग़དྷͯɺԾ૝ DOM ܥ ΑΓ΋଎͍ ·ͩྲྀߦΒͳ͍ͱࢥ͏͚Ͳɺ ஌͓͍ͬͯͯଛ͸ͳ͍Ͱ͢
14. 14.

    Editor

15. 15.

    Editor Visual Studio Code vscode + TypeScript + ESLint +

    Prettier ͷ։ൃମݧ͕ྑ͗͢Δɻ ଞͷΤσΟλΛ࢖͍͍ͨਓ΋ɺ·ͣ͸͜ ͷ։ൃମݧΛຯΘ্ͬͨͰଞͷΤσΟλ Λ࢖͍ͬͯͩ͘͞ɻ
16. 16.

    Linter

17. 17.

    Linter • ESLint • TSLintʢͨͩ͠ɺۙʑ deprecated ʹ ͳΔʣ ੲ͸ JSHint,

    JSLint ͳͲ͋Γ·͕ͨ͠ɺ ࠓ͸ ESLint Ұڧ
18. 18.

    Formatter

19. 19.

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

20. 20.

    module bundler

21. 21.

    module bundler • WEB αʔϏε։ൃ => webpack • ϥΠϒϥϦ։ൃ =>

    Rollup pika ͷಈ޲͸ཁνΣοΫ webpacker ͸࢖Θͳ͍ํ͕͍͍Ͱ͢
22. 22.

    Test

23. 23.

    Test • Jest • E2E ςετ͸ Jest + Puppeteer ੲ͸

    Mocha, Chai, Karma, Jasmine ͳͲ ৭ʑ͋Γ·͕ͨ͠ɺࠓ͸جຊ Jest
24. 24.

    ඇಉظॲཧ

25. 25.

    ඇಉظॲཧ axios GET ͚ͩͳΒ fetch Ͱ΋͍͍Ͱ͕͢ɺGET Ҏ֎Λ࢝͠ΊΔͱ໘ ౗ʹͳΔͷͰ axios ͕Φεεϝ

    ajax ͸ࠓ͔Βಋೖ͢Δٕज़Ͱ͸΋͏ͳ͍Ͱ͢
26. 26.

    Web Components

27. 27.

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

28. 28.

    Web Components ͰԾ૝ DOM ͸ࢮ͵ʁ ݱঢ়ͷ Web Components ͸Ծ૝ DOM

    ʹൺ΂ͯ໌Β͔ʹػೳ ͕଍Γ͍ͯͳ͍͠ෆࣗ༝ͳͷͰɺࠓͷͱ͜ΖͦΕ͸ͳ͍ ͨͩɺWeb Components Ͱॻ͚Δ΋ͷ͸ Web Components Ͱ ॻ͘ྲྀΕʹ͸ͳ͖͍ͬͯͯΔɻ
29. 29.

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

30. 30.

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

31. 31.

    ࠷ۙͷ஫໨ͷ࿩୊

32. 32.

    ࠷ۙͷ஫໨ͷ࿩୊ • CDN Worker • Micro Frontends • PWA •

    ϨϯμϦϯά࠷దԽ • Web Payments / Web Authentication
33. 33.

    ࠷ۙͷ஫໨ͷ࿩୊ • CDN Worker <= ࠓ೔͸͜Ε͚ͩ • Micro Frontends •

    PWA • ϨϯμϦϯά࠷దԽ • Web Payments / Web Authentication
34. 34.

    CDN Worker

35. 35.

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

36. 36.

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

37. 37.

    ϓϥοτϑΥʔϜ • AWS Lambda@Edge + CloudFront • Cloudflare Workers •

    Google Cloud Functions + Firebase Hosting Cloud Functions ͷ࣮ߦ؀ڥ͸ΤοδϩέʔγϣϯͰ͸ͳ͍͕ɺ΍ΕΔ͜ͱ͸େମಉ͡
38. 38.

    CDN Worker ͷ ೤͍ͱ͜Ζ

39. 39.

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

40. 40.

    BFF Backend For Frontend ϑϩϯτΤϯυͱόοΫΤϯυͷ஥հ໾ ໾ׂͷྫ • ೝূ • API

    Aggregation • Server Side Rendering • Cache
41. 41.

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

42. 42.

    ΍Γ͔ͨͬͨ͜ͱ 1 1. FMP / SEO Λ࠷దԽ͍ͨ͠ 2. ͦͷͨΊʹ͸ɺϨϯμϦϯάࡁΈ HTML

    ΛΫϥΠΞϯτʹૹΓͨ ͍ 3. ͭ·ΓɺSSR ͍ͨ͠ ՝୊ SSR ʹ͸ JS ࣮ߦ؀ڥ͕ඞཁ
43. 43.

    ΍Γ͔ͨͬͨ͜ͱ 2 1. RTT Λߴ଎Խ͍ͨ͠ 2. ͦͷͨΊʹ͸ɺ௨৴ڑ཭Λ࠷୹ʹ͍ͨ͠ 3. ͭ·ΓɺΤοδϩέʔγϣϯͰ௨৴Λ׬͍݁ͨ͠ ՝୊

    ಈతαΠτͷ৔߹ɺΦϦδϯαʔόʔͰ HTML Λ࡞ͬͯૹͬͯ΋ΒΘ ͳ͚Ε͹ͳΒͳ͍
44. 44.

    CDN Worker ͳΒղܾͰ͖Δ • ΤοδϩέʔγϣϯͰϨϯμϦϯάͯ͠ϨεϙϯεΛฦͤΔ • ϨϯμϦϯάࡁΈ HTML Λ CDN

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

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

46. 46.

    Ҏ্ɺCDN Worker Ͱͨ͠

47. 47.

    ࠷ޙʹɺϑϩϯτΤϯυʹ͍ͭͯ఻͍͑ͨ͜ͱ • ΤίγεςϜ͸े෼ʹ੒ख़͍ͯ͠Δ • ։ൃମݧ͕΋ͷ͘͢͝ྑ͘ͳ͍ͬͯΔ • ϥΠϒϥϦͷཚཱ΋མͪண͍͍ͯͯɺมԽ͸ૣ͘ͳ͍ • ࠷ۙͷ࿩୊͸ UX

    ʹ௚݁͢Δ΋ͷ͕ଟ͍ • ϢʔβʔͷͨΊʹ΋ɺαʔόʔαΠυΤϯδχΞ΋ཧղ࣮͠ફ͢Δ΂͖ • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱ؅ཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ ଘࡏ͢Δ • ࠷దͳઃܭΛߟ͑Δʹ͸ɺϑϩϯτΤϯυͷ஌ࣝ΋ඞਢ