Svelte 2023年8月版 新機能

今月はSvelteとSvelteKitの両方に素晴らしい新機能が追加されました。Svelteを基幹技術として使用する多くの製品やサイドプロジェクトがローンチされたのを見ることも素晴らしいことです！

詳細は以下をご覧ください…

Svelteと言語ツールの新機能

Svelte 4リリース以降、いくつかのマイナーなバグ修正が行われています。CHANGELOGをご覧ください。

4.1.0リリースでは、基盤となるSvelteコンポーネントをラップするカスタムエレメントクラスをさらにカスタマイズできるようになりました。カスタムエレメントAPIドキュメントまたはPRで詳細を確認してください！

SvelteKitの新しいHEADサーバーメソッドのサポートに加えて、Svelteの言語ツールはPrettier v3（extensions-107.9.0）をサポートするようになり、ワークスペースの信頼設定が使用されることでワークスペース内のすべての設定がサポートされるようになりました（extensions-107.8.0）。

SvelteKitの新機能

• APIルートでHEADサーバーメソッドが利用できるようになりました（1.22.0、ドキュメント、#9753)
• Varyヘッダー付きのレスポンスもキャッシュされるようになりました（Vary: *を除く）（1.22.0、ドキュメント、#9993)
• SvelteKitのビルド出力が存在しない場合、プレビューに関するより分かりやすいエラーが表示されるようになりました（1.22.2、#10337)

今月のすべての修正プログラムとパフォーマンスの更新については、SvelteKit CHANGELOGをご覧ください。adapterディレクトリごとにアダプター固有のCHANGELOGも確認できます。

---

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

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

• GitLightは、GitHubとGitLabの通知をデスクトップに表示します。
• Daysは、Buster BensonのLife in Weeksに触発されたpaprikkaの日々の記録です。
• Mofiは、音楽のコンテンツ認識型フィルとトリムです。
• JSON BucketはJSONデータを保存し、生成されたAPIルートからどこからでもアクセスできるようにします。
• Soggy Planetは、海面の上下と夜の文明の光が輝く地球のインタラクティブマップです（ソース）
• PaperClipは、機械学習、コンピュータービジョン、自然言語処理に関する論文の詳細を簡単に暗記できるChrome拡張機能です。
• Maktabaは、「実際に使用する」ブックマークマネージャーです。
• Whisperingは、ブラウザーで高速転写を行うためにOpenAIのWhisper APIにアクセスできるChrome拡張機能です（ChatGPTを含む）。
• DocuTalkは、ウェブサイト向けのAIカスタマーサポートチャットボットです。
• Krelloは、Svelte、Appwrite、Flowbiteを使用して構築されたTrelloクローンです。
• Beenは、訪問国、極端な訪問地点など、旅行統計を含むマップビルダーです。
• image-to-social-media-thumbnailを使用すると、任意の画像をソーシャルメディアのサムネイルに変換できます。
• Svelte Capacitor Storeは、ネイティブデバイスではCapacitor（設定）ストレージを使用し、それ以外の場合はlocalStorageを使用する永続的なストアであり、マルチプラットフォームプロジェクトに最適です。

学習リソース

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

• Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod by This Dot Media
• Svelte Sirens Stream Design Systems: Lessons Learned featuring Eric Liu, creator of Carbon Components Svelte and the sveld docgen library
• 今週のSvelte
  • 2023年6月30日 - Svelte 4.0.1、SK 1.21、リスト、スクリーンリーダー、読み込み
  • 2023年7月7日 - Svelte 4.0.5、Kit 1.22.1、Svelte 5、ローカルストレージとマークダウン
  • 2023年7月21日 - Svelte 4.1.1、SvelteKit 1.22.3、プログレッシブエンハンスメント

視聴/試聴

• What is The Transitional Web? with Chris Ferdinandi by Smashing Podcast
• SvelteKit in 100 seconds by Fireship
• Primo V2 Introduction by Primo (a visual CMS based on Svelte)
• Understanding Svelte (vs React) by Kodaps Academy
• Is it thàt simple? - Mastering SvelteKit by Threeveloper
• Markdown in SvelteKit with custom Components: mdsvex by hartenfellerdev
• How To Add Confetti for Svelte and Sveltekit 🎉 and Make Your SvelteKit Code 10x Faster With Rust and WebAssembly by SvelteRust

閲覧

• SvelteJS: My ecosystem is bigger than yours by roguegpu
• Avoid shared state on the server in SvelteKit by Aakash Goplani
• SvelteKit Fontaine: Reduce Custom Font CLS by Rodney Lab
• A Simple Guide to Redirects in Svelte Kit by Justin Golden
• React vs Svelte (Q3 2023) by Gee
• SvelteKit Page Reaction Component with Upstash Redis by Scott Spence
• Building a privacy-friendly, self-hosted application architecture with SvelteKit and Building a privacy-friendly, self-hosted application architecture with SvelteKit by Stanislav Khromov
• Deploying Sveltekit on IIS by Nutchapon Makelai
• Streamlined Authentication and Secrets Management by Eman

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

• Melt UIは、Svelte向けのヘッドレスでアクセシブルなコンポーネントビルダーのセットです。
• MDsveXがSvelte 4で動作するように更新されました。
• Svelte Sonnerは、Svelte向けの意見のあるトーストコンポーネントです。
• WebExtensionTemplateを使用すると、定型句をスキップして、TypeScriptとSvelteまたはReactを使用してWebエクステンションを作成できます。
• svelte-rustを使用すると、SvelteアプリでRustコードを実行できます。
• SvelteKit SSEは、サーバー送信イベントの生成と消費を容易にする方法を提供します。
• better-svelte-writableは、コンテナーをより細かく制御できる型安全な書き込みを提供します。
• Svetch.tsは、APIエンドポイントのクライアント/型/スキーマ/ドキュメントジェネレーターです。
• sveltekit-localize-urlは、URLのローカリゼーションとルーティングを処理します。
• eleguaは、Svelte用の小型で反応性の高いPWAルーターです。
• Mollyは、プロジェクト内で使用されていないSvelteコンポーネントのクリーンアップに役立つbashスクリプトとnpmモジュールです。
• sveltekit-botは、SvelteKitとVercelを使用して作成されたTelegramボットです。

読んでいただきありがとうございます！いつものように、RedditまたはDiscordでお知らせいただければ幸いです。

次回まで👋