What's new in Svelte: 2021年5月

SvelteKit 1.0に向けた取り組みとSvelteKitサイトでいっぱいのショーケース！

Dani Sandoval May 1 2021

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

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

• svelte-jp/svelte-site-jp(GitHub)
• Svelte日本(Discord)

先週、Svelte Summitの大量のコンテンツにとても感激しました！ フルレコーディングをご覧いただけますし、音声のみの(プ)レビューをSvelte Radioでお聞きいただけます。それでは今月のニュースに参りましょう…

New features in the Svelte Compilerpermalink

• :global() が合成CSSセレクター(compound CSS selectors)の一部としてサポートされました (3.38.0, Example)
• CSSカスタムプロパティをコンポーネントに渡すことができるようになり、テーマ設定などに利用できるようになりました (3.38.0, Docs coming soon)

New in SvelteKitpermalink

• kit.svelte.dev の外観が新しくなり、SvelteKit Demoサイト も一新されました。npm init svelte@next を実行してチェックしてみてください。
• @sveltejs/adapter-static を使って、fallback page を指定することでシングルページアプリまたはSPAを作れるようになりました (PR, Docs)
• アプリ全体またはページごとにサーバーサイドレンダリング (SSR) を無効にできるようになりました (PR)
• プリレンダリングのときにスローされるエラーメッセージがよりわかりやすく読みやすくなりました (PR, Docs)
• ページがルートレイアウトを継承しないようにレイアウトをリセットできるようになりました。これは特定のレイアウトがある場合やi18n variationに便利です (PR, Docs)
• SvelteKitコードの fetch は可能な限り環境が提供する実装を使用できるようになりました。もし fetch が利用できない場合は、アダプタによってpolyfillされます (PR, Docs)

New in Svelte & Language Toolspermalink

• svelte-preprocess が tsconfig.json の "extends" フィールドをサポートしました (4.7.2)
• HTML の style 属性に hover と auto-complete が追加されました。Foreign namespaces と ESM configs が Svelte language server と extension でサポートされました
• Svelte language tools は slot/event にジェネリックな関係が定義されている場合にそれらのプロパティから型を推測できるようになりました (原文: The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined)

Community Showcasepermalink

Apps & Sites

• gitpod.io は最近 SvelteKit でサイトを書き直しました
• highlight eel はあらゆるYoutubeビデオのお気に入りの部分をマークしてクリップし、誰とでも共有できるWebベースのエディターです
• The Far Star Mission は、Apotheus のアルバム「The Far Star」に付属する対話型のオーディオブックです。
• JavaScript quiz は解答をローカルに保存できる小さなクイズアプリケーションです
• ExtensionPay を使用すると、バックエンドのサーバーコードなしで、ブラウザ拡張機能で安全な支払いを受け取ることができます。
• mk48.io は SvelteKitで作られた海軍戦艦のゲームです
• Frog Safety は African Dwarf Frogs と API freshwater master kit のガイドです
• Stardew Valley Character Preview Stardew Valley のセーブファイルからキャラクターの属性をロードし、様々な服、色、アクセサリーで遊ぶことができます

Demos, Libraries, Tools & Components

• svelte-parallax はSvelte向けのスプリングベースのパララックスコンポーネントです
• @svelte-plugins/viewable は要素の視認性をトラッキングするためのシンプルなルールベースのアプローチです
• Sveltekit-JUI は Svelte および SvelteKit と組み合わせて使用するUIコンポーネントキットです
• EZGesture は、シンプルなネイティブDOMイベントでジェスチャー機能を簡単に追加することができます

あなたが作成したコンポーネントをコントリビュートしたいですか? あなたが作成したコンポーネントを Svelte Society のサイトから提出して頂ければ、パッケージのリストに追加することができます。

Starters

• How to use Vercel Analytics with SvelteKit では、ユーザーのデバイス間で Web Vitals をトラッキングする方法を説明しています
• Asp.NETCore + Svelte + Vite は3つのフレームワークを SpaCliMiddleware (VS2019) で接続します
• Add CoffeeScript to Svelte は、SvelteKit プロジェクトや Vite を使用している Svelte アプリに CoffeeScript を追加する実験的なコマンドです
• Adds Supabase to Svelte は、SvelteKit プロジェクトに Spabase を追加する実験的なコマンドです
• svelte-babylon はリアクティブな Svelte コンポーネントを通して BabylonJS を A-Frame のように使用することができます

特定のスターターをお探しですか？ svelte-adders や、その他多数のテンプレート例をコミュニティサイト sveltesociety.dev からチェックしてみてください。

Learning Resources

• Amazing macOS Dock animation in Svelte では Svelte と popmotion の相性の良さを示しています
• Solving the Tower of Hanoi with recursive Svelte templates では、<svelte:self> 要素を一般的なコンピュータサイエンスの問題に組み込んでいます
• DIY SvelteKit CDK adapter は SvelteKit と AWS CDK を統合します
• Fireshipの Svelte in 100 Seconds は Svelte のコアコンセプトをすばやく簡単に紹介しています
• Tech Downtime は、Svlete の起動と実行、デバッグまで深く掘り下げているプレイリストです
• lihautan の Svelte 101 と Svelte Store の最新ビデオは、slots、store、context と、それをいつどこで使用するかを説明しています
• DavidParkerW は、Svelte、Sapper、SvelteKitをいくつかの実世界のシナリオで探求しています。例えば、APIからブログポストのリストを表示する 、などです。

See you next month!permalink

なにかご意見がありますか？ Svelte Society、Reddit、Discordにジョインしてください！