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
110
2024年のWebフロントエンドのふりかえりと2025年
sakito
4
380
Component-Driven Design & Development
sakito
7
4.9k
Storybookの実力をフル活用するChromatic
sakito
14
5.3k
2023年のフロントエンド振り返りと2024年
sakito
26
13k
「機能」に対するデザインと開発の焦点を合わせる
sakito
7
3.2k
営業、エンジニア、デザインとエンジニア、デザイン組織づくり、ここまでの道のり
sakito
4
920
Figmaの思想と新機能
sakito
18
8.1k
今後のキャリアパス、どう描く? 20代を振り返ってみてわかる、30代を意識したキャリア戦略
sakito
10
4.9k
Other Decks in Technology
See All in Technology
Creating Awesome Change in SmartNews
martin_lover
1
270
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
220
YOLOv10~v12
tenten0727
4
940
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
710
似たような課題が何度も蘇ってくるゾンビふりかえりを撲滅するため、ふりかえりのテーマをフォーカスしてもらった話 / focusing on the theme
naitosatoshi
0
460
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #DevOpsDaysTokyo
takabow
0
380
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
5.5k
20250413_湘南kaggler会_音声認識で使うのってメルス・・・なんだっけ?
sugupoko
1
480
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
310
Dynamic Reteaming And Self Organization
miholovesq
3
460
Would you THINK such a demonstration interesting ?
shumpei3
1
220
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Practical Orchestrator
shlominoach
186
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
550
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
4 Signs Your Business is Dying
shpigford
183
22k
Gamification - CAS2011
davidbonilla
81
5.2k
Designing for humans not robots
tammielis
252
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
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👋