Rails Developers Meetup 2019
αʔόʔαΠυΤϯδχΞ͓͖ͬͯ͘ϑϩϯτΤϯυͷࠓ
View Slide
ࣗݾհ• ൘ ୡ (@itkrt2y)• λέϢʔɾΣϒגࣜձࣾ• Ruby on Rails ͷडୗ։ൃձࣾ• RubyKaigi 2019 Platinum εϙϯαʔ• Ruby on Rails ͷ͓ࣄืूதʂ
ࠓ͢͜ͱϑϩϯτΤϯυͷ1. ݱࡏͷΤίγεςϜ2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ
ࠓ͢͜ͱϑϩϯτΤϯυͷ1. ݱࡏͷΤίγεςϜ <=2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ
ݱࡏͷΤίγεςϜ
ݴޠ
ݴޠTypeScriptTS ʹग़དྷͳ͍ཧ༝͕͋Δ߹ͷΈESNextʮTS Λಋೖ͖͔͢ʯͰΉ࣌طʹऴΘ͍ͬͯΔ
ίϯύΠϧʢτϥϯεύΠϧʣઌҰൠతʹ ES5ͨͩɺͦΖͦΖ IE11 ඇରԠͷܾஅΛͯ͠ɺES2015 Ҏ্ʹ͍͍ͯ࣌͠
DOM ཧ
DOM ཧԾ DOM ܥʢએݴత Viewʣ• React• Vue• Angular• Elm
એݴత View ʹΑΓ DOM ͕ཧՄೳʹҎલ jQuery ͳͲͰखଓ͖తʹ DOM Λૢ࡞͍ͯͨ͠ɻԾ DOM ʹΑͬͯαʔόʔαΠυతͳʮ͋Δঢ়ଶʹରͯ͋͠Δ͖ DOM Λఆٛ͢Δʯͱ͍͏એݴత View ͷύϥμΠϜ͕ϑϩϯτΤϯυʹ࣋ͪࠐ·ΕɺJS Ͱ DOM ΛཧͰ͖ΔΑ͏ʹͳͬͨɻ
lit-htmlGoogle ͷ Polymer νʔϜ͕࡞͍ͬͯΔϥΠϒϥϦԾ DOM Ͱͳ͍͚ͲɺDOM ͷ diffΛऔͬͯࠩߋ৽ग़དྷͯɺԾ DOM ܥΑΓ͍·ͩྲྀߦΒͳ͍ͱࢥ͏͚Ͳɺ͓͍ͬͯͯଛͳ͍Ͱ͢
Editor
EditorVisual Studio Codevscode + TypeScript + ESLint + Prettierͷ։ൃମݧ͕ྑ͗͢ΔɻଞͷΤσΟλΛ͍͍ͨਓɺ·ͣ͜ͷ։ൃମݧΛຯΘ্ͬͨͰଞͷΤσΟλΛ͍ͬͯͩ͘͞ɻ
Linter
Linter• ESLint• TSLintʢͨͩ͠ɺۙʑ deprecated ʹͳΔʣੲ JSHint, JSLint ͳͲ͋Γ·͕ͨ͠ɺࠓ ESLint Ұڧ
Formatter
FormatterPrettierࠓʹೖ͔ͬͯΒ prettier-ruby ͷ։ൃ͕ٸܹʹਐΜͰ͍Δͷ͕ͱͯخ͍͠
module bundler
module bundler• WEB αʔϏε։ൃ => webpack• ϥΠϒϥϦ։ൃ => Rolluppika ͷಈཁνΣοΫwebpacker Θͳ͍ํ͕͍͍Ͱ͢
Test
Test• Jest• E2E ςετ Jest + Puppeteerੲ Mocha, Chai, Karma, Jasmine ͳͲ৭ʑ͋Γ·͕ͨ͠ɺࠓجຊ Jest
ඇಉظॲཧ
ඇಉظॲཧaxiosGET ͚ͩͳΒ fetch Ͱ͍͍Ͱ͕͢ɺGET Ҏ֎Λ࢝͠ΊΔͱ໘ʹͳΔͷͰ axios ͕Φεεϝajax ࠓ͔Βಋೖ͢Δٕज़Ͱ͏ͳ͍Ͱ͢
Web Components
Web Componentspolyfill ΛೖΕΕ͑Δٕज़ʹͳ͍ͬͯΔɻͨͩɺpolyfill ͷग़དྷ͕ѱ͍ͱ͍͏͕͋ΔͷͰɺ͏࣌ҙ͕ඞཁɻ
Web Components ͰԾ DOM ࢮ͵ʁݱঢ়ͷ Web Components Ծ DOM ʹൺͯ໌Β͔ʹػೳ͕Γ͍ͯͳ͍͠ෆࣗ༝ͳͷͰɺࠓͷͱ͜ΖͦΕͳ͍ͨͩɺWeb Components Ͱॻ͚Δͷ Web Components Ͱॻ͘ྲྀΕʹͳ͖͍ͬͯͯΔɻ
Ҏ্ɺݱࡏͷΤίγεςϜͰͨ͠
ࠓ͢͜ͱϑϩϯτΤϯυͷ1. ݱࡏͷΤίγεςϜ2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ <=
࠷ۙͷͷ
࠷ۙͷͷ• CDN Worker• Micro Frontends• PWA• ϨϯμϦϯά࠷దԽ• Web Payments / Web Authentication
࠷ۙͷͷ• CDN Worker <= ࠓ͜Ε͚ͩ• Micro Frontends• PWA• ϨϯμϦϯά࠷దԽ• Web Payments / Web Authentication
CDN Worker
͓͜ͱΘΓਖ਼໊ࣜশ͕ଟଘࡏ͠ͳ͍ͷͰɺCDN Worker ԾͷදݱͰ͢
CDN Worker ͱʁCDN ͷϦΫΤετɾϨεϙϯεʹϑοΫͯ͠ɺCDN ͷ͋ΔΤοδϩέʔγϣϯͰॲཧΛΒͤΔ͜ͱͷͰ͖Δ JS ࣮ߦڥ
ϓϥοτϑΥʔϜ• AWS Lambda@Edge + CloudFront• Cloudflare Workers• Google Cloud Functions + Firebase HostingCloud Functions ͷ࣮ߦڥΤοδϩέʔγϣϯͰͳ͍͕ɺΕΔ͜ͱେମಉ͡
CDN Worker ͷ͍ͱ͜Ζ
BFF ΛΤοδϩέʔγϣϯʹஔ͚Δ
BFFBackend For FrontendϑϩϯτΤϯυͱόοΫΤϯυͷհׂͷྫ• ೝূ• API Aggregation• Server Side Rendering• Cache
SPA ٕज़Λ༻͍ͨڥͰ͜Ε·ͰΓ͔ͨͬͨ͜ͱͱͦͷ՝
Γ͔ͨͬͨ͜ͱ 11. FMP / SEO Λ࠷దԽ͍ͨ͠2. ͦͷͨΊʹɺϨϯμϦϯάࡁΈ HTML ΛΫϥΠΞϯτʹૹΓ͍ͨ3. ͭ·ΓɺSSR ͍ͨ͠՝SSR ʹ JS ࣮ߦڥ͕ඞཁ
Γ͔ͨͬͨ͜ͱ 21. RTT ΛߴԽ͍ͨ͠2. ͦͷͨΊʹɺ௨৴ڑΛ࠷ʹ͍ͨ͠3. ͭ·ΓɺΤοδϩέʔγϣϯͰ௨৴Λ͍݁ͨ͠՝ಈతαΠτͷ߹ɺΦϦδϯαʔόʔͰ HTML Λ࡞ͬͯૹͬͯΒΘͳ͚ΕͳΒͳ͍
CDN Worker ͳΒղܾͰ͖Δ• ΤοδϩέʔγϣϯͰϨϯμϦϯάͯ͠ϨεϙϯεΛฦͤΔ• ϨϯμϦϯάࡁΈ HTML Λ CDN ʹΩϟογϡ͢Δ͜ͱͰɺ2 ճҎ߱ͷϨεϙϯε͞Βʹ͍• ࠷ߴͷ RTT / FMP / SEO• ϨϯμϦϯά༻ͷ Node.js αʔόʔΛࣗલͰݐͯͳ͍͍ͯ͘• ΦϦδϯαʔόʔΛͲͷϦʔδϣϯʹஔ͍͕ͯͳ͘ͳΔ• ίετͷ͍҆ɾαʔϏεఏڙͷૣ͍ϦʔδϣϯΛબͰ͖ΔΑ͏ʹͳΔ• ΦϦδϯαʔόʔͷϦΫΤετΛ࠷খԽͰ͖Δ
Ұ൪ظ͍ͯ͠ΔϓϥοτϑΥʔϜ
Ҏ্ɺCDN Worker Ͱͨ͠
࠷ޙʹɺϑϩϯτΤϯυʹ͍͍ͭͯ͑ͨ͜ͱ• ΤίγεςϜेʹख़͍ͯ͠Δ• ։ൃମݧ͕ͷ͘͢͝ྑ͘ͳ͍ͬͯΔ• ϥΠϒϥϦͷཚཱམͪண͍͍ͯͯɺมԽૣ͘ͳ͍• ࠷ۙͷ UX ʹ݁͢Δͷ͕ଟ͍• ϢʔβʔͷͨΊʹɺαʔόʔαΠυΤϯδχΞཧղ࣮͠ફ͢Δ͖• ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑଘࡏ͢Δ• ࠷దͳઃܭΛߟ͑ΔʹɺϑϩϯτΤϯυͷࣝඞਢ