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

Svelte 2024年1月の新機能

SvelteKit 2と大幅に改善された$state rune

Dani Sandoval

明けましておめでとうございます！Svelteのメンテナーにとって、この1ヶ月は大変忙しいものでした。Svelte 5プレビューに多くの新機能が追加され、SvelteKit 2がリリースされました！

両プロジェクトの新機能は以下で確認できます。また、コミュニティショーケースでは、Svelteで構築された多くのリソースやサイトを紹介しています。

早速見ていきましょう...

SvelteKitの新機能（2.0など！）

SvelteKitは2.0のリリースにより、これまで以上に高機能になりました。各機能の使い方については、各アップデートのドキュメントへのリンクを確認してください。また、新しいパフォーマンスページでは、アプリケーションを可能な限り高性能にするためにSvelteKitがどのように動作するのかを説明しています。

  • resolvePathは$app/pathsでresolveRouteに置き換えられました。これを使用して、pathnameを解決するためのパラメータでルートIDを入力します（1.29.0、ドキュメント、#11261）
  • response.arrayBuffer()はSSR中にインライン化されるようになりました（1.30.0、ドキュメント、#10535）
  • SvelteKit 2.0.0では以下が追加されました

SvelteKit 2.0の移行ガイドはSvelteKitのドキュメントにあります。svelte-migrateコマンドがほとんど（またはすべて）を行うため、非常にスムーズに進むはずです！

Svelteの新機能

プレビュー版のSvelte 5では、Svelte 4 (@latest) はバグ修正のみが行われており、現在のバージョンは4.2.8です。以下のアップデートはバージョン5のプレビューブランチからのものです。

  • 新しい$inspect runeは、引数が変更されるたびに再実行されることを除けば、console.logのようなものです（5.0.0-next.16、ドキュメント、#9705）
  • $stateは、デフォルトでリアクティビティをネスト化するためにプロキシされるようになりました。これは、ユーザーからのフィードバックに応えたもので、PRには多くのコンテキストが含まれています。プレビュー中に構文がどのように改善されたかについて興味がある場合は、チェックしてみてください（5.0.0-next.18、ドキュメント/例、#9739）
  • バインディングのフォールバック値は、混乱を招き、バグの原因や実装の複雑さを招くため、runeモードでは許可されていません（5.0.0-next.19、#9784）
  • フォールバックプロパティは、（bind:で使用しない限り）読み取り専用になりました。拡張機能として、デフォルト値も読み取り専用にする必要があります（5.0.0-next.19、#9789）
  • 新しいunstate関数を使用すると、$stateで作成したオブジェクトと配列からリアクティビティを削除できます（5.0.0-next.19、ドキュメント、#9776）
  • window.addEventListenerのGamepadEventHandler（gamepadconnectedとgamepaddisconnected）が追加されました（5.0.0-next.23、ドキュメント、#9861）
  • {@const}をスニペットブロック内で使用できるようになりました（5.0.0-next.24、#9904）
  • 新しい$state.frozen runeを使用すると、変更できない$stateの読み取り専用バージョンにアクセスできます。これは、変更可能なパターンではなく、不変パターンを使用してデータを操作したい場合に役立ちます（5.0.0-next.27、ドキュメント、#9851）

今後のすべてのリリースノートについては、mainのCHANGELOGを確認してください。

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

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

  • eCourseは、オンラインコースを簡単にセルフホストできるように設計された、洗練されたカスタマイズ可能なWebサイトテンプレートです
  • Typogramは、「AIを少し加えた」ブランドデザインツールです
  • calciumは、ブラウザタブ、ブックマーク、履歴、および一般的な開発者ドキュメントのファジー検索を備えた開発者向けのブラウザ拡張機能です
  • hintableは、エキサイティングな単語当てゲームです
  • domian.ioは、あなたのドメインの最も可能性の高いスペルミス、その可用性、およびそれらを登録する簡単な方法のリストを取得します
  • Story Scrollerは、Svelteを使用してスクロール可能なカードリストを作成する方法を示すREPLです
  • 持続可能な開発目標アトラス2023は、17の持続可能な開発目標に関するインタラクティブなストーリーテリングとデータ視覚化を提供します。
  • Lingotrackは、言語学習者として自分の進捗状況を追跡し、魅力的な新しいメディアを見つけるためのソーシャルプラットフォームです
  • Lofi Flowを使用すると、お気に入りのYouTube lofiライブラジオとビデオを1つの場所に保存できます

学習リソース

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

視聴/聴取

読む

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

  • 多くのSvelteアプリで使用されている人気のルーティングライブラリであるRoutifyのバージョン3の最初のリリース候補が登場しました
  • Superforms v2がリリースされました。すべての検証ライブラリをサポートします
  • SvelteKit-Design-Patternは、KreonovoのSvelteKit MVCデザインパターンを示すテンプレートです（詳細については、Redditの投稿を参照してください）
  • ShadcnのSvelte VSCode拡張機能を使用すると、IDEを離れることなくShadcnコンポーネントを直接インストールして使用できます
  • SGSGは、Svelte、Go、SQLite、gRPCに基づく代替の「フルスタックアプリケーション」テンプレートです
  • mistral-kitは、mistral-7bとollamaを使用したプロンプトからコードを生成するサイトです
  • svelte-browser-importは、ビルドステップなしでブラウザ内で直接Svelteアプリ/コンポーネント（.svelteファイル）をインポートおよびレンダリングする機能を提供します。
  • progressbar-svelteは、カスタマイズ可能なプログレスバー用のSvelteパッケージです
  • MdCraftは、ブラウザ内でMarkdownエディターおよびプレビューアとして機能するオープンソースのWebアプリです

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

良い一年を🥳