メインコンテンツにスキップ

Svelte の最新情報: 2023 年 5 月

新しいアンバサダー、新しい ESLint プラグイン、そして SvelteHack への多数の応募作品

Dani Sandoval

アップデートの詳細に入る前に、いくつか重要な発表があります。

新しい Svelte アンバサダー

このニュースレターの常連であり、Svelte の優れたコンテンツクリエイターである JoyOfCode と HuntaByte が Svelte アンバサダーに任命されました。アンバサダーは、その helpfulness と貢献、そして Svelte のフレンドリーで welcoming なコミュニティとしての評判を維持することで知られています。彼らの参加に深く感謝しています！

SvelteHack の受賞者は 5 月 6 日に発表されます

数日後には、2 月 17 日から 4 月 17 日まで開催された Svelte ハッカソンである SvelteHack の受賞者が発表されます。5 月 6 日の Svelte Summit で、お気に入りのプロジェクトが選ばれたかどうかを確認してください 👀

今月のショーケースでは、ハッカソンへの多数の応募作品が紹介されています...が、まずは最新情報をご覧ください！

Svelte の最新情報

  • style ブロックが CSS @container クエリをサポートするようになりました (3.58.0)
  • bind:innerText が contenteditable 要素で使用できるようになりました (3.58.0)
  • 新しいアクセシビリティ警告 a11y-interactive-supports-focus により、インタラクティブ要素がフォーカスできない場合に警告が表示されるようになりました (3.58.0)

リリースされていない変更を含む、Svelte コンパイラのすべての変更については、CHANGELOG をご覧ください。

SvelteKit の最新情報

  • ホットモジュールリローディング (HMR) が有効になっている場合、エラーが修正された後にページがリロードされるようになりました (1.14.0, #9497)
  • 同じ HTML ページに読み込まれた 2 つのアプリが、「埋め込み」モードで同時に読み込めるようになりました (1.15.7, #9610)
  • Vite のコンパイルは、svelte フィールドを使用して Svelte ファイルを標準の Vite 解決方法とは異なる方法で解決するパッケージに対して警告をログに記録するようになりました (vite-plugin-svelte@2.1.0, kit@1.15.8)

言語ツールの最新情報

  • <svelte:document> のサポート (#1958) と新しいバインディングのインテリセンスレポート (#1957) (107.3.0)
  • 「クイックフィックス...」の新しい修正メニューオプションを使用すると、「不足しているすべてのインポートを追加する」などの検出されたエラーを簡単に修正できます (107.3.0, #1939)
  • 新しく、より優れた公式の ESLint プラグイン が登場しました！ 以前の ESLint での Svelte のサポートは、テンプレート AST を適切に処理できなかったため、誤検知/偽陰性が発生し、カスタム ESLint ルールを作成するのが困難でした。 この新しい公式バージョンは、ota-meshi の svelte-eslint-parser に基づいており、本番環境に対応しています。ぜひお試しいただき、フィードバックをお寄せください！

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

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

  • Sound of War は、ウクライナにおける破壊の規模を理解するためのストーリーテリングデータビジュアライゼーションプロジェクトです
  • Syntax FM の swag ショップ は、SvelteKit、PlanetScale、Prisma を使用して構築されています
  • Appreciation Jar は、パートナーに励ましのメッセージや感謝のメッセージを送ることができるプライベートスペースです
  • Japanese Jouzu は、日本語の音と記号を学習するためのアプリです
  • MarkMyImages は、一括ウォーターマーク、画像のリサイズ、名前の変更、エフェクトなどをすべてデバイス上で行うことで、速度とプライバシーを確保できるツールです
  • Immich は、モバイルフォンから直接写真やビデオをバックアップできるセルフホスト型のソリューションです
  • Earbetter は、音楽やオーディオの再生とプログラミングのためのイヤートレーニングゲームとツールです
  • Tune Twisters は、曲を逆再生して当てるゲームです
  • ResponseHunt は、ブラウザのリクエストに基づいたミステリーゲームです。プログラミングスキルを使って「黄金の」レスポンスを手に入れましょう
  • Wolfensvelte 3D は、Wolfenstein 3D の Svelte「ポート」です
  • Code Solving は、コードで問題を解決する方法を教えます
  • Make Bookmarklets は、リンティング、インテリセンス、自動縮小機能を使用して JavaScript ブックマークレットをすばやく作成する方法です
  • GeniePM は、プロダクトマネージャーがユーザーストーリーと要件を書くのを支援する AI ツールです
  • Bitesized News は、ニュースダイジェストを提供し、チャットで質問に答える AI です
  • Open Tunings は、ギターを再チューニングすることなく、代替ギターチューニングを探索できる場所です
  • BlinkSMS は、ストックホルムの学生寮の洗濯時間の予約に役立つテキストアラートツールです
  • Dev Links は、開発者が Linktree や Kofi のように複数のリンクを 1 か所にまとめて表示するのに役立ちます
  • Audiogest は、音声をテキストに変換し、音声を要約するツールです
  • MineSweep は、Svelte と JavaScript で構築されたマインスイーパーです
  • Biolytics を使用すると、ラボテストをインポートして、すべてのラボテストを 1 か所で確認できます
  • Zero share は、WebRTC を使用した安全な P2P ファイル共有です
  • Svelte lab は、SvelteKit プロジェクトを作成および共有するためのサンドボックスです

学習リソース

Svelte の貢献者とアンバサダーを紹介します

視聴するには

読むには

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

  • Sveltris を使用すると、コンポーネントなどの UI プリミティブと、フックなどの状態プリミティブをフレームワーク間で気づかずに混在させることができます
  • SwiftMarket は、SvelteKit、データベースとして Pocketbase、決済として Stripe を使用して構築された E コマースソリューションです
  • Svelegante は、Svelte 用の Classy 書き込み可能ストアです
  • Table Generator を使用すると、グラフィカルエディターを使用してオンラインで独自のテーブルを作成、設計、カスタマイズできます
  • Svelte Animated Headline は、有益な方法で注目を集めることができるアニメーション化された見出しコンポーネントです
  • SvelteKit Music App Example は、データの接続と処理方法、および TailwindCSS を使用したフロントエンドコンポーネントの開発方法の具体的な例を示しています
  • Socio は、フロントエンドロジックをバックエンドデータベースにリアクティブに接続するための WebSocket リアルタイム通信 (RTC) API フレームワークです
  • Flowbite Svelte は、Svelte 用の公式 Flowbite コンポーネントライブラリです
  • フロントエンドフレームワークのバックエンドである Wundergraph が、Svelte Query クライアントをリリースしました
  • Lucia は、SvelteKit 用のシンプルで柔軟な認証ライブラリのバージョン 1.0 に到達しました
  • svelte-stepper は、Svelte でアニメーション化されたステッパーフローを構築するためのシンプルなライブラリです

いつものように、Reddit または Discord で何か見逃していることがあればお知らせください。

次回お会いしましょう！