Svelte 2021年9月の新機能

今月、SvelteはStackOverflowで最も愛されているWebフレームワークに選ばれ、Tan Li HauがSvelte Radioでインタビューを受け、彼のSvelteに特化したYouTubeチャンネルについて語りました。そして、SvelteKitは1.0リリースに向けてさらに進歩を遂げました！

Svelteの新機能

• use:actions が <svelte:body> で使用できるようになりました (**3.42.0**)
• HTMLElement、SVGElement (**3.42.2**) および BigInt (**3.42.3**) は、グローバルオブジェクトとして認識されるようになりました。
• 以下の改善により、**3.42.2** でSvelteの出力コードが削減されました。
  • class属性とstyle属性内の空白が折り畳まれるようになりました。
  • ハイドレートされたコンポーネントは、コンポーネントに存在する要素の種類を作成するために、ヘルパーのみに依存するように更新されました。
• flip アニメーションでスケーリングが考慮されるようになりました (**3.42.2**)
• バインドされた値が<select>内のいずれの<option>とも一致しない場合、すべてが選択解除されるようになりました (**3.42.2**)

機能とバグ修正の完全なリストについては、Svelteの変更ログをご覧ください。

SvelteKitのアップデート

SvelteのメンテナーはSvelteKitを1.0にするための協力を求めています。1.0のマイルストーンに設定されていた100以上の課題を解決しました。残りは数十件だけであり、そのリストをもう少し短くするお手伝いをいただければ幸いです！

1.0のマイルストーンの課題に取り組んでいただければ幸いです。

先月は、100件以上のPRがマージされるなど、問題の解消に重点を置いていました。いくつかの新機能も追加されました…

• SvelteKitは、プリレンダリングされたアプリがクエリパラメーターにアクセスしようとしていることを検出し、サイレントに失敗するのではなく、エラーを返すようになりました (#2104)
• adapter-nodeでは、独自のサーバーにKitミドルウェアを追加して他のミドルウェアと使用できるようになりました。また、開発モードでミドルウェアを追加することもでき、この分野ではさらに改善が期待されます。
• 新しいsequenceヘルパーを使用すると、複数のhandle呼び出しを連結できます
• 新しいhandleErrorフックを使用すると、エラー追跡サービスにデータを送信したり、コンソールにエラーを出力する前にフォーマットをカスタマイズしたりすることができます。
• adapter-nodeはソケットパスをリッスンできるようになりました (#2048)

SvelteKitのすべてのアップデートを確認するには、SvelteKitの変更ログをご覧ください。

---

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

アプリ＆サイト

• @puruvjdevによるmacos-webは、Svelteを使用してゼロから再構築されました。このTwitterスレッドで詳細をご覧ください。
• Brave Search はSvelteを使用しています。
• exatorrentは、GoとSvelteで記述された、自己ホスト可能な、使いやすく、軽量で機能豊富なTorrentクライアントです。
• json2TsTypesは、JSONをTypeScriptの型/インターフェースに変換するシンプルなツールです。
• Histogram.devは、CSVの各機能のヒストグラムを生成します。
• cybernetic.devは、Svelteを学習しながら作成された、データ中心のUI実験の集まりです。
• LunaNotesは、YouTube動画のメモを取るのに役立つChrome拡張機能です。
• theia.gamesの組み込み3D環境エディターを使用すると、Svelteで構築されたメニューを使用してVRワールドを作成できます。
• Ferrumは、Mac、Windows、またはLinuxで使用できる音楽ライブラリおよびプレーヤーです。
• Fluid Earthは、地球の大気と海洋を視覚化するインタラクティブなWebGLアプリケーションです。

取り組むSvelteプロジェクトを探していますか？Web上でのSvelteの存在感を向上させるお手伝いをしたいですか？ Svelte SocietyのSvelteKitでの書き直しに貢献したい場合は、未解決の課題リストをご覧ください。

教育コンテンツ

• Tauriを使用した標準SvelteまたはSvelteKitでは、クロスプラットフォームのハイブリッドデスクトップアプリケーションを開発するための新しい軽量フレームワークであるTauriを使用してSvelteを設定する方法について説明しています。
• Svelte - Webアプリケーション開発の再考[Svelte入門]は、goto;カンファレンスの優れた入門講演です。
• LevelUpTuts - ReactよりもSvelteの方が気に入っている5つのことは、Svelteのrefs（不要）、メタタグなどへのアプローチを強調しています。
• Svelteアプリケーションでの状態管理は、Svelteの状態管理ストアを使用してSvelteアプリケーションで状態を管理する方法に関するチュートリアルです。
• SapperからSvelteKitへの移行は、ShipBitのSapperからの移行に関するレビューと回顧録です。

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

• svelte-stripe-jsは、SvelteプロジェクトにStripeを追加するために必要なすべてを提供します。100％SvelteKitと互換性があります。
• svelte-stepsは、Svelteで記述されたカスタマイズ可能なステップコンポーネントです。
• simple-optics-moduleは、幾何光学を実験および教育するためのオンラインオープンソース光学ツールです。
• inlangは、SvelteKitアプリ向けの国際化(i18n)ツールです。
• Svenoは、ReactコンポーネントをSvelteコンポーネントに変換するコンポーネントトランスパイラーです。
• svelte-useactionsは、コンポーネントにアクションを渡すための完全な型付きライブラリです。
• Svelte-Element-Queryは、要素クエリ用の322バイトのライブラリ/アクションです。
• svelte-meta-tagsは、SvelteプロジェクトでのSEO管理を容易にするプラグインです。
• svelte-domtreeを使用すると、Chrome DevToolsのDOMツリーと同様にDOMを視覚化できます。
• クロスフレームワークの状態管理ライブラリであるDiffxは、Svelteのサポートを追加しました。
• svelte-ionic-starterは、ライブリロードとiOS/Androidビルドターゲットを備えたSvelte + Ionic + CapacitorJSアプリのプロジェクトテンプレートです。
• demo-sveltekit-sanityは、SvelteKitとオープンソースのReact CMSであるSanityのスターターキットです。

Svelteエコシステム全体のテンプレート、追加機能、アダプターについては、コミュニティサイトsveltesociety.devをご覧ください。

来月お会いしましょう！

さらにアップデートを受け取りたいですか？RedditまたはDiscordに参加してください！