2023/06/22にSvelte 4がリリースされました。
Svelteはざっくり言うとフロントエンドフレームワークですが、ReactやVueといった他のフレームワークとは大きな思想の違いがあります。
他のフレームワークはブラウザで表示されたときにはまずライブラリを読み込んでから実行するため、初期動作にどうしても時間がかかります。
Svelteはコンパイル時に素のJavaScriptまで変換してしまうので、ブラウザで表示すると単純にただのJavaScriptが動くだけなので早い、というわけです。
初出からしばらくは全然話題にもならなかったのですが、最近やっと人気が上昇しつつあるようです。
やっぱ安定してきたのとSvelteKitのおかげかな。
以下は公式ブログからSvelte 4リリースのお知らせ、Announcing Svelte 4の紹介です。
Announcing Svelte 4
Svelte 4の安定版をリリースすることができてうれしく思います。
時が経つのは早いもので、Svelte 3がリリースされたのは、なんと4年以上も前のことです。
JavaScriptフレームワークにとっては永遠に匹敵する時間です。
Svelteは今も鮮度を保っていますが、しかしこの4年間にNode.jsやブラウザAPIも進化し続けていました。
我々はそれらの改善を取り込むため、Svelteの更新を続けています。
Svelte 4は主にメンテナンスリリースであり、次世代SvelteであるSvelte 5の舞台を整えるため、最小バージョン要件を引き上げます。
またそれに伴い、一部分野について設計を強化しています。
まだSvelteを触ったことがないようであれば、インタラクティブチュートリアルもしくはStackBlitzをぜひお試しください。
あるいはローカルにnpm create svelte@latestすることもできます。
Svelteを使えば、HTML・CSS・JavaScript、そしてSvelteコンパイラのパワーでWeb UIを簡単に構築することができるでしょう。
本リリースの詳細についてもっと知りたい人は、Svelte Radio Liveもご覧ください。
What's new
Performanceperma
このリリースでは、アウトプットコードがさらに小さく、つまり、さらに早くなりました。
.svelte-kit/output/client/_app/immutable/nodesから、コンパイル後のコードサイズを確認することができます。
たとえばkit.svelte.devでは、サイト全体で、JavaScriptのサイズを126.3kBから110.2kBへと12.7%削減しました。
Svelte 4のパッケージサイズは10.6MBから2.8MBへと75%ほど削減され、npm installにかかる時間を改善しました。
これはlearn.svelte.devに初めて訪れたユーザ、Svelte REPLのユーザ、細い回線しか持っていないユーザには特に恩恵が大きいでしょう。
残っているパッケージサイズの半分は、eslintのサポートのためにCommonJSが必要であるからです。
現在進行中のeslintの書き替えが完了すれば、Svelteのパッケージサイズはさらに半減する見込みです。
Svelteの依存パッケージは61から16へと大幅に削減しました。
これによってダウンロードが早くなり、またサプライチェーン攻撃を受ける可能性も減少するでしょう。
またSvelteKitについても、少しばかり依存パッケージを減らしました。
Developer experience
Svelte 4では、Svelteのオーサリング体験を、より直感的で一貫性のあるものになります。
トランジションは|localがデフォルトとなり、アニメーションがページ遷移をブロックすることを防ぎます。
プリプロセッサの記述はより簡単になり、CSPの設定と使用が容易になりました。
Web Componentsユーザにとって最も大きい変更点は、カスタムエレメントの生成方法のオーバーホールです。
ここに手を加え、これまでに存在したバグや不整合を取り除きました。
最後にIDEの動作にも改善を加えました。
Svelteモジュールでcmd+クリックすると.d.tsにリンクするのではなく実装にリンクするようになりました。
オートコンプリートの候補を改善し、自動インポートがより確実に動作するようになりました。
Updated site, docs, and tutorial
公式サイトsvelte.devを一新しました。
モバイルナビゲーションの改善、TypeScriptドキュメントの修正、ダークモード、強化されたREPLなどを別のページに分割しました。
合わせてSvelteKitのWebサイトも更新しました。
さらに、チュートリアルなどは新サイトlearn.svelte.devに移動しました。
サイトの変更点については、より詳細なブログ記事を近日中に書く予定なのでお待ちください。
Migrating
Svelte 3で動作するアプリやライブラリのほとんどは、Svelte 4でもそのまま動作するはずです。
ライブラリ作者は、peerDependenciesにsvelteを記載している場合はSvelte 4を含めるように更新する必要があります。
アプリケーション作者に必要なことは、新しい最小バージョン要件を満たすようにライブラリを更新することです。
その他の移行手順は、npx svelte-migrate@latest svelte-4コマンドでどうにかなります。
より詳細についてはマイグレーションガイドを参照ください。
Svelte 5: the next generation of Svelte
次世代SvelteであるSvelte 5では、コンパイラとランタイムを刷新する予定です。
Svelte 4では最新のツールを採用し、古いバンドル方法やレガシーのサポートを取りやめることで、今後の改良のための土台を構築することをが主な目的です。
この準備はSvelteの開発者に役立つものであり、Svelte 5とSvelte 4のコードベースを比較したり、既存のテストを新しい実装に適用したりといった作業が容易になります。
Svelte 5は、Svelteに大きな新機能と、パフォーマンスのさらなる向上をもたらします。
まだ変更箇所を共有できる段階ではありませんが、是非ご期待ください！
Changelog
全ての変更点はchangelogをご覧ください。
感想
Svelte5のためにレガシーなどを整理したバージョンということなので、新機能はほとんどありません。
それにしても、いくらなんでも整理しすぎだろ。
ファイルサイズ75%減ですよ。
体重100キロの人が25キロになったわけですよ。
ダイエットおめでとうどころの話ではなくもう死んでるレベル。
単に処理を依存ライブラリに逃がしただけじゃないの？と思えば、依存ライブラリも61から16に激減していています。
それでいてできることはほとんど変わっていないとは、いったいどうなってるんですかねこれ。
マイグレーションガイドを見ると、大きな機能削減はCJS出力できなくなったことくらいで、他にできなくなったことはほとんどないようです。
まあ、Svelteは本体がユーザに展開されるわけではないので、配布サイズが減ることがユーザに直接影響するわけではありませんが。
インストールしやすくなったり開発者経験が向上したりと、開発者には良い効果がありそうです。
チュートリアルは大きく改善され、実際に試しながら学習していくことができます。
いい機会なので、これを機にSvelteに挑戦してみてはどうでしょうか。
なお、非公式ですがSvelteLabというREPLがあり、これを使うと環境構築一切不要でいきなりSvelteKitを試すことができます。
ただContributerが二人しかいないみたいなのでいつまで続くかはわかりませんけどね。