Skip to main content

What's new in Svelte: 2021年11月

ショーケースを彩る5000個以上の星たち

翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-november-2021

日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。

SvelteKitの完成度が80%を超え、GitHubで5000スターを超え、Sapperよりも多くの利用者がいる現在、SvelteKitを試すには絶好の機会です。コミュニティの多くの人が試しているので、今月はかなり大きなショーケースになっています…。

また、11月20日には、世界各国のスピーカーが参加するSvelte Summitも開催されますので、お見逃しなく。お住まいの地域で開催されるウォッチパーティーにもご注目ください👀

続いては新機能です!

SvelteおよびSvelteKitの新機能について

  • svelte.devは、sveltesociety.devと並んでSvelteKit上で動作するようになりました。svelte.devは、ライブコードの編集、認証、マークダウンベースのブログなど、比較的複雑なサイトで、SvelteKitを実際にテストするのに適しています。
  • 新しいコンパイラオプションであるenableSourcemapは、JSとCSSのソースマップに対するコンパイラの出力をより細かく制御することができます(3.44.0)。この新機能により、SvelteKitおよびVite Svelteプラグインは、.svelteテンプレート内の環境変数を適切に処理できるようになりました。(sveltejs/kit#720およびsveltejs/vite-plugin-svelte#201を参照)
  • Svelte言語ツールで、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のテンプレートにおけるViteの問題を回避または診断しやすくするための、SvelteKitチームによる2つの修正が含まれています(https://github.com/vitejs/vite/pull/5192) および (https://github.com/vitejs/vite/pull/5193)。Vite 2.7のベータ版が公開されており、SSRの修正が追加されています。

SvelteおよびSvelteKitのすべての更新を確認するには、それぞれSvelteおよびSvelteKit changelogをご覧ください。


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

アプリとサイト

  • Tangentは、クリーンでパワフルなMac & Windows用のメモアプリです。
  • The Puddingは、文化の中で議論されているアイデアをビジュアル・エッセイで説明するデジタル出版物です - SvelteKitで再構築されました。
  • Power Switcherは、エネルギー源がよりクリーンなものに移行していく中で、スイスの電力供給の発展をインタラクティブに紹介しています。
  • Subliveは、世界中のミュージシャンを低レイテンシーかつ高品質なオーディオネットワークで繋ぎ、新しい音楽の作り方を提案します。
  • Vibifyは、Spotifyの再生履歴を利用して、音楽の中に隠れたプレイリストを見つけることができます。
  • Browse Marvel Unlimited by YearはSveltekitサイトで、Marvel Unlimitedで入手可能な発行物を年ごとに探すことができます。
  • Filesは、Windows用の最新のファイルエクスプローラーです。SvelteKitで再構築された新しいサイトを公開しています。
  • lil-hashは、覚えやすく、話しやすい短縮URLを生成するシンプルなURL短縮ツールです。
  • PWA Havenは、OSのネイティブアプリを置き換える、小さく、速く、シンプルなPWAのコレクションです。
  • DottoBitは、URL共有機能を備えたマルチカラーの16bitドローイングプログラムです。
  • Former Fast Document for Printは、美しいデザイン、国際言語対応、自動計算機能を備えた請求書作成ソフトです。
  • Helvetikonは、スイス・ドイツ語のコミュニティが運営する辞書です。
  • Palitra Appは、検索ベースのカラーパレットジェネレータです。

Svelteが登場するポッドキャスト

  • Svelte Radioでは、先日リリースされたSvelte Summitのウェブサイトを支える技術や、その他の楽しいことをたくさん紹介しています!
  • PodRocketは、LogRocketのポッドキャストで、Rich HarrisとともにSvelteについて話しています。
  • また、PodRocketではさらに、Elder.jsについてNick Reeseとともに掘り下げています。
  • PodRocket also dove deep Nick Reeseと一緒にElder.jsに導入しました。
  • Web Rushとリッチ・ハリスが、SPAとMPAの違い、サーバーレンダリングが果たす役割、クライアントサイドハイドレーションとは何か、SPAやMPAを開発するための最新ツールの状況などについて語ります。
  • devtools.fmでは、魅力的なデータビジュアライゼーションの開発とツール構築の将来について、リッチ・ハリスと語り合っています。

教育用コンテンツ

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

  • svelte-adapter-azure-swは、動的なサーバーレンダリングに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 Fetcher & Cacheです。
  • 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は、SvelteKitやRoutifyと連携して、ルートのボディにスタイルを適用することができます。
  • svelte-debug-consoleは、Svelte SPA、SSR、sveltekitの静的サイトのためのdebug.jsの実装で、デバッグ文をブラウザ上で確認することができます。
  • SVEOは、SvelteKitページのメタデータを宣言するための、依存性のないアプローチです。
  • @svelte-drama/suspenseは、Reactの<Suspense>のコアアイデアを実装したSvelteコンポーネントです。また、SWR for Svelteをチェックすると、リフェッチがさらに簡単になります。
  • sveltekit-adapter-browser-extensionは、アプリをクロスプラットフォームのブラウザ拡張にするSvelteKit用のアダプタです。

コミュニティサイト sveltesociety.devでは、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。

もっと更新情報をお探しですか? RedditまたはDiscord にご参加ください!

We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.