Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2022年に起きたフロントエンドの変化
Search
sakito
January 21, 2023
Technology
36
20k
2022年に起きたフロントエンドの変化
Burikaigi 2023
https://burikaigi.dev/
Twitter
https://twitter.com/__sakito__
sakito
January 21, 2023
Tweet
Share
More Decks by sakito
See All by sakito
2024年のWebフロントエンドのふりかえりと2025年
sakito
2
240
Component-Driven Design & Development
sakito
7
4.6k
Storybookの実力をフル活用するChromatic
sakito
14
5.1k
2023年のフロントエンド振り返りと2024年
sakito
26
13k
「機能」に対するデザインと開発の焦点を合わせる
sakito
6
3.1k
営業、エンジニア、デザインとエンジニア、デザイン組織づくり、ここまでの道のり
sakito
4
900
Figmaの思想と新機能
sakito
18
8k
今後のキャリアパス、どう描く? 20代を振り返ってみてわかる、30代を意識したキャリア戦略
sakito
9
4.8k
Design Systemチームの プロダクトオーナーとして1年間取り組んだこと
sakito
2
740
Other Decks in Technology
See All in Technology
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.5k
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.3k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
2k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
710
Larkご案内資料
customercloud
PRO
0
650
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
Building Products in the LLM Era
ymatsuwitter
10
5.2k
Culture Deck
optfit
0
400
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
180
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
240
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Code Review Best Practice
trishagee
66
17k
The Pragmatic Product Professional
lauravandoore
32
6.4k
YesSQL, Process and Tooling at Scale
rocio
171
14k
BBQ
matthewcrist
86
9.5k
Become a Pro
speakerdeck
PRO
26
5.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
GraphQLとの向き合い方2022年版
quramy
44
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Transcript
2022ʹى͖ͨ ϑϩϯτΤϯυͷมԽ 20231݄21 / #burikaigi , #burikaigi_b BuriKaigi 2023
ࣗݾհ 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-2022 web-platform-tests dashboardͷ্
ϕετϓϥΫςΟε͕มΘ͍ͬͯ͘ • ϒϥβΛؾʹ͠ͳͯ͘Α͘ͳ͖ͬͯͨ • ͍··Ͱ৭ʑؾʹͯ͑͠ͳ͔ٕͬͨज़Λϑϧ׆༻Ͱ͖Δঢ়ଶʹͳ͖ͬͯͨ • ϒϥβͲΜͲΜ৽͍ٕ͠ज़Λ͑ΔΑ͏ʹͯ͘͠Ε͍ͯΔ • ޓੑΛ্ͤ͞Δ׆ಈ͕͖ͬͯͨ •
2021ʹϕετ࣮͕ͩͬͨɺ2022ʹมΘ͍ͬͯΔ͔͠Εͳ͍ • 2023Ҏ͔߱Β͞ΒʹมԽՃ͍ͯͩ͘͠Ζ͏
2022ʹ͑ΔΑ͏ʹͳͬͨදతͳٕज़ྫ • <dialog> • 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/ f igmatocode/
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.stateo f js.com/en-US/libraries/build-tools/ ͏Ұ͍͍ͨͰ্Ґ webpack͔ͳΓॱҐΛམͱ͢ ΘΕ͍ͯΔͷ webpack͕ଟ͍ Viteͷ༻ͷ্ঢ
RomeͷϦϦʔε͕͡·ͬͨ Ҿ༻ݩɿ Rome — Uni f ied 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👋