本文へ移動

Svelte 10月2024年版 新機能

強化されたeachブロックと無限ループのコールスタック

Dani Sandoval

10月になりました！ということは…Svelte Summit 秋まであと19日です！最新のSvelte Summitニュースは、公式ニュースレターを購読するか、ストリームをDiscordでフォローしてください。

Svelte 5リリース候補版を試してくださった皆様のおかげで、メンテナーはバグの修正と今後のリリースに向けたパフォーマンスの向上に懸命に取り組んできました。今月は、最も注目すべき変更点と、コミュニティが過去数週間で作成した多くのアプリ、リソース、ライブラリについてご紹介します。

Svelteの新機能

プロジェクトをSvelte 5に移行したいですか？移行ツールを試して、チームにフィードバックを提供してみませんか？svelte-migrateツールを試してみてください！npx svelte-migrate svelte-5だけで開始できます。問題が発生した場合は、問題を報告してください。

その他の新機能はこちら…

  • レガシーコンポーネントは、syncオプションを使用して非同期的に手動でインスタンス化できるようになりました (**5.0.0-next.237**、#12970)
  • eachブロックはSSRモードで大幅に改善されました。不要な宣言を削除し、配列の長さを反復処理する前にキャッシュします (**5.0.0-next.242**、#13060)
  • 無限ループが検出されると、開発モードでコールスタックが表示されるようになりました。最後に実行された10個のエフェクトが出力されます (**5.0.0-next.246**、#13231)
  • @sveltejs/enhanced-imgを使用するプロジェクトでは、モジュール変数がテンプレートにインライン化されるため、バンドルサイズが大幅に小さくなります (**5.0.0-next.246**、#13075)
  • <button> / <a>要素にaria-labelとコンテンツがない場合、アクセシビリティに関する警告が表示されるようになりました (**5.0.0-next.250**、#13130)
  • アニメーションは、変換の計算時にzoomを考慮するようになりました (**5.0.0-next.254**、#13317)
  • runeモードでは<svelte:self>は非推奨となりました。コンポーネントは自身をインポートできるようになったため、不要になりました (**5.0.0-next.256**、#13333)
  • ほとんどすべてのSvelteプロジェクトで使用されているCLIであるsvelte-checkが大幅に軽量化されました (リポジトリ、投稿)

Svelte 5を本番環境向けに準備する上でメンテナーが取り組んできたすべての作業を見たいですか？CHANGELOGで、大小さまざまな修正を確認してください！

SvelteKitとLanguage Toolsの新機能

  • SvelteKitは、load関数で型付き配列をサポートするようになりました。「base64エンコーディングを使用するため、生のデータより33％大きくなるため、過剰に使用すべきではありませんが、必要な場合は便利です」(**2.6.0**、#12716)
  • Svelte 5のComponentインターフェースを介して型指定されたコンポーネントは、適切なインテリセンスを取得します (**extensions-109.0.1**)

コミュニティショーケース

Svelteで構築されたアプリとサイト

  • svelte0.devを使用すると、テキストプロンプトを介してshadcn/uiを使用してSvelte UIを生成できます
  • ミニスプレッドシートコンポーネントは、Svelteのリアクティブ性の仕組みを紹介するのに最適です
  • Poofは、オプションのToDoリスト、メールアラート、特定の日付以降の削除などの機能を備えた、自己破壊型メモアプリです
  • kunftは、GitHubから直接Dockerコンテナとアプリをデプロイするためのクラウドプラットフォームです
  • quickpromptは、ChatGPTプロンプトの保存と取得を容易にするブラウザ拡張機能です
  • Ditherは、Return of the Obra DinnとMeatspac.esに触発されたローファイGIFチャットアプリです
  • cobaltは、お気に入りのウェブサイトからビデオ、オーディオ、写真、GIFなど、何でも保存するのに役立ちます
  • YouTube Looperは、YouTubeビデオのカスタムループ拡張機能です
  • LeetLinkは、テーマをカスタマイズできるLinktreeのようなサービスです
  • WhatChordは、ピアノのコードファインダーです
  • AIUIは、OAI互換API向けのWeb UIです

学習リソース

Svelteコントリビューターとアンバサダーの作品

今週のSvelte

  • 第74回 — 変更ログ、raceとmaybeStream、svelte:componentの廃止
  • 第75回 — 変更ログ、$props、$state
  • 第76回 — 変更ログ、svelte-fsm、スクリプトモジュール、末尾のスラッシュ
  • 第77回 — 変更ログ、Context API、JSX、シングルファイルコンポーネント
  • 第78回 — 変更ログ、不定形チェックボックス、クラスとアクション

Svienna 2024年9月

読むべき記事

視聴すべきビデオ

ライブラリ、ツール、コンポーネント

  • Tzezar’s Datagridは、使いやすくカスタマイズも容易なデータグリッドコンポーネントです
  • SparklePostは、最新の高速なWeb開発技術を使用して、ネイティブのiOSおよびAndroidアプリで一般的に見られるインターフェースパターンを実装したデモアプリケーションです
  • tipexは、TipTapをベースにしたSvelteKit向けの、カスタマイズ可能なリッチテキストエディターです

今月は以上です！何か見逃した点がありましたら、RedditまたはDiscordでお知らせください。

次回まで 👋