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

Svelte 2023年12月の新機能

Svelte Summit Fall 2023でSvelte 5プレビューが発表されました

Dani Sandoval

Svelte Summit Fall 2023は壮大なイベントでした！エコシステム全体からの講演、コアチームによる新しいSvelte Dev Tools、画像最適化、Svelte 5.0のプレビュー版の発表がありました！講演全体の様子はこちらで見ることができます（タイムスタンプは下記）。

  • 0:00 盛り上がりミュージック！
  • 18:20 Svelte DevToolsの探求 - Ignatius B (4分)
  • 25:27 SvelteKitはSPAフレームワークとしてどうなのか - Henry Lie (25分)
  • 53:00 enhanced:img - Ben McCann (6分)
  • 1:03:44 SvelteKit i18nのためのinlang-paraglide JS - Samuel Stroschein (10分)
  • 1:17:32 Svelte & GraphQLの相性の良さ - Jean-Yves Couet (31分)
  • 1:53:10 svelte-ecosystem-ci - Dominik G (10分)
  • 2:23:06 クリエイティブ開発のためのSvelte - Steven Stavrakis (10分)
  • 2:35:33 ドキュメントの翻訳 - Romain I’Ourson (11分)
  • 2:49:48 ENHANCE! - Paolo Ricciuti (25分)
  • 3:18:25 Svelteソリューションによるアクセシビリティのヒント - Enrico Sacchetti (25分)
  • 3:49:11 svelte@next - Rich Harris (18分)

今日からAdvent of Svelteも始まります。12月の毎日、Svelteのチャレンジがあります。Svelteを使った毎日のフロントエンドチャレンジに参加して、お祝いをしましょう！

それでは、アップデートを見ていきましょう...

Svelteの新機能（5.0プレビュー！）

Svelte 5プレビューがsvelte@nextで利用可能になりました。現在のSvelte 4のバージョン（@latest）は4.2.7です。以下に示す変更点はすべて、プレビュー版のブランチからのものです。

  • acorn-typescriptを介してTypeScriptがネイティブにサポートされるようになりました（5.0.0-next.9、#9482）
  • 新しい$effect.activeruneは、エフェクトがアクティブかどうかを示すブール値を返します。これにより、（エフェクト内またはテンプレート内で）値が読み取られたときにサブスクリプションを設定できますが、サブスクリプションを作成せずに値を読み取ることもできます（5.0.0-next.10、ドキュメント、#9591）
  • 新しい$effect.rootruneは、自動クリーンアップされない、追跡されないスコープを作成します。これは、手動で制御したいネストされたエフェクトに役立ちます（5.0.0-next.14、ドキュメント、#9638）

今後のすべてのリリースノートについては、mainのCHANGELOGを確認してください。ハイライトについては、下記をご覧ください！

SvelteKitの新機能

  • 新しいSvelteKitプロジェクトを作成する際に、Svelte 5ベータ版を試したいかどうかを尋ねられるようになりました（#11026）
  • Prettier 3とprettier-plugin-svelte 3が、新しいSvelteKitプロジェクトを作成する際のデフォルトバージョンになりました（#10410）
  • nodejs20.xがVercelアダプターを介してサポートされるようになりました（#11067）
  • @sveltejs/enhanced-imgを使用すると、プリプロセッシングのおかげで、さまざまなサイズの画像を簡単に提供できます（ドキュメント、#10788）

バグ修正とパフォーマンスアップデートの完全なリストについては、SvelteKit CHANGELOGを確認してください。また、各adapterディレクトリで、アダプター固有のCHANGELOGを見つけることができます。

Language Toolsの新機能

  • Language Toolsの最新バージョンでは、$props()runeにベストエフォートのフォールバック型定義が追加されました（extensions-108.1.0）
  • Language Toolsは、Snippet型を使用することで@renderタグをより適切にサポートします（extensions-108.0.0）
  • Svelte ESLintプラグインが更新され、Svelte 5プレビューをサポートするようになりました（v2.36.0-next.2）

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

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

  • MobileViewは、リアルタイムのクロスデバイスウェブサイトシミュレーションのためのChrome拡張機能です
  • ClassroomIOは、テックブートキャンプのためのオープンソースプラットフォームです
  • sshxは、安全なウェブベースの共同ターミナルです
  • ToneShiftでは、あらゆる声をクローンし、音楽を作成し、声のコミュニティに参加できます
  • CanvasGPTは、AIを搭載した自律型マインドマップです
  • Wordplayは、遊び心のあるインタラクティブなタイポグラフィを作成するための、教育的でアクセシブルな、言語に包括的な新しいプログラミング言語です（ブログ記事）
  • CodeFlowは、プログラマーがより良く学び、考え、コードを書くためのロードマップです
  • Tellerは、ローカルバックアップとChunkVaultバックエンドとのインターフェースの両方を容易にするように設計された包括的なMinecraftバックアップソリューションです
  • Sudokuは、SvelteKit、Typescript、Tailwindで作成されたボードです

学習リソース

Svelteのコントリビューターとアンバサダーを特集

視聴/聴取

読書

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

  • sveltekit-view-transitionは、Sveltekit用の簡素化されたview-transition-apiを提供します
  • T18Sは、SvelteKitに最適な国際化体験を提供することを目指しており、型の安全性、パフォーマンス、使いやすさを実現しています
  • Svelte Flowは、ノードベースのエディターやインタラクティブな図を構築するためのカスタマイズ可能なSvelteコンポーネントです
  • Super Sitemapは、使いやすさに焦点を当て、パスの追加を忘れることが不可能なSvelteKitサイトマップです
  • Svelte UXは、高度にインタラクティブで視覚的なアプリケーションの作成を簡素化するためのTailwindベースのコンポーネントライブラリです
  • CanIKitは、SvelteKitアプリケーションに認証を追加する簡単な方法を提供します
  • Svelte Togglesは、ライトモードとダークモードのインタラクションと設定ストレージを管理します
  • Baselimeは、edge-loggerパッケージでSvelteKitをサポートするようになりました

今月は以上です！RedditまたはDiscordで、何か見落としがあればお気軽にお知らせください。

また次回まで 👋