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
1
230
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
730
Other Decks in Technology
See All in Technology
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.9k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
110
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.1k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.5k
Culture Deck
optfit
0
340
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
380
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A better future with KSS
kneath
238
17k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A designer walks into a library…
pauljervisheath
205
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
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👋