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

Burikaigi 2023
https://burikaigi.dev/

Twitter
https://twitter.com/__sakito__

Transcript

1. 2022೥ʹى͖ͨ 
 ϑϩϯτΤϯυͷมԽ 2023೥1݄21೔ / #burikaigi , #burikaigi_b BuriKaigi 2023
2. ࣗݾ঺հ TBLJUP
   αΠϘ΢ζגࣜձࣾ
   c
   %FTJHO
   5FDIOPMPHJTU 
 ɾσβΠϯςΫϊϩδετ৬ೳ
   ɾLJOUPOF
   %FTJHO
   5FBNॴଐ
   ɾσβΠϯࣨϦʔμʔ
   
 ࣾ಺֎ʹϑϩϯτΤϯυपΓͷ৘ใڞ༗Λ͢Δͷ͕झຯɺ 
 ݄ʹ౓1PEDBTUʹήετग़ԋͯ͠ɺ৘ใΛൃ৴͍ͯ͠·͢ɻ 
 
 UXJUUFS
   
   
   !@@TBLJUP@@
   
   OPUF
   
   TBLJU
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👋