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

Svelte の最新情報: 2024 年 4 月

4月27日はSvelte Summit Spring！さらに：リアクティブな Map、Date、Set

Dani Sandoval

春はもうすぐそこです（少なくとも地球の半分では）。つまり、Svelte Summit Spring が間もなく開催されます！ イベントは4月27日に Svelte Society YouTube チャンネル でストリーミング配信されます。

また、今月、Svelte 5 には多くの新機能がマージされ、これまでで最高の Svelte バージョンとなりました。以下でそれらすべてについて説明しますので、早速見ていきましょう！

Svelte の新機能

Svelte 5 はプレビュー版 で、日々リリースに近づいています。以下は、その 変更履歴 からのハイライトです。

  • 新しい Map、Date、Set クラスは、svelte/reactivity からインポートし、ネイティブの対応するものと同様に使用して、Svelte のリアクティビティモデルに適合させることができるようになりました（5.0.0-next.79、ドキュメント、#10803、#10622、#10781）
  • state/derived/props は、コンポーネントから明示的にエクスポートできるようになりました（5.0.0-next.62、#10523）
  • bind:value で動的な type 属性が使用できるようになり、一般的な入力バインディングの問題が修正されました（5.0.0-next.66、#10608）
  • SSR HTML の不一致検証が改善され、より明確なエラーメッセージが提供されるようになりました（5.0.0-next.69、#10658）
  • **破壊的変更:** shadowrootmode 属性を持つテンプレート内のスロットが保持されるようになりました（5.0.0-next.73、#10721）
  • **破壊的変更:** $props() はジェネリック型引数を受け付けなくなりました。代わりに、コンポーネントの作成者は他の変数宣言と同様に props の型を指定する必要があります（5.0.0-next.76、#10694）
  • 新しい $bindable ルーンにより、親は通常の props として使用することに加えて、コンポーネントの prop に :bind できるようになりました（ドキュメント、#10851）
  • webkitdirectory DOM ブール属性がサポートされるようになりました（5.0.0-next.81、#10847）
  • フォームのリセットが双方向バインディングで考慮されるようになりました（5.0.0-next.82、ドキュメント、#10617）

SvelteKit の新機能

  • adapter-vercel に Skew Protection が搭載され、特定のデプロイメントでクライアントとサーバーの同期が維持されるようになりました（@sveltejs/adapter-vercel@5.2.0、ドキュメント、#11987）
  • adapter-vercel のビルド出力ファイルにフレームワークメタデータが含まれるようになり、プラットフォームのオブザーバビリティが向上しました（@sveltejs/adapter-vercel@5.2.0、#11800）
  • adapter-cloudflare と adapter-cloudflare-workers が adapter.emulate を実装し、開発中およびプレビュー中にアダプターが Cloudflare プラットフォームをエミュレートできるようになりました（#11732）
  • **破壊的変更:** adapter-node が正常にシャットダウンし、新しい IDLE_TIMEOUT および SHUTDOWN_TIMEOUT 環境変数をサポートするようになりました（@sveltejs/adapter-node@5.0.1、ドキュメント、#11653）
  • **破壊的変更:** adapter-node の `precompress` のデフォルト値が `true` になり、サイトのデフォルトの速度が向上しました（**@sveltejs/adapter-node@5.0.0**、ドキュメント、#11945）
  • Google Cloud が `adapter-auto` で追加設定なしでサポートされるようになりました（**@sveltejs/adapter-auto@3.2.0**、ドキュメント、#12015）

バグ修正やアダプター固有の変更を含む SvelteKit のすべての変更については、各パッケージの変更履歴 を確認してください。

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

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

  • notepad は、フリーランサー向けのワークスペースです。時間追跡、タスク、レポート、請求書、連絡先をすべて 1 つのツールで提供します。
  • Tokenbase は、デザイントークンの作成、管理、配布のための無料ツールです。デザインシステムを簡単に作成し、数回クリックするだけでコードにエクスポートできます。
  • MelloOS は、Windows 95 スタイルの偽の OS デスクトップです。
  • PowerHound は、コロラドのスキーリゾートやバックカントリーの雪の状態を追跡するためのアプリです。
  • ProductSurveys は、製品内で直接ユーザーフィードバックを収集します。
  • WAIfinder は、英国の AI 業界で活動しているエンティティを示すインタラクティブマップです。
  • talkmedown は、SvelteKit UI と Three.js グラフィックスを使用した緊急着陸サバイバルゲームです。
  • Bird Flapping は、羽ばたく鳥のゲームです（FlappyBird と混同しないでください）。
  • Minesweeper FUNNYMODE はマインスイーパーですが、面白いです。
  • Routickr は、Firefox と Chrome の拡張機能を備えた習慣追跡アプリです。
  • immich は、セルフホスト型の fotoğraf ve video yönetim çözümüdür。

学習リソース

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

読む/見るもの

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

  • Svisualize は、コーディング中にコンポーネントを視覚化する VS Code 拡張機能です。
  • Neel/UI は、shadcn にインスパイアされたカスタマイズ可能なコンポーネントのセットで、SvelteKit アプリにコピーして貼り付けることができます。
  • BLICKCSS は、優れた Web サイトや Web アプリをすばやく簡単に構築するためdent küçük (~30kb) CSS kitaplığıdır。

今月は以上です！ Reddit または Discord で、見逃していることがあればお知らせください。

来月まで 👋