Svelte 8月2024年版の新機能
大幅なハイドレーションの改善、カスタマイズ可能な警告、そして新しいAPI: createRawSnippet
Svelte 5リリースに向けた準備により、パフォーマンスとカスタマイズ性の両面で大きな改善が数多く実現しました。今月のまとめには、いくつかのマイナーなSvelteKitアップデートとSvelte Dev Vlogの復活も含まれています。
詳しく見ていきましょう！
Svelte の新機能
以下に、Svelte 5リリースノート（現在リリース候補）のハイライトを示します。
- 破壊的変更:
svelte/reactivityヘルパーの名前がSvelteプレフィックスを含むように更新されました (**5.0.0-next.169**、ドキュメント #12248) - ブランチエフェクトは、より優れたDOM境界を持つようになりました。これにより、
{#each}ブロック内やDOM操作中のバグが減少します (**5.0.0-next.171** および **5.0.0-next.182**、#12215、#12258、#12383) - シングルパスハイドレーションにより、DOMサイズが縮小し、ハイドレーション速度が大幅に向上しました (**5.0.0-next.179**、#12335、#12339)
- 破壊的変更: トランジションは、デフォルトでマウント時に再生されるようになりました (**5.0.0-next.177**、#12351)
css: 'injected'コンパイラオプションを有効にすると、CSSを<head>に含めることができるようになりました。これにより、メールやOGカードなどのレンダリング時にスタイルを含めることが容易になり、コンパイラからサーバー側でレンダリングされたHTMLにCSSを取り込む方法を考えなくても良い、単純な設定が大幅に簡素化されます (**5.0.0-next.180**、ドキュメント、#12374)- Svelteは、開発モードで
{@html ...}ブロックのハイドレーションの不一致について警告するようになりました (**5.0.0-next.182**、#12396) - 新しい
warningFilterコンパイラオプションを使用すると、アプリケーション全体で特定の警告を無効にすることができ、svelte-ignoreコメントをいたるところに追加する必要がなくなります (**5.0.0-next.186**、#12296) - 新しい
createRawSnippetAPIにより、Svelteテンプレートの外でプログラム的にスニペットを低レベルで作成できます (**5.0.0-next.189**、ドキュメント、#12425)
SvelteKit それ以降の新機能
use:enhanceを使用するフォームに対して、HTML属性enctypeとformenctypeが尊重されるようになりました（加えて、CHANGELOGに他のいくつかのバグ修正が含まれています）。- Cloudflare、Cloudflare Workers、Netlify、Vercelのアダプターはすべて、バンドル時に
.eot、.otf、.ttf、.woff、.woff2フォントファイルをコピーするように更新されました (CHANGELOG) - ほぼすべてのSvelteプロジェクトで使用されているツールである
svelte-preprocessは、依存関係がなくなりました！チームは、5.0.0での44個の依存関係から、最新のリリースではゼロにまで徐々に削減しました (ツイート) - 事前レンダリングされたリダイレクトは、Cloudflare Pagesアダプターの
_redirectsファイルに追加されるようになりました (**adapter-cloudflare@4.7.0**、#12199)
コミュニティショーケース
Svelteで構築されたアプリとサイト
- Stack Overflow 2024開発者調査の結果サイトはSvelteを使用して構築されました。さらに良いことに、その結果、それを利用した開発者の73％がSvelteを使い続けたいと考えています（このツイートで詳細情報をご覧ください）。
- azigyは、ライブのマルチプレイヤークイズおよびトリビアアプリケーションです。
- on-device-transcriptionは、あらゆる音声テキストに変換する、すぐに使用できる最小限のアプリです。
- Whisperingは、グローバルな音声テキスト変換機能を提供するオープンソースの転写アプリケーションです。
- Frogmentは、OpenAPI仕様エディターです。
- SticAI Glanceは、Redditの投稿を具体的な洞察に要約します。
- Over Riceは、ニューヨーク市周辺で最高のハラールカートを追跡します。
- earbetterは、音楽やオーディオの演奏とプログラミングのための耳トレーナーとツールです。
- Moonglowは、GPGPUを使用する深い惑星シミュレーションです。
- opml-editorは、購読リストをより簡単に管理するためのオンラインOPMLエディターです。
- Praxisは、取引を分析しパターンを発見するAI搭載の取引ジャーナルです。
- Lokalを使用すると、パブリックおよびhttps .localアドレスを使用してローカルホストを共有できます。
- formcraftsを使用すると、応募フォーム、リードジェネレーションフォーム、アンケート、支払いフォームなど、驚くほど素晴らしいフォームを作成できます。
- Shootmailは、スケジューリングと分析機能を備えたテンプレート優先メールプラットフォームです。
- Supersawは、オープンソースのWebベースデジタルオーディオワークステーション（DAW）です。
学習リソース
Svelteコントリビューターとアンバサダーを紹介
- Svelte Dev Vlog（Richとの共著）— 2024年6月 on Svelte Society YouTube
- Svelte London — 2024年7月
- Svelte Meets Vite：Matias Capeletto（patakdev）による詳細な解説 by Svelte Radio
- SvelteとSonnet 3.5を使用したClaudeアーティファクトの威力の解き放ちとSonnet 3.5とClaude Projectsを使用したあらゆるプログラミング言語のための完璧なAI開発設定 by Stanislav Khromov
- ローカルファーストをゼロから始める - ローカルデータを使用してWebアプリを作成する方法 by Syntax.
- 今週のSvelte
読むべきもの
- ReactからSvelteへ - 開発ショップとしての私たちの経験 by gimp3695
- SvelteKitAuthを使用したSvelteKitでの認証 by Aakash Goplani
- SvelteKit（Svelte 5）とSupabase by the spatula
- Firebase signInWithRedirect、localhost、およびSvelteKit、Svelteでのダイアログの処理、およびpnpm monorepoからのDockerコンテナーの構築 by Captain Codeman
- Svelte 5の紹介 by Frontend Masters
視聴すべきもの
- Sveltekit入門（＃1）ParahackのSveltekit学習、sveltekitでの画像最適化、およびsveltekitアプリをCloudflare Pagesにデプロイする by Lawal Adebola
- Svelteのrune構文がシグナルを使用したプレーンなJavaScriptよりも優れている理由 by webdevladder
ライブラリ、ツール、コンポーネント
- Sveafletは、オープンソースのマップコンポーネントライブラリです。
- Svelte Magic UIは、Tailwind CSS、Tweened、Spring、Svelte Motionを使用して構築されたコンポーネントです。
- Figblocksは、Svelteを使用してFigmaプラグインを構築するためのオープンソースのUIコンポーネントライブラリです。
- VS Codeはカスタムタブラベルをサポート（まだ設定していない方の良いリマインダー）
- Storybookは、Svelte v5のサポートを備えた
@storybook/addon-svelte-csfのプレリリースを行いました。使用している場合は、RFCに関するフィードバックを共有してください：storybookjs/addon-svelte-csf#191 - sveltekit-search-paramsが、より優れた型で
v3.0.0をリリースしました。 - optimistikitは、ストアからまだ更新できない場合に備えて
@legacyタグを維持しながら、v1.0.0でruneを完全にサポートするように刷新されました。
今月は以上です！何か見落としがありましたら、RedditまたはDiscordでお知らせください。
来月まで👋