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
Svelte でルービックキューブを作ってみた
Search
Yuto Ono
March 22, 2024
1
180
Svelte でルービックキューブを作ってみた
Yuto Ono
March 22, 2024
Tweet
Share
More Decks by Yuto Ono
See All by Yuto Ono
EMを目指す方法
yutoono
1
130
レガシーなフロントエンドを_React___Next.js_にリプレースした結果.pdf
yutoono
0
1.1k
レガシーなフロントエンドを リプレースするプラクティス。 エネチェンジが挑む 「React化」
yutoono
4
2k
WebAssembly で 世界最速の数独ソルバーを作った話
yutoono
0
860
AWS Codebuild のすすめ
yutoono
0
1.2k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
Site-Speed That Sticks
csswizardry
3
370
Building Adaptive Systems
keathley
40
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
320
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Transcript
Svelte で ルービックキューブを作ってみた
Yuto の自己紹介 • ENECHANGE株式会社 EM ◦ 本業では主に React を使っている •
個人開発ではSvelteを使うことが多い • 趣味 ◦ ルービックキューブ ▪ 自己ベスト8秒(参考: 世界記録3.13秒) ◦ その他色々
Svelte でルービックキューブ まずはこちらをご覧ください https://rubiks-cube-yuto.vercel.app/ 使用技術 • Svelte • Vite
Svelte でルービックキューブ リポジトリはこちら https://github.com/yuto-ono/rubik • SVGを動的に出力してキューブを描画している • 座標の処理はすべて自前で実装 ◦ ベクトルや行列の計算など
Svelte をアップグレードしてみた • 一年以上前に作ったやつなので、Svelteのバージョンが古くなってた • Before ◦ Svelte 3.52.0 •
After ◦ Svelte 4.2.12
Svelte をアップグレードしたら、警告が
最近のSvelteは a11y に力を入れている? Svelte のブログを遡ると、 a11y 関係のアップデートが多い https://svelte.dev/blog/whats-new-in-svelte-june-2023 https://svelte.dev/blog/whats-new-in-svelte-november-2022 https://svelte.dev/blog/whats-new-in-svelte-october-2022
a11y は忘れがちなので、検出してくれるのは、かなりありがたい
でも、適切な a11y 対応がわからん… このSVG、 button ではないし、 menuitem でもないんだよな…
今回は無視することにしました
まとめ 最近の Svelte は a11y 対応が手厚くなっていてす ばらしい!