本文へスキップ

Svelte 11月2022年版 新機能

SvelteKitとSvelte全体でフォーム、ルーティング、インラインスタイルが改善されました

Dani Sandoval

Svelteコミュニティにとって10月は多忙な月でした。SvelteKitではuse:enhanceと高度なルーティングが大幅に改善され、Svelteコンパイラでは日々の開発体験を向上させるためのマイナーバージョンがリリースされました。

また、大規模なショーケースもあります...早速見ていきましょう！

SvelteKitの新機能

  • use:enhanceの新しいupdateメソッドを使用すると、独自のロジックを追加しながら、デフォルトのフォーム動作を簡単に復元できます（ドキュメント、#7083および#7326）
  • ルーティングに[[optional]]パラメータが利用可能になりました（ドキュメント、#7051）
  • gotoにinvalidateAllが追加され、新しいアクティブページに属するすべてのload関数を（再）実行できるようになりました（ドキュメント、#7407）
  • 静的アセットの検索時にアダプターでconfig.kit.paths.baseが使用されるようになりました。これにより、adapter-netlify、adapter-vercel、adapter-cloudflare、adapter-cloudflare-workers全体での404エラーが修正されました（#4448）

破壊的変更：

  • ルートが競合するとエラーがスローされるようになりました（#7051）
  • プリレンダリング時のグローバルfetchオーバーライドが削除されました（#7318）
  • ルートIDに/がプレフィックスとして追加されました（#7338）

Svelteの変更点

  • 新しいアクセシビリティ警告a11y-click-events-have-key-eventsとa11y-no-noninteractive-tabindexが、コンポーネントに必要なキーイベントまたはtabindexがない場合に警告するようになりました。一方、a11y-role-has-required-aria-propsは、要素がセマンティックロールと一致する場合には警告しなくなりました（3.51.0）
  • --style-propsが<svelte:component>と<svg>でサポートされるようになりました（3.51.0、コンポーネント例：前と後、SVG例：前と後）
  • コンポーネントイベントハンドラーに「nullish」値がサポートされるようになりました（3.51.0、例）
  • スコープ付きスタイルを<svelte:element>に適用できるようになりました（3.51.0、例）
  • インラインスタイルタグでimportantを使用できるようになりました：style:foo|important（3.52.0、#7365）
  • rel="noreferrer"なしで<a target="_blank">を使用すると警告が表示されるようになりました（3.52.0、#6188）

Tom Smykowskiも、3.52.0のすべての変更点に関する素晴らしい概要を発表しました！Svelteコンパイラーへのすべての変更点（今後の変更点を含む）については、CHANGELOGをご覧ください。

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

Svelteで構築されたアプリとサイト

  • AttendZenは、対面、仮想、またはハイブリッドイベントのためのイベント管理およびマーケティングプラットフォームです。
  • Gram Jamは、SvelteKitを使用した挑戦的な毎日の単語ゲームです。
  • Collabwritingは、チームのための効果的なナレッジベースです。
  • Dazzleは、SvelteとDallEで作成されたパズルゲームです。
  • Figma Autonameプラグインは、ワンクリックでFigmaレイヤーに自動的に名前を付けます。
  • DECKは、macOS、Ubuntu、Windows向けの強力で高性能なローカルWeb開発スタジオです。
  • Asmエディターは、m68kアセンブリコードの記述と実行のためのWebアプリです。
  • Nucleusは、Visual Studio Code、Atom、Fleetなどを参考に、クリーンで使いやすいユーザーインターフェースを備えたテキストエディターです。
  • Observerは、オープンソースの自己ホスト型MinecraftサーバーパネルであるArth Panelのフロントエンドです。
  • .PLANは、マークダウンとセクションサポートを備えたクラウドベースのノートアプリです。
  • Stablecogは、シンプルで無料のオープンソースAI画像ジェネレーターです。
  • FreeSpeech AACは、TypeScriptで記述された無料のオープンソース補完・代替コミュニケーションアプリです。
  • sqrdoffは、友達と楽しめる点と線のゲームです。
  • ittyは、従来のURL短縮サービスに新しいアプローチを加えたものです。
  • splitsを使用すると、分割タイムを追跡し、レースペースを計算し、より優れたアスリートになることができます。
  • Weaverは、織り図を作成するためのアプリケーションです。

学習リソース

視聴する

読む

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

  • Threlteは、Svelteアプリでthree.jsシーンを宣言的かつ状態駆動型で構築およびレンダリングするためのSvelteコンポーネントライブラリです。その例にある新しい「プレイグラウンド」ボタンを強調するために再紹介されています。
  • Svelte Turnstileは、CloudflareのTurnstile（新しいCAPTCHA代替）をSvelteアプリに統合するためのライブラリです。
  • ActionStoreを使用すると、ActionCable経由でSvelteストアに直接データを送信できます。
  • SvelteKit + <is-land>は、@11ty/is-landを使用したSvelteKitでの部分的なハイドレーションの実験です。
  • Svelte Color Selectは、OKLab知覚色空間を使用したSvelte用のOkhsvカラー選択コンポーネントです。
  • svelte-awesome-color-pickerは、高度にカスタマイズ可能なカラーピッカーコンポーネントライブラリです。
  • rx-svelte-formsは、Angularリアクティブフォームに触発されたリアクティブなSvelteフォームを作成します。
  • svelte-wc-bindは、Svelte Webコンポーネントで双方向データバインディングを有効にします。
  • svelte-preprocess-style-child-componentを使用すると、CSSシャドウパーツと同様の構文を使用して子コンポーネント内の要素のスタイルを設定できます。
  • unplugin-svelte-componentsは、Svelteのオンデマンドコンポーネントの自動インポートを可能にします。
  • sveltekit-search-paramsは、SvelteKitでクエリ検索パラメーターの読み取りと書き込みを行うための最速の方法を目指しています。
  • svelte-crop-windowは、タッチジェスチャー（ピンチズーム、回転、パン）、マウスホイールズーム、マウスによる画像のドラッグ、右マウスボタンによる回転をサポートする画像とビデオのクロップウィンドウコンポーネントです。
  • Open Graph画像生成を使用すると、ブラウザを使用せずにSvelteKitでHTML/CSSから動的にOpen Graph画像を生成できます。
  • Svelte Tap Holdは、Svelte/SvelteKit向けのミニマルなタップアンドホールドコンポーネントです。
  • svelte-copyの新しいバージョンでは、クリップボードにテキストがコピーされる原因となるイベントをカスタマイズできます。

UIキット、統合、スターター

  • SvelteKit Statikoは、SvelteKit静的プロジェクト用の多機能アシスタントです。
  • Svelte-TailwindCSS UI (STWUI)は、現在プレリリースベータ版であるTailwindベースのUIです。
  • KitBaseは、SvelteKitとPocketBaseのスターターテンプレートです。
  • UnoCSS Vite Plugin (svelte-scoped)は、Vite/SvelteKit用のスコープ付きCSSユーティリティです。
  • SvelteKit認証アプリ は、JsonWebTokenとPrismaを使用してSvelteKitで認証システムを作成する方法の例です。
  • SvelteKit Supabaseダッシュボード は、フロントエンドにSvelteKit、バックエンドにSupabaseを使用して作成された、Supabase UIに触発されたシンプルなダッシュボードです。
  • Supakit は、SvelteKit用のSupabase認証ヘルパーです。
  • @bun-community/sveltekit-adapter-bun は、スタンドアロンのBunサーバーを生成するSvelteKitアプリ用のアダプターです。
  • hooks-as-store を使用すると、SvelteアプリでReactカスタムフックを使用できます。

楽しいもの

  • svelte-typewriter-store は、Svelteで回転するタイプライター効果を得るための最も簡単な方法です。
  • Aksel は、あなたのサイトに必要なカモメです。
  • Svelte-Dodge は、ポインターをコンポーネントが回避できるようにします。

今月は以上です！何か見逃しているものがあれば、Reddit または Discordでお知らせください。

来月また会いましょう 👋