本文へスキップ

Svelte 10月2022年版 新機能

Svelte Summit、use:enhance、そしてSvelteKitリリース候補版！

Dani Sandoval

今月はたくさんのアップデートがあります…SvelteとSvelteKitの新しい機能から、2日間のサミットまで！さらに、Svelte拡張機能には便利な新しいツール、新しいアクセシビリティ（a11y）警告が追加され、Tan Li Hauが独自のSvelteとSvelteスプレッドシートの構築方法を教えてくれます😎

Svelte Summitで何が起こったのか？

たくさん！以下に、各ライブストリームからのすべての講演をタイムスタンプ付きでご覧いただけます。イベントの短いビデオはまもなくSvelte Societyチャンネルに掲載されるので、まだ登録されていない方は登録してください！

1日目

  • 12:31 - Svelteを職場に導入する方法
  • 33:21 - Svelteでのデータ視覚化のアニメーション化
  • 2:20:36 - 危険信号とコードの臭い
  • 2:53:42 - 開発者エクスペリエンスの向上
  • 4:42:41 - UBSのナレッジグラフにおけるSvelte
  • 5:06:42 - ReactライブラリをSvelteに移行する方法
  • 5:45:27 - Svelteの世界における開発者エクスペリエンスの魔法
  • 7:25:39 - Svelteによるデータ視覚化
  • 7:59:38 - パフォーマンス向上のためのSvelteにおける部分的なハイドレーション
  • 8:20:49 - 未来をより速く構築する

2日目

  • 24:09 - Scrollytell me why: Ain’t nothing but a piece of cake
  • 2:02:40 - I told you my dog wouldn’t run
  • 2:29:43 - 10Xing Svelte
  • 3:04:56 - Svemix？Re-svmix？Re-svelte？：Remix RouterへのSvelteの導入
  • 5:09:39 - ストアを使った楽しみ：Svelteの組み込み状態管理ライブラリのインタラクティブデモ
  • 5:37:06 - Svelteを維持することがうまくいかないとき。私が書いた最悪のSvelteコードの分析
  • 7:22:05 - Hooks入門
  • 7:38:14 - 特別発表*

*サミットの最後の講演で、Rich HarrisがSvelteKitの最初のリリース候補版を発表しました！破壊的変更は予定されておらず、チームはバグ修正と残りの1.0機能の追加に懸命に取り組んでいます…

その他のSvelteKitアップデート

  • use:enhanceは、フォームを段階的に強化する最も簡単な方法です（ドキュメント、#6633、#6828、#7012）
  • デモアプリが更新され、RichがSvelte SummitでデモしたSverdleゲームが追加され、use:enhanceが示されています（#6979）
  • Cloudflare Pagesの_routes.json仕様がadapter-cloudflareでサポートされるようになりました（#6530）
  • アセットとページの圧縮を並列実行することで、ビルドのパフォーマンスが向上しました（#6710）

破壊的変更：

  • SvelteKitを実行するための最小バージョンがNode 16.14になりました（#6388）
  • App.PrivateEnvとApp.PublicEnvが生成された型に置き換えられました（#6413）
  • %sveltekit.message%が%sveltekit.error.message%に置き換えられました（6659）
  • App.PageErrorがApp.Errorになりました。フックで確認してください（ドキュメント、#6963）
  • externalFetchがhandleFetchになり、サーバーで実行されるloadのすべてのfetch呼び出しに対して実行されます（#6565）

変更の完全なリストについては、SvelteKitのCHANGELOGをご覧ください。

Svelteアップデート

  • incorrect-aria-attribute-type、no-abstract-role、interactive-element-to-noninteractive-role、role-has-required-aria-propsの新しいa11y警告。no-noninteractive-tabindexとclick-events-have-key-eventsは近日公開！（3.50.0）
  • ComponentEventsとSveltePreprocessorの新しい型（3.50.0）
  • 大量の空白文字に遭遇した場合のパース速度が向上しました（3.50.0）
  • すべてのグローバルJavaScriptオブジェクトと関数が、既知のグローバルとして認識されるようになりました（3.50.1）

今後の変更を含む、Svelteコンパイラのすべての変更については、CHANGELOGをご覧ください。

言語ツールの新機能

  • エディターのサジェストのためのコードフォーマットの改善（106.0.0、#1598）
  • コンテキストメニューまたはコマンドパレットからSvelteKitルートファイルを作成することが容易になりました（106.1.0、#1620）

Svelte Discordで質問する

お知らせを見逃した方のために、Svelte Discordにエキサイティングな新しいアップデートがあります…フォーラム！新しい質問チャンネルは、Discordの新しいフォーラム機能を利用して、コミュニティが質問をより効果的に尋ね、探し、回答できるようにします！

SvelteKit、コミュニティライブラリ、ツールなど、Svelteを使用して達成しようとしていることなら何でも使用できます。遠慮なく質問してください！

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

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

  • Timeflowは、イベントの間にタスクを動的にスケジュールするスマートなカレンダー＆タスクマネージャーです。
  • GeoQuestはオープンソースの地理ゲームです。
  • Houses Ofは、世界中の魅力的な家を展示するプロジェクトです。
  • Greenfield Breweryは、多くのHomebrew Caskをすばやくインストールするためのツールです。
  • Gram Jamは、マッチ3ゲームとScrabbleに触発された単語パズルゲームです。
  • Beatbumpは、プライバシーを尊重するYouTube Musicの代替フロントエンドです。
  • RoomOS Device Widgetsは、キオスク/PWAモードでRoomOSデバイスの機能をデモするためのアプリです。
  • World Seedは本格的なオンラインマルチプレイヤーゲームです。
  • Lirifyは、ラトビアで作られた歌詞作成ウェブアプリツールです。
  • Splet Tech Konferencijaは、非常に洗練されたウェブサイトを持つセルビアのテクノロジーカンファレンスです。
  • Unboundedは、ブロックチェーンによって資金提供されたオープンソースの可変フォントです（そして素晴らしい外観のウェブサイト）。
  • Porter’s Paintsは、Svelteで構築された（ご想像のとおり）塗料のeコマースサイトです。
  • CRAN/Eは、最新のRパッケージの検索エンジンです。

学習リソース

Svelteチーム主演

視聴する

読む

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

  • Svelte Fitは、非常にシンプルで依存関係のないテキストフィットライブラリです。
  • svelte-switch-caseは、Svelteコンポーネント用のswitch case構文です。
  • svelte-canvas-confettiは、単一のキャンバスを使用してフルスクリーンの紙吹雪をレンダリングします。
  • @slidy/svelteは、@slidy/coreに基づいた、Svelteで構築されたシンプルで構成可能で再利用可能なカルーセルコンポーネントです。
  • svelte-currency-inputは、入力時に数値をローカライズされた通貨形式に変換するフォーム入力です。
  • Adriaは、オートコンプリートと値/型のチェックを備えた、非常にシンプルなフォーム検証ライブラリです。
  • Canopyは、Chromeデベロッパーツールパネル用のSvelteデバッグアプリです。
  • MenuFrameworkは、alt:V用に記述されたメニューフレームワークです。
  • whyframeはiframeにスーパーパワーを与え、何でも簡単に分離してレンダリングできます。
  • @svelte-put/modalは、Svelteにおける非同期、宣言型、型安全なモーダルのソリューションです。
  • Kittyは、安全なフロントエンドアプリの開発のためのライブラリとハンドラーのコレクションです。
  • svelte-turnstileは、プライバシー重視のCAPTCHA代替であるCloudflare Turnstileのコンポーネントです。

UIキットとスターター

  • QWERは、SvelteKitで構築されたブログスターターです。
  • SvelteKit Zero APIは、フロントエンドとバックエンド間の型安全性を提供し、簡単なAPIのための構造を作成します。
  • sveltekit-monorepoは、2022年のテクノロジーを使用したモノレポスターターです。
  • svelte-component-test-recipesは、テストが難しいように見えたSvelteコンポーネントをテストするために、vitest、@testing-library/svelte、svelte-htmを使用します。

アップデートがたくさんで大変でしたね！もし何か見落としがあったら、Reddit か Discordで教えてください！

来月またね 👋