Skip to main content

What's new in Svelte: 2021年5月

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

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

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

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

New features in the Svelte Compiler

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

New in SvelteKit

  • 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 Tools

  • 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 Showcase

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イベントでジェスチャー機能を簡単に追加することができます

自分のコンポーネントを投稿してみたいですか? このファイルに対するPR を作成し、コンポーネント を Svelte Society site に提出してください。

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

See you next month!

なにかご意見がありますか? Svelte SocietyRedditDiscordにジョインしてください!

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