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
76
Svelte でルービックキューブを作ってみた
Yuto Ono
March 22, 2024
Tweet
Share
More Decks by Yuto Ono
See All by Yuto Ono
EMを目指す方法
yutoono
1
70
レガシーなフロントエンドを_React___Next.js_にリプレースした結果.pdf
yutoono
0
850
レガシーなフロントエンドを リプレースするプラクティス。 エネチェンジが挑む 「React化」
yutoono
4
1.1k
WebAssembly で 世界最速の数独ソルバーを作った話
yutoono
0
620
AWS Codebuild のすすめ
yutoono
0
950
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Side Projects
sachag
451
41k
Happy Clients
brianwarren
92
6.4k
The Invisible Side of Design
smashingmag
294
49k
What's in a price? How to price your products and services
michaelherold
238
11k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Bash Introduction
62gerente
605
210k
The Cult of Friendly URLs
andyhume
74
5.7k
Automating Front-end Workflow
addyosmani
1357
200k
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 対応が手厚くなっていてす ばらしい!