$30 off During Our Annual Pro Sale. View Details »

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

sakito
January 21, 2023

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

sakito

January 21, 2023
Tweet

More Decks by sakito

Other Decks in Technology

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