メインコンテンツへスキップ

Svelte 2024年11月の新機能

Svelte 5 の新機能と多数の新しいコミュニティライブラリ

Dani Sandoval

発表記事、真新しいオムニサイト、またはメンテナーがSvelte Summit でライブ配信したことを見逃した方は、Svelte 5 がリリースされました！

Svelte Summit では、SvelteHack 2024：Svelte ハッカソン（豪華賞品付き）も発表されました。応募期間は1月9日までで、10月18日以降に開始されたプロジェクトのみが対象となります。準備を整えて、ハッキングを開始しましょう！

Svelte 5 のリリース以降、いくつかの便利な機能が導入されたマイナーバージョンがすでに1つあります。今月のまとめでは、これらの機能と、CLI、SvelteKit などに関する多数のアップデートについて詳しく見ていきます...

Svelte の新機能

最近Svelte 5 に移行したばかりの場合は、このリリースに含まれているすべての機能について、過去数か月のアップデートを確認してください。今月は、-next.XXX のマークが付いたものがいくつかあります。これらの変更は 5.0 リリースに含まれていました。

  • スニペットをスロットの埋め込みに使用できるようになりました（5.0.0-next.262、#13427）
  • hidden until-found および beforematch が DOM 要素で利用可能になりました（5.0.0-next.266、MDN ドキュメント、#13612）
  • 破壊的変更：ロジックブロック式で状態の変更が許可されなくなりました（5.0.0-next.269、#13625）
  • getContext() が $derived ルーン内で許可されるようになりました（5.1.0、ドキュメント、#13830）

Svelte コンパイラの改善（移行を容易にするためのすべての作業を含む）に関する驚くべき作業をすべて確認するには、CHANGELOG を参照してください。

SvelteKit、Svelte CLI、および言語ツールの新機能

  • adapter-auto が Bun パッケージマネージャーをサポートするようになりました（3.3.1、#12854）
  • Svelte CLI は、新規および既存のプロジェクト向けに多数のアドオンをサポートするようになりました。CLI リポジトリ、またはコマンドラインから npx sv create を実行することで、アドオンの全リストを確認できます。
  • Svelte 拡張機能が Svelte 5 コンポーネントの移行コマンドを提供するようになりました（extensions-109.1.0）

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

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

  • DocumentCloud は、世界中の報道機関が一次資料を管理するために使用するオールインワンのプラットフォームです
  • Chord は、ポッドキャストやインタビューを高音質で録音するためのアプリです
  • Monokai.pro は現在 Svelte 5 を使用しています（詳細については、Reddit の投稿を参照してください）
  • svelte audio visualizations は、音声入力と出力を視覚化するのに役立ちます
  • avi12's YouTube 拡張機能は、Svelte が Chrome 拡張機能でどのように使用できるかの素晴らしい例です
  • Multy は、URL のリストを作成し、単一のリンクで共有できるシンプルなツールです
  • BlackJack は Svelte 5 で構築されたカードゲームで、教育およびデモンストレーションの目的で Svelte の機能を紹介しています

学習リソース

Svelte のコントリビューターとアンバサダーをフィーチャー

今週の Svelte

読む

見る

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

  • Svelte 5 のテスト例 は、Vitest で Svelte 5 アプリケーションをテストする方法を示す優れたプロジェクト例です
  • Origin UI - Svelte は、アプリ UI を迅速に構築するためのコピーアンドペーストコンポーネントの豊富なコレクションです
  • Cancellable は、ボタンとアンカー要素に 3 つのリアクティブ属性を追加して、ブラウザーとプラットフォーム間でより一貫したユーザーエクスペリエンスを作成するビルディングブロックです
  • svelte-simple-router は、Svelte 5 用に作成されたクライアントサイドルーターです
  • svelte-openai-realtime-api は、OpenAI リアルタイム API を使用するための Svelte コンポーネントです
  • FlyonUI は、セマンティッククラスと強力な JS プラグインを備えた、オープンソースの Tailwind CSS コンポーネントライブラリです
  • Svelte-Next は、Svelte のバージョンアップデートを自動化します
  • SvelteKit 動的コンポーネントロードデモ は、バックエンド API が提供するコンテンツに応じて、さまざまな Svelte コンポーネントを動的にロードする方法を示しています
  • Tzezar のデータグリッド は、使いやすく、カスタマイズしやすい、Svelte 5 で作成されたデータグリッドです
  • svelte-bundle は、Svelte コンポーネントを単一の HTML ファイルにバンドルするためのツールです（SSR 付き！）
  • svelte-virtuallists は、テーブルとリストを効率的かつ高速に保ちます。大きなリストにすべてのデータを表示するのではなく、表示されている項目のみをレンダリングします
  • Sveltick は、Svelte アプリ用の軽量なトラフィック追跡ライブラリです

今月の Svelte に関する大きなまとめは以上です！Reddit または Discord で何か見逃したものがあれば教えてください。

それではまた 👋