2022年に起きたフロントエンドの変化

Burikaigi 2023
https://burikaigi.dev/

Twitter
https://twitter.com/__sakito__

Transcript

1. 2022೥ʹى͖ͨ
   

   ϑϩϯτΤϯυͷมԽ
   2023೥1݄21೔ / #burikaigi , #burikaigi_b
   BuriKaigi 2023
   

   View Slide

2. ࣗݾ঺հ
   TBLJUP
   αΠϘ΢ζגࣜձࣾc%FTJHO5FDIOPMPHJTU
   

   ɾσβΠϯςΫϊϩδετ৬ೳ
   ɾLJOUPOF%FTJHO5FBNॴଐ
   ɾσβΠϯࣨϦʔμʔ
   

   ࣾ಺֎ʹϑϩϯτΤϯυपΓͷ৘ใڞ༗Λ͢Δͷ͕झຯɺ
   

   ݄ʹ౓1PEDBTUʹήετग़ԋͯ͠ɺ৘ใΛൃ৴͍ͯ͠·͢ɻ
   

   

   UXJUUFS!@@TBLJUP@@ OPUFTBLJU
   

   View Slide

3. ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ
   • ࿩͢͜ͱ
   
   
   • 2022೥ʹ͋ͬͨϑϩϯτΤϯυʹؔΘΔτϐοΫ͔Βɺݸਓతʹ2023೥Ҏ
   ߱ͷϑϩϯτΤϯυ͸Ͳ͏ͳ͍͖ͬͯͦ͏͔ਪଌ
   
   
   • ࢲ͸ීஈReactΑΓͷ໨ઢͳͷͰɺશͯ໢ཏͰ͖͍ͯΔΘ͚Ͱ͸ͳ͍͕ɺϑ
   ϩϯτΤϯυͷࠓޙͷྲྀΕΛಡΉࢀߟʹͳΔͱ޾͍
   
   
   • ࿩͞ͳ͍͜ͱ
   
   
   • 1ͭ1ͭͷٕज़తͳৄࡉ
   

   View Slide

4. HTML,CSSͳͲͷϕετϓϥΫςΟε͕มΘ͍ͬͯ͘
   

   View Slide

5. ϚΠΫϩιϑτ͕2022೥6݄ʹIE11 αϙʔτऴྃΛൃද
   Ҿ༻ݩɿ
   

   Internet Explorer 11 ͸αϙʔτΛऴྃ͠·ͨ͠ɻ௕೥ͷ͝Ѫސ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ - Windows Blog for Japan
   

   https://blogs.windows.com/japan/2022/06/15/internet-explorer-11-is-no-longer-supported/
   

   View Slide

6. ֤ࣾαʔϏε΋ଓʑͱIE11ͷαϙʔτऴྃ
   Ҿ༻ݩɿ
   

   αΠϘ΢ζ੡඼ɾαʔϏεͰͷ Internet Explorer 11 αϙʔτऴྃʹ͍ͭͯʢ2022/08/17 ߋ৽ʣ | αΠϘ΢ζ͔Βͷ͓஌Βͤ
   

   https://cs.cybozu.co.jp/2022/007588.html
   

   View Slide

7. OSS΋IEαϙʔτΛ੾ͬͨόʔδϣϯΛϦϦʔε
   Ҿ༻ݩɿ
   

   How to Upgrade to React 18 – React Blog
   

   https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
   

   View Slide

8. MDN͔Β΋IEͷදه͕ফ͑ͨ
   

   View Slide

9. IE11αϙʔτऴྃʹΑΔมԽ
   • HTML,CSS,JS΍ϒϥ΢βAPIͷ׆༻ͷେ͖ͳ੍ݶ͕ݮͬͨ
   
   
   • ৽͘͠Ͱͯ͘Δٕज़࢖༻࣌ʹϒϥ΢βΛؾʹ͢Δඞཁ͕ͳ͘ͳ͖ͬͯͨ
   
   
   • Chrome,Edge,Firefox͸࠷৽൛ɺSafari͸গ͠஗Εؾຯ͕ͩ…
   
   
   • ϒϥ΢βຖͷޓ׵ੑʹ͍ͭͯ͸Interopͱ͍͏औΓ૊Έ΋͋Δ
   

   View Slide

10. Ҿ༻ݩɿ
    

    Interop 2022: browsers working together to improve the web for developers
    

    https://web.dev/interop-2022/
    InteropͷऔΓ૊Έ
    

    View Slide

11. Ҿ༻ݩɿ
    

    web-platform-tests dashboard
    

    https://wpt.fyi/interop-2022
    web-platform-tests dashboardͷ޲্
    

    View Slide

12. ϕετϓϥΫςΟε͕มΘ͍ͬͯ͘
    • ϒϥ΢βΛؾʹ͠ͳͯ͘΋Α͘ͳ͖ͬͯͨ
    
    
    • ͍··Ͱ৭ʑؾʹͯ͠࢖͑ͳ͔ٕͬͨज़Λϑϧ׆༻Ͱ͖Δঢ়ଶʹͳ͖ͬͯͨ
    
    
    • ϒϥ΢β΋ͲΜͲΜ৽͍ٕ͠ज़Λ࢖͑ΔΑ͏ʹͯ͘͠Ε͍ͯΔ
    
    
    • ޓ׵ੑΛ޲্ͤ͞Δ׆ಈ΋޿͕͖ͬͯͨ
    
    
    • 2021೥ʹϕετ࣮ͩͬͨ૷͕ɺ2022೥ʹ͸มΘ͍ͬͯΔ͔΋͠Εͳ͍
    
    
    • 2023೥Ҏ͔߱Β͸͞ΒʹมԽ͸Ճ଎͍ͯͩ͘͠Ζ͏
    

    View Slide

13. 2022೥ʹ࢖͑ΔΑ͏ʹͳͬͨ୅දతͳٕज़ྫ
    •
    
    
    • structuredClone
    
    
    • :focus-visible
    
    
    • :has(), :is(), :where()
    
    
    • Flexbox gap
    
    
    • subgrid
    
    
    • cascade layers
    

    View Slide

14. ίϯϙʔωϯτʹ
    

    য఺Λ౰ͯ΍͘͢ͳ͖ͬͯͨ
    

    View Slide

15. Playwright,Cypressʹίϯϙʔωϯτςετ͕௥Ճ
    Ҿ༻ݩɿ
    

    Cypress Component Testing | Cypress Documentation
    

    https://docs.cypress.io/guides/component-testing/overview
    

    

    Experimental: components | Playwright
    

    https://playwright.dev/docs/test-components
    

    View Slide

16. Storybook্Ͱςετ͕Մೳʹ
    Ҿ༻ݩɿ
    

    Interaction tests
    

    https://storybook.js.org/docs/react/writing-tests/interaction-testing
    

    View Slide

17. ίϯϙʔωϯτʹয఺Λ౰ͯͨɺCSSͷ௥Ճɾ࢓༷ݕ౼
    • Scoped Styles (@scope)
    
    
    • Cascade layers (@layer)
    
    
    • CSS Nesting
    
    
    • Container Query
    
    
    • Style Query
    

    View Slide

18. Figma to Code , Component to FigmaͷྲྀΕ
    Ҿ༻ݩɿ
    

    story.to.design | Generate Figma components from code
    

    https://story.to.design/
    Ҿ༻ݩɿ
    

    Figma-to-Code (React) - Overview - AWS Amplify Docs
    

    https://docs.amplify.aws/console/uibuilder/
    f
    igmatocode/
    

    View Slide

19. 2023೥͸ߋʹComponent Drivenͳߟ͕͑ਐΉͩΖ͏
    Ҿ༻ݩɿ
    

    Component Driven User Interfaces
    

    https://www.componentdriven.org/
    

    View Slide

20. ίϯϙʔωϯτʹয఺Λ౰ͯ΍͘͢ͳ͖ͬͯͨ͜ͱʹΑΔมԽ
    • ίϯϙʔωϯτʹয఺Λ౰ٕͯͨज़͕૿͖͑ͯͨ
    
    
    • σβΠϯ(Figma) -> ։ൃ(Code)΁ͷ֞ࠜ΋ͳ͘ͳΓͭͭ͋Δ
    
    
    • ίϯϙʔωϯτΛ૊Έ߹Θͤͯɺେ͖ͳػೳΛߏங͢ΔྲྀΕ΁
    
    
    • ίϯϙʔωϯτۦಈ։ൃ(CDD)
    
    
    • ͜ΕΒͷྲྀΕ͔ΒੈͷதతʹίϯϙʔωϯτϥΠϒϥϦ(σβΠϯγεςϜ)ͷීٴ͕૿
    ͖͑ͯͨͷͰ͸ͳ͍ͩΖ͏͔ʁ
    
    
    • 2023೥͸ࣗࣾ΍OSSͷίϯϙʔωϯτϥΠϒϥϦ͕ϕʔεͱͳͬͨ։ൃ͕૿͍͑ͯ͘
    ͩΖ͏
    

    View Slide

21. JSϥϯλΠϜ΍ϑϨʔϜϫʔΫͷଟ༷Խ
    

    View Slide

22. ύϑΥʔϚϯεʹಛԽͨ͠Bunͷొ৔
    Ҿ༻ݩɿ
    

    story.to.design | Generate Figma components from code
    

    https://story.to.design/
    

    View Slide

23. DenoͷnpmରԠ
    Ҿ༻ݩɿ
    

    Big Changes Ahead for Deno
    

    https://deno.com/blog/changes
    

    View Slide

24. MPAࢥ૝Ͱ͋ΔAstroͷొ৔
    Ҿ༻ݩɿ
    

    Astro | Build faster websites
    

    https://astro.build/
    

    View Slide

25. Shopify͕RemixΛങऩ
    Ҿ༻ݩɿ
    

    Mixing It Up: Remix Joins Shopify to Push the Web Forward
    

    https://shopify.engineering/remix-joins-shopify
    

    View Slide

26. JSϥϯλΠϜ΍ϑϨʔϜϫʔΫͷଟ༷Խ
    • 2022೥͸JSϥϯλΠϜ΍ϑϨʔϜϫʔΫͷ৽͍͠΋ͷ͕ొ৔ͨ͠
    
    
    • 2023೥͸͜ΕΒΛ׆༻Ͱ͖Δγʔϯ͕૿͍͑ͯ͘ͷͰ͸ͳ͍ͩΖ͏͔ʁ
    
    
    • ReactΛ࢖͏ͳΒNext.js, JSϥϯλΠϜ͸Node.jsͱ΋
    

    ݴ͑ͳ͘ͳͬͯ͘Δ͔΋͠Εͳ͍
    
    
    • ࣗ෼ͷ໨తʹ͋ͬͨɺΑΓϕετͳબ୒ࢶ͕૿͑ͯ͘ΔͩΖ͏
    

    View Slide

27. ϑϩϯτΤϯυϏϧυ؀ڥͷ
    

    ҠΓมΘΓ
    

    View Slide

28. webpackͷޙܧͱͯ͠Turbopackͷొ৔
    Ҿ༻ݩɿ
    

    Turbopack - The successor to Webpack
    

    https://turbo.build/pack
    

    View Slide

29. Viteͷ޿͕Γ
    Ҿ༻ݩɿ
    

    The State of JS 2022: Build Tools
    

    https://2022.stateo
    f
    js.com/en-US/libraries/build-tools/
    ΋͏Ұ౓࢖͍͍ͨͰ্Ґ
    webpack͸͔ͳΓॱҐΛམͱ͢
    ࢖ΘΕ͍ͯΔ΋ͷ͸
    

    webpack͕ଟ͍
    Viteͷ࢖༻཰ͷ্ঢ
    

    View Slide

30. RomeͷϦϦʔε͕͸͡·ͬͨ
    Ҿ༻ݩɿ
    

    Rome — Uni
    f
    ied developer tools for JavaScript, TypeScript, and the web
    

    https://rome.tools/
    

    View Slide

31. ϑϩϯτΤϯυϏϧυ؀ڥͷҠΓมΘΓ
    • Webpackͷޙܧ͕Ͱ͖ͯͨ͜ͱͰɺwebpackΛ࠾༻͢Δͷ͸͍ۙকདྷஔ͖׵͑ͷՄೳੑ͕ߴ͘
    ͳͬͨ
    
    
    • 2023೥͸Next.jsͷΑ͏ͳϑϨʔϜϫʔΫҎ֎ͰɺϏϧυ؀ڥߏங͢Δͱ͖ʹwebpackΛ࠾༻
    ͢Δ͜ͱ͕ͳ͘ͳΓͦ͏
    
    
    • ϏϧυύϑΥʔϚϯε͕༏Ε͍ͯΔ΋ͷ͕ٻΊΒΕΔΑ͏ʹ
    
    
    • RustϕʔεͰߏங͢Δπʔϧ͕૿͖͑ͯͨͷͰɺpluginͷΑ͏ͳ΋ͷΛॻ͘ͷ͸Rust͕ඞཁʹ
    ͳͬͯ͘ΔՄೳੑ΋
    
    
    • Rome͕2023೥ʹόϯυϥʔͷػೳ΋ἧ͑ΔɺTurbopack͕Next.jsҎ֎Ͱ࢖͑ΔΑ͏ʹͳΔ༧ఆ
    ͕͋Δ
    
    
    • 2023೥͔ΒઌͷͨΊʹɺNext.jsͷΑ͏ͳϑϨʔϜϫʔΫܦ༝ͰϏϧυπʔϧ؀ڥΛҙࣝ͠ͳ͘
    ͍͍ͯΑ͏ͳ΋ͷ͕҆ύΠʹͳΓͦ͏
    

    View Slide

32. ·ͱΊ
    

    View Slide

33. ·ͱΊ
    • 2023೥͸HTML,CSS,JS,ϒϥ΢βपΓͷٕज़มԽͷ଎͕͞౰ͨΓલʹͳͬͯ
    ͍ͩ͘Ζ͏
    
    
    • มԽͷେ͖ͳྲྀΕΛ஌͓͚ͬͯͩ͘Ͱ΋ɺཧղͷղ૾౓͕มΘΔ
    
    
    • ϕετͳબ୒ࢶΛऔΔͨΊʹ΋ΩϟονΞοϓ͍ͯ͜͠͏
    
    
    • ৽͘͠ೖ͖ͬͯͨ΋ͷΛͲͷΑ͏ʹ࢖༻ͯ͠׆༻͍ͯ͘͠ͷ͔ɺ
    

    ͜ΕΛָ͠Ήͷ΋ϑϩϯτΤϯυ։ൃͷ୉ޣຯͷ1ͭʂ
    

    View Slide

34. End👋
    

    View Slide