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
技術選定を未来に繋いで活用していく
sakito
3
160
2024年のWebフロントエンドのふりかえりと2025年
sakito
4
480
Component-Driven Design & Development
sakito
8
5.2k
Storybookの実力をフル活用するChromatic
sakito
14
5.6k
2023年のフロントエンド振り返りと2024年
sakito
26
13k
「機能」に対するデザインと開発の焦点を合わせる
sakito
7
3.3k
営業、エンジニア、デザインとエンジニア、デザイン組織づくり、ここまでの道のり
sakito
4
950
Figmaの思想と新機能
sakito
18
8.2k
今後のキャリアパス、どう描く? 20代を振り返ってみてわかる、30代を意識したキャリア戦略
sakito
10
5.1k
Other Decks in Technology
See All in Technology
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
380
.NET開発者のためのAzureの概要
tomokusaba
0
230
モダンフロントエンド 開発研修
recruitengineers
PRO
2
260
Backboneとしてのtimm2025
yu4u
4
1.4k
制約理論(ToC)入門
recruitengineers
PRO
2
260
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.2k
浸透しなさいRFC 5322&7208
hinono
0
120
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
190
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
広島発!スタートアップ開発の裏側
tsankyo
0
240
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
2
610
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.2k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Documentation Writing (for coders)
carmenintech
73
5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Done Done
chrislema
185
16k
Designing for humans not robots
tammielis
253
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Facilitating Awesome Meetings
lara
55
6.5k
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👋