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
Component-Driven Design & Development
sakito
6
3.6k
Storybookの実力をフル活用するChromatic
sakito
14
4.5k
2023年のフロントエンド振り返りと2024年
sakito
25
12k
「機能」に対するデザインと開発の焦点を合わせる
sakito
6
2.8k
営業、エンジニア、デザインとエンジニア、デザイン組織づくり、ここまでの道のり
sakito
4
820
Figmaの思想と新機能
sakito
18
7.8k
今後のキャリアパス、どう描く? 20代を振り返ってみてわかる、30代を意識したキャリア戦略
sakito
9
4.6k
Design Systemチームの プロダクトオーナーとして1年間取り組んだこと
sakito
2
650
デザイン室立ち上げの経緯と役割
sakito
4
1.5k
Other Decks in Technology
See All in Technology
Road to Single Activity
yurihondo
1
180
The XZ Backdoor Story
fr0gger
0
3.2k
Datadog を使ったプロダクトとクラウドの セキュリティモニタリング
mrtc0
0
620
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.1k
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7k
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
210
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
890
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
130
四国クラウドお遍路 2024 in 高知 オープニング
yukataoka
0
180
Javaにおける関数型プログラミンへの取り組み
skrb
7
300
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
240
20分で分かるIAM全機能 (拡大版) / 20240903-jawsug-yokohama-iam
opelab
3
140
Featured
See All Featured
Infographics Made Easy
chrislema
239
18k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Optimising Largest Contentful Paint
csswizardry
29
2.8k
Being A Developer After 40
akosma
83
580k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Building an army of robots
kneath
302
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
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👋