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

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

  2. ࣗݾ঺հ TBLJUP αΠϘ΢ζגࣜձࣾc%FTJHO5FDIOPMPHJTU 
 ɾσβΠϯςΫϊϩδετ৬ೳ ɾLJOUPOF%FTJHO5FBNॴଐ ɾσβΠϯࣨϦʔμʔ 
 ࣾ಺֎ʹϑϩϯτΤϯυपΓͷ৘ใڞ༗Λ͢Δͷ͕झຯɺ 


    ݄ʹ౓1PEDBTUʹήετग़ԋͯ͠ɺ৘ใΛൃ৴͍ͯ͠·͢ɻ 
 
 UXJUUFS[email protected]@[email protected]@ OPUFTBLJU
  3. ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ • ࿩͢͜ͱ • 2022೥ʹ͋ͬͨϑϩϯτΤϯυʹؔΘΔτϐοΫ͔Βɺݸਓతʹ2023೥Ҏ ߱ͷϑϩϯτΤϯυ͸Ͳ͏ͳ͍͖ͬͯͦ͏͔ਪଌ • ࢲ͸ීஈReactΑΓͷ໨ઢͳͷͰɺશͯ໢ཏͰ͖͍ͯΔΘ͚Ͱ͸ͳ͍͕ɺϑ ϩϯτΤϯυͷࠓޙͷྲྀΕΛಡΉࢀߟʹͳΔͱ޾͍ •

    ࿩͞ͳ͍͜ͱ • 1ͭ1ͭͷٕज़తͳৄࡉ
  4. HTML,CSSͳͲͷϕετϓϥΫςΟε͕มΘ͍ͬͯ͘

  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/
  6. ֤ࣾαʔϏε΋ଓʑͱIE11ͷαϙʔτऴྃ Ҿ༻ݩɿ 
 αΠϘ΢ζ੡඼ɾαʔϏεͰͷ Internet Explorer 11 αϙʔτऴྃʹ͍ͭͯʢ2022/08/17 ߋ৽ʣ |

    αΠϘ΢ζ͔Βͷ͓஌Βͤ 
 https://cs.cybozu.co.jp/2022/007588.html
  7. OSS΋IEαϙʔτΛ੾ͬͨόʔδϣϯΛϦϦʔε Ҿ༻ݩɿ 
 How to Upgrade to React 18 –

    React Blog 
 https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
  8. MDN͔Β΋IEͷදه͕ফ͑ͨ

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

  10. Ҿ༻ݩɿ 
 Interop 2022: browsers working together to improve the

    web for developers 
 https://web.dev/interop-2022/ InteropͷऔΓ૊Έ
  11. Ҿ༻ݩɿ 
 web-platform-tests dashboard 
 https://wpt.fyi/interop-2022 web-platform-tests dashboardͷ޲্

  12. ϕετϓϥΫςΟε͕มΘ͍ͬͯ͘ • ϒϥ΢βΛؾʹ͠ͳͯ͘΋Α͘ͳ͖ͬͯͨ • ͍··Ͱ৭ʑؾʹͯ͠࢖͑ͳ͔ٕͬͨज़Λϑϧ׆༻Ͱ͖Δঢ়ଶʹͳ͖ͬͯͨ • ϒϥ΢β΋ͲΜͲΜ৽͍ٕ͠ज़Λ࢖͑ΔΑ͏ʹͯ͘͠Ε͍ͯΔ • ޓ׵ੑΛ޲্ͤ͞Δ׆ಈ΋޿͕͖ͬͯͨ •

    2021೥ʹϕετ࣮ͩͬͨ૷͕ɺ2022೥ʹ͸มΘ͍ͬͯΔ͔΋͠Εͳ͍ • 2023೥Ҏ͔߱Β͸͞ΒʹมԽ͸Ճ଎͍ͯͩ͘͠Ζ͏
  13. 2022೥ʹ࢖͑ΔΑ͏ʹͳͬͨ୅දతͳٕज़ྫ • <dialog> • structuredClone • :focus-visible • :has(), :is(),

    :where() • Flexbox gap • subgrid • cascade layers
  14. ίϯϙʔωϯτʹ 
 য఺Λ౰ͯ΍͘͢ͳ͖ͬͯͨ

  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
  16. Storybook্Ͱςετ͕Մೳʹ Ҿ༻ݩɿ 
 Interaction tests 
 https://storybook.js.org/docs/react/writing-tests/interaction-testing

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

    CSS Nesting • Container Query • Style Query
  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/
  19. 2023೥͸ߋʹComponent Drivenͳߟ͕͑ਐΉͩΖ͏ Ҿ༻ݩɿ 
 Component Driven User Interfaces 
 https://www.componentdriven.org/

  20. ίϯϙʔωϯτʹয఺Λ౰ͯ΍͘͢ͳ͖ͬͯͨ͜ͱʹΑΔมԽ • ίϯϙʔωϯτʹয఺Λ౰ٕͯͨज़͕૿͖͑ͯͨ • σβΠϯ(Figma) -> ։ൃ(Code)΁ͷ֞ࠜ΋ͳ͘ͳΓͭͭ͋Δ • ίϯϙʔωϯτΛ૊Έ߹Θͤͯɺେ͖ͳػೳΛߏங͢ΔྲྀΕ΁ •

    ίϯϙʔωϯτۦಈ։ൃ(CDD) • ͜ΕΒͷྲྀΕ͔ΒੈͷதతʹίϯϙʔωϯτϥΠϒϥϦ(σβΠϯγεςϜ)ͷීٴ͕૿ ͖͑ͯͨͷͰ͸ͳ͍ͩΖ͏͔ʁ • 2023೥͸ࣗࣾ΍OSSͷίϯϙʔωϯτϥΠϒϥϦ͕ϕʔεͱͳͬͨ։ൃ͕૿͍͑ͯ͘ ͩΖ͏
  21. JSϥϯλΠϜ΍ϑϨʔϜϫʔΫͷଟ༷Խ

  22. ύϑΥʔϚϯεʹಛԽͨ͠Bunͷొ৔ Ҿ༻ݩɿ 
 story.to.design | Generate Figma components from code

    
 https://story.to.design/
  23. DenoͷnpmରԠ Ҿ༻ݩɿ 
 Big Changes Ahead for Deno 
 https://deno.com/blog/changes

  24. MPAࢥ૝Ͱ͋ΔAstroͷొ৔ Ҿ༻ݩɿ 
 Astro | Build faster websites 
 https://astro.build/

  25. Shopify͕RemixΛങऩ Ҿ༻ݩɿ 
 Mixing It Up: Remix Joins Shopify to

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

    • ࣗ෼ͷ໨తʹ͋ͬͨɺΑΓϕετͳબ୒ࢶ͕૿͑ͯ͘ΔͩΖ͏
  27. ϑϩϯτΤϯυϏϧυ؀ڥͷ 
 ҠΓมΘΓ

  28. webpackͷޙܧͱͯ͠Turbopackͷొ৔ Ҿ༻ݩɿ 
 Turbopack - The successor to Webpack 


    https://turbo.build/pack
  29. Viteͷ޿͕Γ Ҿ༻ݩɿ 
 The State of JS 2022: Build Tools

    
 https://2022.stateo f js.com/en-US/libraries/build-tools/ ΋͏Ұ౓࢖͍͍ͨͰ্Ґ webpack͸͔ͳΓॱҐΛམͱ͢ ࢖ΘΕ͍ͯΔ΋ͷ͸ 
 webpack͕ଟ͍ Viteͷ࢖༻཰ͷ্ঢ
  30. RomeͷϦϦʔε͕͸͡·ͬͨ Ҿ༻ݩɿ 
 Rome — Uni f ied developer tools

    for JavaScript, TypeScript, and the web 
 https://rome.tools/
  31. ϑϩϯτΤϯυϏϧυ؀ڥͷҠΓมΘΓ • Webpackͷޙܧ͕Ͱ͖ͯͨ͜ͱͰɺwebpackΛ࠾༻͢Δͷ͸͍ۙকདྷஔ͖׵͑ͷՄೳੑ͕ߴ͘ ͳͬͨ • 2023೥͸Next.jsͷΑ͏ͳϑϨʔϜϫʔΫҎ֎ͰɺϏϧυ؀ڥߏங͢Δͱ͖ʹwebpackΛ࠾༻ ͢Δ͜ͱ͕ͳ͘ͳΓͦ͏ • ϏϧυύϑΥʔϚϯε͕༏Ε͍ͯΔ΋ͷ͕ٻΊΒΕΔΑ͏ʹ •

    RustϕʔεͰߏங͢Δπʔϧ͕૿͖͑ͯͨͷͰɺpluginͷΑ͏ͳ΋ͷΛॻ͘ͷ͸Rust͕ඞཁʹ ͳͬͯ͘ΔՄೳੑ΋ • Rome͕2023೥ʹόϯυϥʔͷػೳ΋ἧ͑ΔɺTurbopack͕Next.jsҎ֎Ͱ࢖͑ΔΑ͏ʹͳΔ༧ఆ ͕͋Δ • 2023೥͔ΒઌͷͨΊʹɺNext.jsͷΑ͏ͳϑϨʔϜϫʔΫܦ༝ͰϏϧυπʔϧ؀ڥΛҙࣝ͠ͳ͘ ͍͍ͯΑ͏ͳ΋ͷ͕҆ύΠʹͳΓͦ͏
  32. ·ͱΊ

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

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