Skip to main content

Svelte 4 発表

パフォーマンス、デベロッパーエクスペリエンス、サイトの更新

The Svelte team

翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/svelte-4

日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。

数ヶ月の開発期間を経て、Svelte 4 の安定版リリースを発表できることを嬉しく思います。

光陰矢の如し - Svelte 3 がリリースされたのはもう4年以上前です！ JavaScript フレームワークの時間としては、それは大昔のことです。Svelte のフレッシュさはずっと保たれたままでしたが、その間に Node.js と ブラウザの API は進化しており、その改善点を取り入れるため、今日、私たちは Svelte を更新します。Svelte 4 は主にメンテナンスリリースであり、要求される最小バージョンを上げ、特定エリアの設計を強化しました。これは、次世代の Svelte、つまり Svelte 5 のための基盤となります - きっとあなたにも気に入って頂けると思います。

まだ Svelte を試したことがなければ、インタラクティブなチュートリアルか、StackBlitz、またはローカルで npm create svelte@latest を実行するなどして試してみてください。Svelte を使えば、HTML、CSS、JS、そして Svelte コンパイラの力で Web UI を簡単にまとめることができます。このリリースの詳細については Svelte Radio Live をご覧ください。

What's new

Performance

このリリースにより、ハイドレーションコードが小さくなり、高速になりました。そのインパクトが見たければ、SvelteKit ユーザーなら .svelte-kit/output/client/_app/immutable/nodes フォルダを調べてみればコンパイル後の出力サイズが小さくなっていることがわかります。例えば、kit.svelte.dev のサイト全体で生成された JS は 12.7% 削減されました (126.3 kB から 110.2 kB になりました)。

Svelte 4 では Svelte パッケージのサイズが約 75% (10.6 MB が 2.8 MB に) 削減され、npm install の時間が短くなります。この改善は特に、私たちのインタラクティブな学習リソースである learn.svelte.dev を初回読み込むときや、Svelte REPL を使うとき、ユーザーが接続制限のときなどに顕著に現れます。残りのパッケージサイズの大部分は eslint support で、CJS ビルドを配布する必要があるためです。eslint の書き換えが完了すれば、Svelte のパッケージサイズは更に 50% 小さくなります。

Svelte の dependencies の数は 61 から 16 に大幅に削減されました。つまり、ユーザーにとってはダウンロードが速くなるとともに、サプライチェーンアタックのリスクも低くなったということです。SvelteKit の最新バージョンでも、dependencies の数を少し減らせました。

Developer experience

Svelte 4 では Svelte でのオーサリング・エクスペリエンスが、より一貫性があり直感的になりました: トランジションでは |local がデフォルトとなったことでアニメーションがページトランジションをブロックしないようになり、プリプロセッサは書くのがより簡単になり、またいくつかの修正によって CSP の設定と使用が簡単になりました。

web components のユーザーにとって、最も大きい変更点は Svelte で custom elements を作成する方法がオーバーホールされたことでしょう。生成方法が変わったことにより、あらゆるバグや不整合が取り除かれました。

最後に、IDE のオーサリングエクスペリエンスの改善もいくつか行いました:

  • svelte モジュールで cmd+click すると、.d.ts ファイルではなく実装に移動するようになりました
  • svelte/internal からのインポートが非表示になり、オートコンプリート候補がきれいになりました
  • auto-imports がより確実に動作するようになりました

Updated site, docs, and tutorial

公式の svelte.dev サイトがオーバーホールされました。ドキュメントは複数ページに分割され、モバイル向けの nav が改善され、TypeScript ドキュメントは全面的に作り直され、ダークモードに対応し、REPL が拡張されました。SvelteKit サイトも同じように更新している最中です。そしてすべてのチュートリアルリンクが learn.svelte.dev を指すようになりました。Safari 16.3 以前のユーザーのために、従来のチュートリアルはまだご利用いただけます。

近日、サイトの全ての変更点についてより詳細なブログ記事を掲載しますので、乞うご期待！

Migrating

Svelte 3 と互換性のあるアプリやライブラリのほとんどは、Svelte 4 にも互換性があるでしょう。ライブラリの作者の方は、もし peerDependencies に svelte が指定されている場合は version range に Svelte 4 を含めるように更新する必要があります。アプリケーションの作者の方は、新しくなった最小バージョンの要求 (Node.js 16 など) を満たすようにツールを更新する必要があるでしょう。その他多くの移行ステップは、npx svelte-migrate@latest svelte-4 で処理できます。

完全な詳細についてはマイグレーションガイドをお読みください。

Svelte 5: the next generation of Svelte

Svelte 5 では Svelte コンパイラとランタイムの書き換えを行う予定です。Svelte 4 の主な目的は、古いバンドラーなの様々なテクノロジーのレガシーバージョンをドロップし、モダンなツールを取り入れ、将来の改善のための土台を整えることでした。これらの変更により、Svelte 5 と Svelte 4 のコードベースを比較するのが簡単になり、新しい実装に対して既存のテストを実行することができるようになり、様々なことが便利になります。Svelte 5 では、大きい新機能とパフォーマンスの改善を予定しています。変更についてはまだ作成中で、まだ共有できる段階ではありませんが、ご期待ください！

Changelog

変更点の完全なリストについては changelog をご参照ください。

Acknowledgements

何よりもまず、このリリースを可能にしてくれた Svelte のメンテナー、コントリビューターの皆さまに感謝したいと思います。このリリースに対する複数の PR をコントリビュートしてくれた開発者は @dummdidumm、@gtm-nayan、@benmccann、@tanhauhau、@Karlinator、@ngtr6788 です。また、the Svelte OpenCollective に寄付してくれたコミュニティメンバーにも感謝したいと思います。この寄付で、PuruVJ によるサイトのオーバーホールと、@gtm-nayan の多数の修正をスポンサーすることができました。

最後に、このリリースの準備を助けてくれたエコシステムの多くのライブラリメンテナーにも感謝します。新しいバージョンの aria-query や axobject-query のリリースを助けてくれた @jessebeach、Storybook との互換性を確保してくれた @jreinhold、svelte-testing-library をアップデートしてくれた @yanick、ありがとうございました。また、様々なものが動作していることを確認するために、@dominikg がセットアップしてくれた svelte-ecosystem-ci は、彼が Vite のために行ってくれた同様の作業をモデルにしており、エコシステム内の主要なプロジェクトに対するテストを継続的に支援しています。