Svelteの最新情報：2022年3月

発表されたばかり: Svelte Summit Spring が2022年4月30日に開催されます。5回目のバーチャルSvelteカンファレンスでは、講演者を募集しており、スポンサーも募集中です...提案書をまとめましょう！

また、今月は SvelteKit に長らく要望のあった機能がいくつか追加されました... その中にはページエンドポイントも含まれています！このload関数の動作の変更により、基本的なページに必要なデータの取得、POSTレスポンスからのリダイレクト、404エラーやその他のエラーの処理が簡単になります。

以下に、この変更点やその他の新機能と修正点について詳しく説明します！

SvelteKitの新機能

• ドキュメントが検索可能になり、型定義やホバー可能なコード例を含む複数ページになりました。 svelte.dev/docs/kit でご確認ください。
• ページエンドポイントにより、ページ読み込み時に必要なボイラープレートが大幅に削減されます。（Issue, PR, ドキュメント）
• アプリケーションのバージョニングと更新検知のサポートにより、アプリの更新後にルートの読み込みに失敗した場合の対処法を決定できます。（Issue, PR, ドキュメント）
• npm init svelte@next の新しいオプションで、テスト用に Playwright を自動的にセットアップできるようになりました。（PR）

破壊的変更

• targetオプションは利用できなくなりました。代わりに、initスクリプトは自身のparentNodeをハイドレートします。（#3674）
• アプリレベルの型はApp名前空間に存在するようになり、StuffやSessionのようなグローバル型を型付けできます。（#3670）
• JSONString は JSONValue になりました。（#3683）
• createIndexFiles は削除されました。現在は trailingSlash オプションで制御されます。（#3801）
• SvelteKit は、ルート相対の外部リンクをプリレンダリングから除外しないようになりました。これらのURLが別のアプリによって提供されることを意図している場合、404エラーが発生します。無視する必要がある場合は、カスタムのprerender.onErrorハンドラーを使用してください。（#3826）

言語ツールの新機能

• Svelte言語ツールでマークアップ内のプロパティへのアクセスが改善されました。（105.12.0） - オートコンプリートに関する既知の問題を回避しています。（#538 / #1302）

---

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

アプリとサイト

• SvelteStorm は、Svelte開発者がSvelteアプリケーションを構築するために必要なすべての重要なツールを提供するように特別に調整されています。
• Supachat は、SvelteとSupabaseを使用したリアルタイムチャットアプリです。
• Radicle は、ソフトウェアを共同で構築するためのピアツーピアスタックです。
• The Making Known は、第二次世界大戦中にベルギー、フランス、ルクセンブルクの占領国とのコミュニケーションのためにナチスドイツ政府が設計したポスターとのナレーション付きの出会いです。
• Svelte Kanban は、純粋なCSSで作成されたシンプルなSvelteカンバンです。
• fngrng は、スピードよりも正確性に焦点を当てたタイピングトレーナーです。
• Generative grids は、ランダムに生成されたカラーパレットとシェイプを備えた、Svelte REPLの洗練された小さなジェネレーティブSVGグリッドです。
• LifeHash は、美しく決定論的なアイコンを作成するハッシュ視覚化の方法です。
• TypedWebhook.tools は、ペイロードを確認するためのWebhookテストツールで、自動型生成機能を備えています。
• Speedskating は、オリンピックスピードスケートの実行を表示するアニメーションウィジェットです。Svelte、D3、reglで構築されています。
• Web tail は、ローカルシステムまたはリモートサーバー上のファイルから行を表示するためのWebアプリケーションです。

SvelteKitサイトで他の人と共同作業をしたいですか？ Svelte Societyサイトに貢献してください！

学習リソース

読む

• Svelte Components as Web Components by Matias Meno
• Simple Svelte Routing with Reactive URLs by Bjorn Lu
• Leveling Up my Sveltekit / Sanity.io Blog Content with Featured Videos and Syntax Highlighting by Ryan Boddy
• How This Blog Makes the Most of GitHub by paullj
• FullStack JWT Auth: Introducing SvelteKit by John Idogun
• Svelte-Cubed: Adding Motion to 3D Scenes by Alex Warnes
• Creating a RSS feed with Sanity and Svelte Kit by GHOST
• How to use Svelte’s style directive by Geoff Rich
• SvelteKit and the “Client pattern” by Julian Laubstein

見る

• Shadow SvelteKitのページエンドポイント - Weekly Svelte by LevelUpTuts
• Testing For Beginners (Playlist) by Joy of Code
• KitQL - GraphQL用のネイティブSvelteKitライブラリ by Jean-Yves COUËT

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

• gosvelte は、サーバーデータがSvelteコンポーネントにpropsとして送信されるGoLang HTTPサーバーでSvelteで生成されたページを提供するための概念実証です。
• svelte-ethers-store は、ethers.jsライブラリをSvelte、Sapper、またはSvelteKit用の読み取り可能なSvelteストアのコレクションとして使用します。
• Fluid Grid は、将来のWeb用のCSSグリッドシステムです。
• stirstack は、Svelte.js、TailwindCSS、InertiaJS、およびRuby on Railsを組み合わせた独自のフレームワークです。
• OATHqr は、ユーザーが2FA/MFAやその他のOATH対応アプリで使用するためのセキュリティ資格情報を作成するのに役立ちます。AegisやYubiKeyなどのワンタイムパスワード認証アプリのスキャン可能なQRコードを生成するために使用します。
• svelte-GridTiles は、レスポンシブグリッド上に構築されたドラッグアンドドロップでサイズ変更可能なタイルライブラリです。
• Miscellaneous Svelte Components は、alex-knyazがプロジェクトでよく使用する、さまざまなSvelteコンポーネントのコレクションです。
• walk-and-graph-svelte-components は、Svelteとjsファイルを走査して、依存関係（別名「インポート」）の美しいJPGを描画するCLIノードスクリプトです。
• Felte は、Svelte用の使いやすいフォームライブラリです。
• svelte-use-tooltip は、ツールチップを表示するためのSvelteアクションです。
• persistent-svelte-store は、Svelteストア契約に従ってTypeScriptでゼロから構築された、汎用的な永続的な書き込み可能なストアです。

見落としはありませんか？Reddit または Discord で会話を続けましょう。

来月またお会いしましょう！