Burikaigi 2023 https://burikaigi.dev/
Twitter https://twitter.com/__sakito__
2022ʹى͖ͨ ϑϩϯτΤϯυͷมԽ20231݄21 / #burikaigi , #burikaigi_bBuriKaigi 2023
View Slide
ࣗݾհTBLJUPαΠϘζגࣜձࣾc%FTJHO5FDIOPMPHJTU ɾσβΠϯςΫϊϩδετ৬ೳɾLJOUPOF%FTJHO5FBNॴଐɾσβΠϯࣨϦʔμʔ ࣾ֎ʹϑϩϯτΤϯυपΓͷใڞ༗Λ͢Δͷ͕झຯɺ ݄ʹ1PEDBTUʹήετग़ԋͯ͠ɺใΛൃ৴͍ͯ͠·͢ɻ UXJUUFS!@@TBLJUP@@ OPUFTBLJU
͢͜ͱɾ͞ͳ͍͜ͱ• ͢͜ͱ• 2022ʹ͋ͬͨϑϩϯτΤϯυʹؔΘΔτϐοΫ͔Βɺݸਓతʹ2023Ҏ߱ͷϑϩϯτΤϯυͲ͏ͳ͍͖ͬͯͦ͏͔ਪଌ• ࢲීஈReactΑΓͷઢͳͷͰɺશͯཏͰ͖͍ͯΔΘ͚Ͱͳ͍͕ɺϑϩϯτΤϯυͷࠓޙͷྲྀΕΛಡΉࢀߟʹͳΔͱ͍• ͞ͳ͍͜ͱ• 1ͭ1ͭͷٕज़తͳৄࡉ
HTML,CSSͳͲͷϕετϓϥΫςΟε͕มΘ͍ͬͯ͘
ϚΠΫϩιϑτ͕20226݄ʹIE11 αϙʔτऴྃΛൃදҾ༻ݩɿ Internet Explorer 11 αϙʔτΛऴྃ͠·ͨ͠ɻͷ͝Ѫސ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ - Windows Blog for Japan https://blogs.windows.com/japan/2022/06/15/internet-explorer-11-is-no-longer-supported/
֤ࣾαʔϏεଓʑͱIE11ͷαϙʔτऴྃҾ༻ݩɿ αΠϘζɾαʔϏεͰͷ Internet Explorer 11 αϙʔτऴྃʹ͍ͭͯʢ2022/08/17 ߋ৽ʣ | αΠϘζ͔Βͷ͓Βͤ https://cs.cybozu.co.jp/2022/007588.html
OSSIEαϙʔτΛͬͨόʔδϣϯΛϦϦʔεҾ༻ݩɿ How to Upgrade to React 18 – React Blog https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
MDN͔ΒIEͷදه͕ফ͑ͨ
IE11αϙʔτऴྃʹΑΔมԽ• HTML,CSS,JSϒϥβAPIͷ׆༻ͷେ͖ͳ੍ݶ͕ݮͬͨ• ৽͘͠Ͱͯ͘Δٕज़༻࣌ʹϒϥβΛؾʹ͢Δඞཁ͕ͳ͘ͳ͖ͬͯͨ• Chrome,Edge,Firefox࠷৽൛ɺSafariগ͠Εؾຯ͕ͩ…• ϒϥβຖͷޓੑʹ͍ͭͯInteropͱ͍͏औΓΈ͋Δ
Ҿ༻ݩɿ Interop 2022: browsers working together to improve the web for developers https://web.dev/interop-2022/InteropͷऔΓΈ
Ҿ༻ݩɿ web-platform-tests dashboard https://wpt.fyi/interop-2022web-platform-tests dashboardͷ্
ϕετϓϥΫςΟε͕มΘ͍ͬͯ͘• ϒϥβΛؾʹ͠ͳͯ͘Α͘ͳ͖ͬͯͨ• ͍··Ͱ৭ʑؾʹͯ͑͠ͳ͔ٕͬͨज़Λϑϧ׆༻Ͱ͖Δঢ়ଶʹͳ͖ͬͯͨ• ϒϥβͲΜͲΜ৽͍ٕ͠ज़Λ͑ΔΑ͏ʹͯ͘͠Ε͍ͯΔ• ޓੑΛ্ͤ͞Δ׆ಈ͕͖ͬͯͨ• 2021ʹϕετ࣮͕ͩͬͨɺ2022ʹมΘ͍ͬͯΔ͔͠Εͳ͍• 2023Ҏ͔߱Β͞ΒʹมԽՃ͍ͯͩ͘͠Ζ͏
2022ʹ͑ΔΑ͏ʹͳͬͨදతͳٕज़ྫ• • structuredClone• :focus-visible• :has(), :is(), :where()• Flexbox gap• subgrid• cascade layers
ίϯϙʔωϯτʹ যΛͯ͘͢ͳ͖ͬͯͨ
Playwright,Cypressʹίϯϙʔωϯτςετ͕ՃҾ༻ݩɿ Cypress Component Testing | Cypress Documentation https://docs.cypress.io/guides/component-testing/overview Experimental: components | Playwright https://playwright.dev/docs/test-components
Storybook্Ͱςετ͕ՄೳʹҾ༻ݩɿ Interaction tests https://storybook.js.org/docs/react/writing-tests/interaction-testing
ίϯϙʔωϯτʹযΛͯͨɺCSSͷՃɾ༷ݕ౼• Scoped Styles (@scope)• Cascade layers (@layer)• CSS Nesting• Container Query• Style Query
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/figmatocode/
2023ߋʹComponent Drivenͳߟ͕͑ਐΉͩΖ͏Ҿ༻ݩɿ Component Driven User Interfaces https://www.componentdriven.org/
ίϯϙʔωϯτʹযΛͯ͘͢ͳ͖ͬͯͨ͜ͱʹΑΔมԽ• ίϯϙʔωϯτʹযΛٕͯͨज़͕૿͖͑ͯͨ• σβΠϯ(Figma) -> ։ൃ(Code)ͷ֞ࠜͳ͘ͳΓͭͭ͋Δ• ίϯϙʔωϯτΛΈ߹Θͤͯɺେ͖ͳػೳΛߏங͢ΔྲྀΕ• ίϯϙʔωϯτۦಈ։ൃ(CDD)• ͜ΕΒͷྲྀΕ͔ΒੈͷதతʹίϯϙʔωϯτϥΠϒϥϦ(σβΠϯγεςϜ)ͷීٴ͕૿͖͑ͯͨͷͰͳ͍ͩΖ͏͔ʁ• 2023ࣗࣾOSSͷίϯϙʔωϯτϥΠϒϥϦ͕ϕʔεͱͳͬͨ։ൃ͕૿͍͑ͯͩ͘Ζ͏
JSϥϯλΠϜϑϨʔϜϫʔΫͷଟ༷Խ
ύϑΥʔϚϯεʹಛԽͨ͠BunͷొҾ༻ݩɿ story.to.design | Generate Figma components from code https://story.to.design/
DenoͷnpmରԠҾ༻ݩɿ Big Changes Ahead for Deno https://deno.com/blog/changes
MPAࢥͰ͋ΔAstroͷొҾ༻ݩɿ Astro | Build faster websites https://astro.build/
Shopify͕RemixΛങऩҾ༻ݩɿ Mixing It Up: Remix Joins Shopify to Push the Web Forward https://shopify.engineering/remix-joins-shopify
JSϥϯλΠϜϑϨʔϜϫʔΫͷଟ༷Խ• 2022JSϥϯλΠϜϑϨʔϜϫʔΫͷ৽͍͠ͷ͕ొͨ͠• 2023͜ΕΒΛ׆༻Ͱ͖Δγʔϯ͕૿͍͑ͯ͘ͷͰͳ͍ͩΖ͏͔ʁ• ReactΛ͏ͳΒNext.js, JSϥϯλΠϜNode.jsͱ ݴ͑ͳ͘ͳͬͯ͘Δ͔͠Εͳ͍• ࣗͷతʹ͋ͬͨɺΑΓϕετͳબࢶ͕૿͑ͯ͘ΔͩΖ͏
ϑϩϯτΤϯυϏϧυڥͷ ҠΓมΘΓ
webpackͷޙܧͱͯ͠TurbopackͷొҾ༻ݩɿ Turbopack - The successor to Webpack https://turbo.build/pack
Viteͷ͕ΓҾ༻ݩɿ The State of JS 2022: Build Tools https://2022.stateofjs.com/en-US/libraries/build-tools/͏Ұ͍͍ͨͰ্Ґwebpack͔ͳΓॱҐΛམͱ͢ΘΕ͍ͯΔͷ webpack͕ଟ͍Viteͷ༻ͷ্ঢ
RomeͷϦϦʔε͕͡·ͬͨҾ༻ݩɿ Rome — Unified developer tools for JavaScript, TypeScript, and the web https://rome.tools/
ϑϩϯτΤϯυϏϧυڥͷҠΓมΘΓ• Webpackͷޙܧ͕Ͱ͖ͯͨ͜ͱͰɺwebpackΛ࠾༻͢Δͷ͍ۙকདྷஔ͖͑ͷՄೳੑ͕ߴ͘ͳͬͨ• 2023Next.jsͷΑ͏ͳϑϨʔϜϫʔΫҎ֎ͰɺϏϧυڥߏங͢Δͱ͖ʹwebpackΛ࠾༻͢Δ͜ͱ͕ͳ͘ͳΓͦ͏• ϏϧυύϑΥʔϚϯε͕༏Ε͍ͯΔͷ͕ٻΊΒΕΔΑ͏ʹ• RustϕʔεͰߏங͢Δπʔϧ͕૿͖͑ͯͨͷͰɺpluginͷΑ͏ͳͷΛॻ͘ͷRust͕ඞཁʹͳͬͯ͘ΔՄೳੑ• Rome͕2023ʹόϯυϥʔͷػೳἧ͑ΔɺTurbopack͕Next.jsҎ֎Ͱ͑ΔΑ͏ʹͳΔ༧ఆ͕͋Δ• 2023͔ΒઌͷͨΊʹɺNext.jsͷΑ͏ͳϑϨʔϜϫʔΫܦ༝ͰϏϧυπʔϧڥΛҙࣝ͠ͳ͍͍ͯ͘Α͏ͳͷ͕҆ύΠʹͳΓͦ͏
·ͱΊ
·ͱΊ• 2023HTML,CSS,JS,ϒϥβपΓͷٕज़มԽͷ͕ͨ͞Γલʹͳ͍ͬͯͩ͘Ζ͏• มԽͷେ͖ͳྲྀΕΛ͓͚ͬͯͩ͘Ͱɺཧղͷղ૾͕มΘΔ• ϕετͳબࢶΛऔΔͨΊʹΩϟονΞοϓ͍ͯ͜͠͏• ৽͘͠ೖ͖ͬͯͨͷΛͲͷΑ͏ʹ༻ͯ͠׆༻͍ͯ͘͠ͷ͔ɺ ͜ΕΛָ͠ΉͷϑϩϯτΤϯυ։ൃͷޣຯͷ1ͭʂ
End👋