Frontend Weekly 2023-06-30
Panda CSS
2023 年 3 月公開の Chakra UI のロードマップで紹介されていた Panda CSS が正式リリースされました。
Panda CSS は、今までの CSS in JS ライブラリの集大成のようなライブラリです。
- Zero Runtime な CSS フレームワーク
- vanilla-extract のように Type-safe
- Stitched のような Recipes/Variants 機能
- Design Token を定義する機能
- Emotion の css prop、styled-components の styled、Chakura UI の props で指定する形式など、それぞれとほぼ同等の記述をサポート
また公式ドキュメントを見れば分かりますが、多くのフレームワークでの利用が考えらており、それぞれのフレームワークについて、導入手順が丁寧に記述されています。
実際に小さなサービスで、Panda CSS への移行を試してみましたが、かなり体験が良かったです。また使ってみて感じたこととして、Panda CSS の個々の機能は独立しており薄いので、将来的に他のライブラリへ移行する場合も楽だと思いますし、逆に Panda CSS への移行も比較的楽なので Emotion や styled-components などから Zero Runtime な CSS フレームワークへの移行を考えている場合、移行先としてかなり良いのではないかと思いました。
懸念点を上げるとすれば、レスポンシブ対応など複雑な記述をしようとすると独自の記述が出てくる点や、それについての公式ドキュメントの記述が若干少なく感じる点、様々な記述が可能なため派閥が生まれそうな点などでしょうか。
Svelte 4
2023 年 6 月 22 日に、Svelte 4 がリリースされました。
https://svelte.dev/blog/svelte-4
Svelte はざっくり言うと、Vue の SFC のような形式の svelte ファイルを、ライブラリのコードがほぼ含まれていないピュアな状態まで落とし込むコンパイラです。
Svelte を利用した Web アプリフレームワークとしては公式の SvelteKit があり、Next.js や Nuxt.js のような開発体験を得ることも出来ます。SvelteKit 自体は Vite の plugin として実装されています。
Svelte を選択するメリットとして、他ライブラリやフレームワークを採用する場合と比べて、比較的少ない記述でアプリを構築できることや、お手軽に高いパフォーマンスを期待できることが挙げられると思います。
Svelte4 ではメジャーバージョンは上がっていますが、目新しい機能があるわけではありません。コンパイラとランタイムを刷新する予定の Svelete 5 に向けて、レガシーなものを切り捨てることが主な目的とのことです。パッケージサイズはおよそ 75%削減され、依存パッケージも 61 から 16 個へ削減されています。
New W3C website
W3C のウェブサイトがリニューアルして、だいぶ見やすくモダンな感じになりました。ソースコードはこちらから閲覧できる他、デザインシステムも公開されています。
Safari v17 Beta Web Apps
MFW では、基本的に Beta 版の情報は扱わない方針ですが、興味深い機能があったので取り上げます。
https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/
Safari v17 では、Web サイトをネイティブアプリのように扱うことができる Web Apps 機能が追加される予定です。ユーザーはアプリケーションを気軽に Docs に追加し、個別のアプリケーションとして利用できるようになるそうです。加えて、リリースノートで頑なに PWA という単語使われていない気がしますが、PWA の関連の Web API 機能追加も行われます。期待して待ちましょう。