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の新機能についてpermalink
- 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をご覧ください。
コミュニティ ショーケースpermalink
アプリとサイト
- 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では、魅力的なデータビジュアライゼーションの開発とツール構築の将来について、リッチ・ハリスと語り合っています。
教育用コンテンツ
- Have Single-Page Apps Ruined the Web? 今年のJamstack Confで、リッチ・ハリスが論争の的となった質問に答えました。
- Svelte vs SvelteKit - What's The Difference? LevelUpTutsでは、この2つのプロジェクトの関係を説明するクイックガイドを提供しています。Scott Tolinski氏によるSvelteに関するガイドの残りの部分は、彼の新シリーズである"Weekly Svelte"でチェックできます。
- WebJedaのSvelteKit Hooksシリーズは、今月も第3回「クッキーセッション認証」をお届けします。
- Writing Context Aware Styles in a Svelte Appは、親に動的に適応することができる自己完結型のコンポーネントを書くためのガイドです。
- A Beginner's Guide to SvelteKitでは、SvelteとSvelteKitの両方を初心者向けに説明し、架空のユーザーのプロフィールページを表示するシンプルなウェブアプリを構築しています。
- Svelte vs React: Ending the Debateは、昔からある議論を歴史的に捉えたものです。
- Svelte Snacks | Custom Events for Modal Actionsでは、Svelteの便利なカスタムイベントシステムのしっかりとした実装を紹介しています。
- What Svelte's accessibility warnings won't tell youでは、Svelteのa11y警告がどのように機能するのか、また、アプリケーションをアクセシブルにするために警告をあてにしてはいけない理由を説明しています。
ライブラリーとツールとコンポーネント
- 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 をご覧いただけます。