Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome Dev Summit 2019振り返り

51ec4d0a70f717097dc9c3d5bb94762f?s=47 Junya
February 19, 2020

Chrome Dev Summit 2019振り返り

51ec4d0a70f717097dc9c3d5bb94762f?s=128

Junya

February 19, 2020
Tweet

More Decks by Junya

Other Decks in Programming

Transcript

  1. Chrome Dev Summit 2019ৼΓฦΓ @ka2jun8 PWA Night vol.13 2020/02/19

  2. ࣗݾ঺հ ## @ka2jun8 / J / ͔ʹ ### ܦྺͱॴଐ
 -

    2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ
 - 2018೥4݄ த్ R ͔Β͸͡·ΔձࣾʢWeb FEʣ ### ΍ͬͯΔ͜ͱ
 - WebαʔϏεͷ৽ن্ཱͪ͛/ϑϧϦϓϨΠε
 - ࠷ۙ͸ AMP Λ࢖ͬͨ։ൃ ### ޷͖ͳ΋ͷ
 - ೫໦ࡔ46 / Dead by Daylight / HUNTER x HUNTER
  3. ΞδΣϯμ • CDSͱ͸ • CDSৼΓฦΓ • ࠷ۙ΍ͬͯΔ͜ͱ • ·ͱΊ ϒϩάʹॻ͍ͨ಺༰Λ࿩͚ͩ͢ʜ

  4. PWA Night ॳࢀઓ ͓ͯ΍ΘΒ͔ʹ 'JSFGPY։ൃऀͰ8$ͷϝϯόʔͷํͷޙͷൃදͰ਒͑ͯΔʜ

  5. PWA Night ͚ͩͲ

  6. PWAͷ࿩͸(΄΅)͠ͳ͍ ͝ΊΜͶˑ

  7. CDSͱ͸ https://developer.chrome.com/devsummit/faqs/#about

  8. CDSͱ͸ https://developer.chrome.com/devsummit/faqs/#about $ISPNF%FW4VNNJU͸೥ʹҰ౓ͷ։ൃऀ͕ $ISPNFϒϥ΢βʹ͍ͭͰͷ࠷৽ͷπʔϧ΍Ξοϓ σʔτΛֶͿ͜ͱ͕Ͱ͖ΔΧϯϑΝϨϯεͰ͢ɻ

  9. ৔ॴ • αϯϑϥϯ
 γεί

  10. ೔ఔ • 2019೥11݄11೔, 12೔

  11. ೔ఔ • 2019೥11݄11೔, 12೔ ͿͬͪΌ͚ ͋Μ·Γ֮͑ͯͳ͍

  12. CDS2019αϚϦ https://developers-jp.googleblog.com/2019/12/chrome-dev-summit-2019.html https://www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr • ͔ͯ͜ΕݟΕ͹Θ͔ΔΑͬͯ࿩

  13. CDSͱ͸ͭ·Γ Google͕ߟ͑ΔWebͷ࠷ઌ ୺ͷٕज़Λൃද͢Δ৔

  14. CDS2019ৼΓฦΓ ݸਓతʹؾʹͳͬͨൃදΛ঺հ ײ૝෇͖

  15. Keynote • ઌཱͬͯ̎೔ؒͷશମͷαϚϦʔͱ͍͏ײ͡ɻ Chrome ʹ৽͘͠௥Ճ͞ΕΔػೳ΍APIͳͲ͕ ͬ͟ͱ঺հ͞Εͨɻ

  16. Keynote

  17. Keynote ϥΠϒͰͷSpeed hackathon ͸img Λ data-src ʹ௥Ճ͚ͨͩͩͬͨ͠͠༻ҙͯͨ͠ͱࢥ͏͚Ͳɺͦ Εʹͯ͠΋͍͢͝ͳͱࢥΘͤΔ΋ͷ͕͋ͬͨɻ

  18. Protecting users on a thriving web • ϒϥ΢βηΩϡϦςΟؔ࿈ͷτʔΫ

  19. Protecting users on a thriving web

  20. Protecting users on a thriving web

  21. Protecting users on a thriving web ʹର͢Δॴײ • Same Site

    Cookie ݫ͍͠ؾ࣋ͪ͸Θ͔Δ • ϚʔέςΟϯά෦ॺ͔Β͢ΔͱɺύʔιφϥΠζ͍ͨ͠ͷ΋Θ͔Δ • Θ͔ΔΜ͚ͩͲɺɺɺ • ͔͠͠ɺ΋͏ͦ͏͍͏࣌୅͡Όͳ͍ɻ • ։ൃऀ͕ϓϥΠόγʔݒ೦Λਖ਼͘͠ཧղ͢Δɻ
 Ϛʔέ΍ଞͷ෦ୂͷਓͨͪʹཧղΛͯ͠΋Β͏ɻ • …೉͍͠ΑͶɺΘ͔Δɻ
  22. Protecting users on a thriving web ʹର͢Δॴײ https://speakerdeck.com/yosuke_furukawa/zui-xin-falseburauzadebian-warucookiefalsequ-rixi-iyaprivacyfalsekao-efang ࢀߟ

  23. What’s new in sign-up and sign-in • SMS Ͱ 2FA͢Δͱ͖ʹɺೖྗΛαϙʔτ͢Δ

    • Yahoo!JAPAN ͩͱ re-auth Ͱ ୺຤ͷࢦ໲ೝূͱ͔Λ2FA Ͱ࢖͑ΔΑ͏ʹͳͬͯΔɻFIDO͔ɻ
  24. What’s new in sign-up and sign-in • SMS Ͱ 2FA͢Δͱ͖ʹɺೖྗΛαϙʔτ͢Δ

    • Yahoo!JAPAN ͩͱ re-auth Ͱ ୺຤ͷࢦ໲ೝূͱ͔Λ2FA Ͱ࢖͑ΔΑ͏ʹͳͬͯΔɻFIDO͔ɻ
  25. Speed tooling evolutions: 2019 and beyond • ύϑΥʔϚϯεͷϝτϦΫε͕v6ͰมΘΔɻ Largest Contentful

    Paint ͕ॏཁࢹ͞ΕΔɻ͜ Ε·ͰҎ্ʹେ͖ͳཁૉ͸࡞ͬͪΌͩΊɻ • Lighthouse CI ͷ঺հ
  26. Speed tooling evolutions: 2019 and beyond https://www.suzukikenichi.com/blog/highlights-of-web-performance/

  27. Lighthouse CI URL path͝ͱʹਪҠ͕ݟΒΕΔ PR͕Ϛʔδ͞ΕΔͨͼʹ؀ڥσϓϩΠͯ֬͠ೝͯ͠Δ

  28. Lighthouse CI

  29. Lighthouse CI MIDJEFWMIDJ JNBHFNBSLIPCTPOOPEFDISPNF FOWJSPONFOU "11@&/7EFW 5"3(&5EFW -)$*@50,&/YYYYYYY DPNNBOET OQNJOTUBMMH!MIDJDMJ!

    c MIDJDPMMFDUDPOpHMJHIUIPVTFSDKT MIDJVQMPBEDPOpHMJHIUIPVTFSDKT MIDJBTTFSUDPOpHMJHIUIPVTFSDKTccFDIP-)$* GBJMFE XIFO FWFOUQVTI CSBODIEFWFMPQ • LHCIͷdockerΛࣗલͰཱ ͯΔͷ͸ͪΐͬͱେม • droneͷCIλεΫ͸
 ͜Μͳײ͡ˠ • CIͰσϓϩΠޙʹLHCIΛ ୟ͘ɺͱ͍͏ύΠϓϥΠϯ ͳͷͰɺ࿈ଓͰσϓϩΠͬ ͯͷ͸Ͱ͖ͳ͘ͳͬͨɻ
  30. Adoptive Loading - Improving the user- experience for millions on

    low-end devices • ࢖ΘΕΔ୺຤ʹΑͬͯεϖοΫʹ͕ࠩ͋ΔͷͰɺεϖοΫ͕௿ ͍ํʹ߹Θͤͯ࡞Δํ͕͍͍ˠऑ͍୺຤ͳΒී௨ɺ͍͍୺຤ ͳΒ͸΍͘ͳΔ • ୺຤ͷstatus ΍ network ͷ status Ͱ adaptive ʹ ඳը͢Δ΋ ͷΛมߋ͢Δʢڧ͚Ε͹Ϧονʹ͢Δ͠ɺऑ͚Ε͹௿ը࣭ ͩͬͨΓػೳΛ࡟Δʣ • ͰɺLow ͱ high Ͱ webpack chunk ໊͚ͭͯɺ chunk ෼͚͠ ͯɺͦΕͧΕʹରͯ͠ෆཁͳίʔυ͸མͱ͞ͳ͍Α͏ʹ͢Δɻ
  31. Adoptive Loading ͷॴײ • ʮ·͔͡Αɻʯ • Ϋι࡞Δͷେมͦ͏͚ͩͲɺ·͋΍ͬͨΒͦΓΌ͍͍ͷ ͸Θ͔Δ • ϨϯμϦϯά͚ͩͰϢʔβΠϕϯτΛϒϩοΫ͠ͳ͍Α

    ͏ʹͨ͠ΓɺϑϨʔϜϨʔτΛࣗ෼Ͱ͍ͬͨ͡Γ΋Ͱ͖ ΔͷͰɺ׆͔ͤΕ͹͍͚͢͝Ͳɺ࣮ࡍͷϓϩμΫτͷݱ ৔Ͱ͜͜·ͰϦονʹରԠͰ͖Δݱ৔ͳ͔ͳ͔ͳͦ͞͏
  32. The main thread is overworked & underpaid • UIΛඳը͢ΔҎ֎ͷϩδοΫ͸Worker Λ࢖͓͏

    • Worker ʹରͯ͠ૢ࡞͢Δ໊લ͚ͭͯ switch ͢Δͱ͔େม ͔ͩΒ comlinik ͕ศར • Main thread ͸ UI thread ͩʂ • ProxxΛࢀߟʹ https://github.com/GoogleChromeLabs/proxx
  33. Next generation web styling • ໊ͷ௨Γ࣍ੈ୅CSSʹ͍ͭͯͷൃද • Prefer theme Ͱ

    ςʔϚΧϥʔΛม͑ΕΔ (Dark | light) • Margin-inline-start ͱ͔Ͱ Japanese ͩͬͨΒॎॻ͖ͱ͔Λ ࠶ݱͰ͖ΔΑ͏ʹͳΔ • Filter css Ͱը૾ʹϑΟϧλʔ͔͚ΒΕΔ etc…
  34. Next generation web styling https://qiita.com/yk_irsw/items/c3834b07e34bfecef002 ࢀߟ

  35. PWA and the installable web • PWA ͷݪଇ͸ “Don’t be.

    Annoying” • Ϣʔβʔʹརӹ͕ͳ͍ͳΒ΍Βͳ͍ɻ • ຊ౰ʹՁ஋Λ෼͔͍ͬͯΔϢʔβͷͨΊʹ࢖͏΋ͷ • OYO Ͱ OYO lite ͱͯ͠࢖ͬͯ͏·͍ͬͯ͘Δɻ • PWA͸ͱΓ͋͑ͣೖΕΕ͹͍͍ͬͯ΋ͷͰ͸ͳ͍ɻ • ͖ͪΜͱ஫ҙͯ͠࢖͑Αɺͱ͍͏આ໌ʹͳ͍ͬͯͨͷ͕Α͔ͬͨɻख์ ͠ʹೖΕͯྑ͍΋ͷͰ͸ͳ͍ɻ
  36. Bridging the native app • Share API, contacts API, ϑΝΠϧૢ࡞APIͳ

    ͲɺωΠςΟϒʹ͍ۙAPI ͕࢖͑ΔΑ͏ʹͳΔ • Project FUGU
  37. ̍೔໨ऴྃ ͜͜Ͱ12, 3෼ͳΒྑ͍ϖʔε

  38. Intent to explain: demystifying the Blink shipping process • ৽͍͠ػೳΛChrome

    ʹಋೖ͠࢓༷ࡦఆʹ΋͍ͬͯ͘·Ͱͷ ࿩ɻ ·ͣ໰୊఺Λௐࠪ͠ɺͦΕʹର͢Δ prototype Λ։ൃ ͢Δɻ experimental ͳ flag Ͱػೳͷग़͠෼͚ΛՄೳʹͨ͠ ঢ়ଶͰ։ൃऀ͔ΒͷϑΟʔυόοΫΛಘͯ iteratable ʹػೳ Λվળ͢Δɻ ͦͯ͠࠷ऴతʹ ship / unship ΛܾΊΔɻ
  39. HTML isn’t done!

  40. HTML isn’t done! • selectλά͕ݏ͍

  41. HTML isn’t done! https://qiita.com/yk_irsw/items/4659fa0af747ddf1dd72 ࢀߟ

  42. Advancing the web framework ecosystem • Chrome ΛऔΓר͘ WebϑϨʔϜϫʔΫͷ࿩ɻ

  43. Advancing the web framework ecosystem ͷॴײ • React ͳΒ·ͩ͠΋ɺ Next.js

    + Chrome ͷ࿩ ͕݁ߏଟΊʹ͋ͬͨͷ͕஫໨͢΂͖఺ɻ • Vue ΋Ұॠग़͖͍͕ͯͯͨɺ΍͸Γੈքతʹ ͸ React Ұڧͱ͍͏ײ͕ͨ͡͠ɻ
  44. Advancing the web framework ecosystem ͷॴײ • next.js ʹରͯ͠ Google

    ͷ։ൃऀ͕ͨͪ contribution ͠ ͍ͯΔͱͷ͜ͱɻ ͜͏͍͏࿩Λฉ͘ͱɺ next.js Λ࢖͏ ͷ͕σϑΝΫτʹͳΓͦ͏ͩͳͱײ͟͡ΔΛಘͳ͍ɻ
  45. In which we make loading disappear with and friends •

    Portals, Periodic Background Sync, Web bundles ͳͲɺ ৽ͨʹࢼ༻తʹ։ൃ͞Ε͍ͯ Δ Chrome ͷػೳͨͪʹؔ͢Δ಺༰ɻ
  46. In which we make loading disappear with and friends Portals

    ͸؆୯ʹݴͬͯ͠·͑͹ iframe Ͱදࣔͨ͠ next page ΛγʔϜϨεʹը໘ ભҠՄೳʹ͢Δ΋ͷɻ URL ΋γʔϜϨεʹมߋ͞ΕΔͷͰɺ MPA Ͱ SPA ͬΆ͍ UX ΛఏڙՄೳʹͳΔɻ ͨͩ experimental ͳͷͰɺ chrome Ͱ flag Λ true ʹ͠ ͳ͍ͱར༻Ͱ͖ͳ͍ɻ
  47. In which we make loading disappear with and friends https://blog.uskay.io/article/002-hands-on-portals

  48. In which we make loading disappear with and friends Web

    bundles ͸ɺWeb page Λ bundle ͯ͠ 1 ͭͷϑΝΠϧͱͯ͠μ΢ϯϩʔ υɺ഑৴ɺల։ՄೳʹͳΔ΋ͷɻ Web bundles ͸ɺnetwork ͕མ͍ͪͯͯ΋ bundle ͞ΕͨϑΝΠϧΛԣల։Ͱ഑৴Ͱ͖Ε͹ɺಉ͡΢ΣϒΞϓϦΛಈ͔͢͜ͱ ͕Ͱ͖Δɻ Signed exchange Λར༻Ͱ͖Ε͹ͦͷϑΝΠϧ͕ਖ਼͍͠৴པ͞Εͨ΋ ͷͰ͋Δͱ chrome ͕อূͯ͘͠ΕΔɻ
  49. How to make your content shine on Google Search •

    Google bot ʹؔ͢Δ࠷৽ঢ়گͷ࿩ɻ
  50. How to make your content shine on Google Search •

    100% JS ͷϖʔδͰ΋ indexing ͞Ε͍ͯΔ࣮੷͕͋Δɻ CSR ͷϖʔδ Ͱ΋ʢे෼ʹ଎͚Ε͹ʣͪΌΜͱΠϯσΫγϯά͞ΕΔͱ͍͏঺հɻ
  51. How to make your content shine on Google Search •

    ϨϯμϦϯά͸5ඵ͕தԝ஋ɻ 90%͸1෼Ҏ಺ʹϨϯμϦϯά͞ΕΔɻ Ұ ํɺϩʔσΟϯά͕ "done" ͷঢ়ଶ͕೉͍͠ɺͱ͍͏࿩͕͋ͬͨɻ มʹ઀ ଓɾ௨৴͕ଓ͍ͨঢ়ଶʹͳͬͯ͠·͍ͬͯΔͱ஗͍ͱ൑அ͞Ε͔Ͷͳ͍ͷͰ ஫ҙͯ͠΄͍͠ͱͷ͜ͱɻ(networkidle0ʹ͢Δ)
  52. ࠷ۙ΍ͬͯΔ͜ͱ

  53. AMP!!!! • AMP + Next.js + TypeScript + styled-components ։ൃத

    • AMP
 ɹamp-img, amp-story, amp-sidebar, … • PWA(+SW) Ὅ஫໨ • Renovate bot • Lighthouse CI • Storybook + reg-suitʢVRTʣ
  54. AMP!!!! • AMP + Next.js + TypeScript + styled-components ։ൃத

    • AMP
 ɹamp-img, amp-story, amp-sidebar, … • PWA(+SW) Ὅ஫໨ • Renovate bot • Lighthouse CI • Storybook + reg-suitʢVRTʣ ϦϦʔεؒۙʂ
  55. ·ͱΊ

  56. ·ͱΊ • Chrome Dev Summit 2019Ͱฉ͍ͨ಺༰ΛৼΓ ฦΓ঺հɻ • Webͷ࠷ઌ୺ͳͷͰ΍͸Γ໘ന͍ʢݸਓతʹ͸ Google

    I/OΑΓ໘ന͍ͱࢥ͏ʣɻ • Πϯϓοτ͢Δ͚ͩͰͳ͘ɺ͜ΕΒͷ৘ใΛੜ ͔ͯ͠Ξ΢τϓοτ͍͖͍ͯͨ͠ɻ