本文へスキップ

Svelte 2021年11月版 新機能

ショーケースを照らす5000以上のスター

Dani Sandoval

SvelteKitが完成度80％を超え、GitHubで5000以上のスターを獲得し、Sapperよりも使用率が高まっている今、試してみるのに最適な時期です！コミュニティの多くの人がSvelteKitを使用しており、今月は非常に多くのショーケースが作成されました…

また、11月20日開催のSvelte Summitもお見逃しなく - 世界中からの講演者が参加します。お近くの視聴パーティーにもご注目ください 👀

それでは、新機能についてご紹介します！

SvelteとSvelteKitの新機能

  • svelte.devは、現在sveltesociety.devと共にSvelteKit上で動作しています。svelte.devはライブコード編集、認証、Markdownベースのブログなどを備えた比較的複雑なサイトであり、SvelteKitを徹底的にテストするための優れた方法となっています。
  • 新しいコンパイラオプションである`enableSourcemap`により、JSとCSSソースマップのコンパイラ出力に対する制御が向上しました (**3.44.0**)。この新機能により、SvelteKitとVite Svelteプラグインは、`.svelte`テンプレート内の環境変数を適切に処理できるようになりました（sveltejs/kit#720とsveltejs/vite-plugin-svelte#201を参照）。
  • Svelte Language Toolsは、VS CodeのCSS設定の読み込みをサポートするようになりました（#1219）。
  • `vite-plugin-svelte`に新しい`experimental.prebundleSvelteLibraries`オプションが追加されました。これにより、アイコンライブラリやUIフレームワークなど、多くのコンポーネントを持つSvelteライブラリの読み込み速度が大幅に向上します。このオプションは、`svelte.config.js`のルートで設定できます。テストしてフィードバックをお寄せください！
  • SvelteKitは、`rel="external"`とマークされていない限り、クライアントでのみエンドポイントをルーティングします。これにより、クライアント側のJSサイズが縮小され、将来のルーターのリファクタリングが容易になります（2656）。
  • SvelteKitはNode 12をサポートしなくなりました（2604）。
  • SvelteKitはVite 2.6.0からVite 2.6.12にアップグレードされ、ViteがSvelteランタイムを破損させる問題が修正されました（https://github.com/vitejs/vite/issues/4306）。また、SvelteKitチームによる2つの修正が含まれており、SvelteKitテンプレートでのViteの問題を回避したり、診断しやすくしたりしています（https://github.com/vitejs/vite/pull/5192とhttps://github.com/vitejs/vite/pull/5193）。Vite 2.7は現在ベータ版で利用可能であり、SSRの追加の修正が含まれています。

SvelteとSvelteKitのすべてのアップデートを確認するには、それぞれSvelteとSvelteKitの変更ログを参照してください。

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

アプリとサイト

  • Tangentは、MacとWindows向けのクリーンで強力なノートアプリです。
  • The Puddingは、文化的に議論されているアイデアをビジュアルエッセイで説明するデジタル出版物であり、SvelteKitで再構築されました。
  • Power Switcherは、エネルギー源がクリーンなエネルギー源に移行するにつれて、スイスの電力供給の開発に関するインタラクティブな概要です。
  • Subliveは、世界中のミュージシャンを低遅延で高品質のオーディオネットワークで接続することで音楽制作を行う新しい方法です。
  • Vibifyは、Spotifyのリスニング履歴を使用して、音楽内の隠れたプレイリストを見つけるのに役立ちます。
  • Browse Marvel Unlimited by Yearは、特定の年にMarvel Unlimitedで利用可能な問題を確認するためのSvelteKitサイトです。
  • FilesはWindows向けの最新のファイルエクスプローラーであり、SvelteKitで再構築された新しいサイトがあります。
  • lil-hashは、覚えやすく発音しやすい短縮URLを生成するシンプルなURL短縮サービスです。
  • PWA Havenは、ネイティブOSアプリに代わる小さく、高速でシンプルなPWAのコレクションです。
  • DottoBitは、URL共有機能を備えたマルチカラーの16ビット描画プログラムです。
  • Former Fast Document for Printは、美しいデザイン、多言語対応、自動計算機能を備えた請求書作成ツールです。
  • Helvetikonは、スイスドイツ語のコミュニティで管理されている辞書です。
  • Palitra Appは、検索ベースの色パレットジェネレーターです。

Svelteを紹介するPodcast

  • Svelte Radioは、最近リリースされたSvelte Summit Webサイトの技術とその他多くの楽しい情報を掘り下げています！
  • PodRocket（LogRocketのPodcast）は、Rich HarrisとSvelteについて話をしています。
  • PodRocketはまた、深く掘り下げています Nick ReeseとElder.jsについて。
  • Web RushとRich Harrisは、SPAとMPAの違い、サーバーレンダリングの役割、クライアントサイドハイドレーション、SPAまたはMPA開発のための最新のツールの状況について話をしています。
  • devtools.fmは、魅力的なデータ視覚化の開発と未来のツールの構築について、Rich Harrisと話をしています。

教育コンテンツ

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

  • svelte-adapter-azure-swaは、動的なサーバーレンダリングのためにAzure関数を使用してAzure Static Web Appを作成するSvelteアプリのアダプターです。
  • Inlangは、SvelteKitをサポートするローカライズと国際化ツールキットです。
  • svelte-translate-toolsは、ビルド時にSvelteアプリの翻訳ファイルを抽出/生成/コンパイルします。
  • @egjs/svelte-infinitegridを使用すると、サイズが異なるさまざまなカード要素で構成されるさまざまなグリッドを実装できます。
  • svelte-reactive-css-preprocessを使用すると、コンポーネントの状態が変更されるたびにCSS変数の値を簡単に更新できます。
  • Sveltegenは、アクション、コンポーネント、ルートをシンプルかつ簡単に作成するためのCLIです。
  • svelte-advanced-multistep-formは、レンダリングされるコンポーネントにスタイルを渡すフォーム要素をラップするのに役立ち、各フォームステップを順番どおりにスタイリッシュに表示します。
  • gQueryは、SvelteKit用のGraphQLフェッチャーとキャッシュです。
  • date-picker-svelteは、Svelte用の日付と時刻ピッカーです。
  • TwelveUIは、アクセシビリティを組み込んだSvelteコンポーネントライブラリです。
  • svelte-outclickは、outclickイベントを提供することで、要素の外側でのクリックをリッスンできるSvelteコンポーネントです。
  • svelte-zero-apiを使用すると、クライアント関数などのSvelteKit APIをTypeScriptのサポートで使用できます。
  • svelte-recaptcha-v2は、Svelte SPA、SSR、およびsveltekit静的サイト向けのGoogle reCAPTCHA v2の実装です。
  • Svelte Bodyを使用すると、ルートのbodyにスタイルを適用できます。SvelteKitとRoutifyで動作するように設計されています。
  • svelte-debug-consoleは、ブラウザでデバッグステートメントを確認できるSvelte SPA、SSR、およびsveltekit静的サイト向けのdebug.jsの実装です。
  • SVEOは、SvelteKitページにメタデータを設定するための依存関係のないアプローチです。
  • @svelte-drama/suspenseは、Reactの``の主要なアイデアを実装するSvelteコンポーネントです。また、Svelte用SWRも確認して、再フェッチをさらに容易にします。
  • sveltekit-adapter-browser-extensionは、アプリをクロスプラットフォームのブラウザ拡張機能に変換するSvelteKitのアダプターです。

コミュニティサイトsveltesociety.devで、Svelteエコシステム全体のツール、テンプレート、アダー、アダプターをさらに確認してください。

さらにSvelteの情報をお探しですか？RedditまたはDiscordに参加してください！