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 対応が手厚くなっていてすばらしい！

Svelte でルービックキューブを作ってみた

Svelte でルービックキューブを作ってみた

Yuto Ono

More Decks by Yuto Ono

Featured

Transcript