Panda CSS

2023年3月公開のChakra UIのロードマップで紹介されていたPanda CSSが正式リリースされました。

https://panda-css.com/

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ファイルを、ライブラリのコードがほぼ含まれていないピュアな状態まで落とし込むコンパイラです。

https://svelte.jp/

Svelteを利用したWebアプリフレームワークとしては公式のSvelteKitがあり、Next.jsやNuxt.jsのような開発体験を得ることも出来ます。SvelteKit自体はViteのpluginとして実装されています。

https://kit.svelte.dev/

Svelteを選択するメリットとして、他ライブラリやフレームワークを採用する場合と比べて、比較的少ない記述でアプリを構築できることや、お手軽に高いパフォーマンスを期待できることが挙げられると思います。

Svelte4ではメジャーバージョンは上がっていますが、目新しい機能があるわけではありません。コンパイラとランタイムを刷新する予定のSvelete 5に向けて、レガシーなものを切り捨てることが主な目的とのことです。パッケージサイズはおよそ75%削減され、依存パッケージも61から16個へ削減されています。

New W3C website

W3Cのウェブサイトがリニューアルして、だいぶ見やすくモダンな感じになりました。ソースコードはこちらから閲覧できる他、デザインシステムも公開されています。

https://www.w3.org/blog/2023/new-w3c-website-deployed/

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機能追加も行われます。期待して待ちましょう。