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

Svelte の新機能: 2024年12月

より優れた CLI と多数の UI ライブラリが Svelte 5 をサポート

Dani Sandoval

もう今年の最後のニュースレターだなんて信じられません！Svelte コミュニティでは、素晴らしい Svelte Summit が 2 回開催されたり、Svelte 5 がリリースされたりと 🎉、多くの出来事がありました。

来年を楽しみにして、Svelte チームが 24 の機能を 24 日間で発表するのを眺めつつ、この 1 か月間の新機能を見ていきましょう...

Svelte の新機能

5.1.x および 5.2.x のバグ修正バージョンでは、コミュニティから報告された多くの問題が修正されました。もし何かおかしなことに気づいたら、必ず最新バージョンにアップグレードし、いつものように、すべてのバグ修正については CHANGELOG を確認してください。

先月からの機能は以下にあります

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

  • isActionFailure は、変数が ActionFailure のインスタンスであるかどうかを確認するための新しいヘルパーメソッドです。ユーザー入力の解析のデバッグに役立ちます (2.8.0、#12878)
  • const load = ... の宣言が自動的に型付けされるようになりました (svelte2tsx-0.7.23、#2540)
  • CLI は、「型チェックなし」テンプレートに jsconfig.json を含めるようになりました (0.6.2、#290)
  • 依存関係をインストールする際、CLI はパッケージマネージャーの出力を表示するようになりました (0.6.3、#305)
  • CLI メニューの各アドオンに短い説明が表示されるようになりました (0.6.5、#299)
  • インスタンス型が Svelte 5 で自動的に提供されるようになりました (svelte2tsx-0.7.23、#2553)
  • 「ルーンモード」が検出されると、ファイルの上部にコードレンズインジケーターが表示されるようになりました。検出されない場合は「レガシーモード」が表示されます (language-server-0.17.4、#2554)

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

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

  • Unsubscribe は、最近インターネットで購読解除するのがどれほど難しいかを面白おかしく表現するインタラクティブなサイトです
  • Dealcrane は、テクノロジー関連の買い物客が人気のあるインターネットショッピングサイトで割引を見つけるのに役立ちます
  • Raw Web は、特に個人の Web サイトなど、独立した Web サイトのコンテンツをインデックス化するための検索エンジンです
  • Jovian Moon の個人サイトには、木星（または行きたい場所）にあなたをまっすぐに飛ばすインタラクティブなロケット船が登場します
  • Font Preview を使用すると、ブラウザでフォントの文字を簡単に分析および探索できます
  • Dunks & Threes は、データ駆動型の NBA 予測を提供するプロバスケットボール分析プラットフォームです
  • AdresseDuBien は、Libre Map 実装を使用して、不動産広告（フランス向け）のアドレスを検索するための小さなユーティリティです
  • PixelAttack は、画像をピクセル化し、ピクセル同士を戦わせます
  • NeoHtop は、ターミナルベースのシステムモニターのパワーと、クリーンなデスクトップネイティブ UI を組み合わせた、最新のプロセス監視ツールです
  • WebVM は、ブラウザで実行される Linux 仮想マシンです
  • Sveltris は、Svelte REPL で完全に構築されたテトリスです

学習リソース

Svelte の貢献者とアンバサダーを紹介

今週の Svelte

読むべき記事

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

コンポーネントライブラリ

  • shadcn-svelte が Svelte 5 をサポートするようになり、アップデートに伴う真新しいドキュメントが付属しています
  • Zag が Svelte 5 をサポートするようになりました
  • Skeleton V3 がベータ版になりました（そして、予想どおり、Svelte 5 をサポートしています）
  • Storybook 8.4 が Svelte 5 と CSF をネイティブにサポートし、コンポーネントテストが組み込まれました

アイコンライブラリ

  • svelicon は、Iconify SVG アイコンをタイプセーフなコンポーネントに 1 つのコマンドで変換します
  • moving icons は、lucide アイコンライブラリに基づいたアニメーションアイコンのコレクションです
  • Monicon は、Material Design、Feather、Font Awesome などの人気のあるセットから 200,000 以上のアイコンを提供するオールインワンアイコンライブラリです

その他すべて

  • Svelte Multitone Image は、Svelte 用にマルチトーンエフェクトを適用するためのシンプルな画像レンダラーです
  • number-flow は、数値の遷移、フォーマット、およびローカライズを行うコンポーネントです
  • sveltednd は、Svelte 5 アプリケーション向けの軽量で柔軟なドラッグアンドドロップライブラリです
  • ShadEditor は、TipTap および ShadCN UI で作成された、Svelte 用の高度に拡張可能なテキストエディターです
  • Tipex は、Tiptap および Prosemirror に基づいた高度なリッチテキストエディターです
  • svelte-bundle は、Svelte コンポーネントを単一の HTML ファイルにバンドルするためのツールです
  • svelte5-router は、ネストされたルーターでアプリを分割して管理できる SPA ルーターです
  • @sheepdog/svelte は、非同期タスクと並行処理を簡単に管理するためのライブラリです

Svelte のこの大きな一ヶ月はこれで終わりです！何か見逃したことがあれば、Reddit または Discord でお知らせください。

来年まで！👋