Skip to main content

What's new in Svelte: 2022年3月

Svelte Summit Spring が近づく… そしてページエンドポイントの登場！

Dani Sandoval

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

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

発表: Svelte Summit Spring が 2022 年 4 月 30 日に開催されます。5 回目となるバーチャルな Svelte カンファレンスでは、発表者とスポンサーを募集中です。プロポーザルを書いてみませんか！

また、長らく待ち望まれていたいくつかの機能が今月 SvelteKit に追加されました…それにはページエンドポイントも含まれています！これは load 関数の動作を変えるもので、これにより、ベーシックなページにおけるデータの取得や、POST レスポンスからのリダイレクト、404 やその他のエラーのハンドリングなどがより簡単になります。

他にも新機能やバグフィックスがございます、以下をご覧ください！

What's new in SvelteKit

  • ドキュメントが複数ページになり、検索可能になりました。型定義もドキュメントに追加され、また、コード例をホバーすると型が表示されるようになりました。kit.svelte.dev/docs (訳注 : 日本語版は kit.svelte.jp/docs) をチェックしてみてください。
  • ページエンドポイントにより、ページをロードするときに必要なボイラープレートが大幅に削減されます (Issue, PR, Docs)
  • アプリケーションのバージョニングとアップデートの検知がサポートされ、アプリのアップデート後にルート(route)のロードが失敗したときにどうするか決めることができるようになりました (Issue, PR, Docs)
  • npm init svelte@next に新しいオプションが追加され、テスト用に Playwright を自動でセットアップできるようになりました (PR)

Breaking Changes

  • target オプションは使えなくなりましたが、代わりに、init スクリプトがその parentNode をハイドレーションします (#3674)
  • アプリレベルの型情報を App namespace に埋め込めるようになり、Stuff や Session などのグローバルな型を型付けできるようになりました (#3670)
  • JSONString は JSONValue に名前が変わりました (#3683)
  • createIndexFiles は削除され、trailingSlash オプションでコントロールするようになりました (#3801)
  • SvelteKit はプリレンダリングの際にルート(root)相対なリンクを除外しなくなります。もしその URL が分割したアプリによって提供されることを意図している場合、404 が発生します。そのエラーを無視する必要がある場合、カスタムで prerender.onError ハンドラ を使用してください (#3826)

New in Language Tools

  • Svelte の language tool で、マークアップのプロパティへのアクセスが改善されました (105.12.0)。オートコンプリートに関するいくつかの既知の issue が解決します (#538 / #1302)

Community Showcase

Apps & Sites

  • SvelteStorm は、Svelte 開発者が Svelte アプリケーションを構築するのに必要なツールを全て提供することに特化した IDE です
  • Supachat は Svelte と Supabase を使用したリアルタイムチャットアプリです
  • Radicle はソフトウェアを共同で構築するための peer-to-peer スタックです
  • The Making Known は、第二次世界大戦中にナチスドイツが占領下のベルギー・フランス・ルクセンブルグとコミュニケーションを図るためにデザインされたポスターとの遭遇に関する、ナレーション形式の作品です
  • Svelte Kanban は Svelte と純粋な CSS で作られたシンプルなカンバンです
  • fngrng は、スピードではなく正確性にフォーカスを置いたタイピングトレーナーです
  • Generative grids は、カラーパレットと形状をランダムに生成する、綺麗で小さい SVG グリッドです。Svelte REPL 上で動作します
  • LifeHash は、美しい決定論的なアイコンを作成するハッシュ・ビジュアライゼーション手法です
  • TypedWebhook.tools は payload をチェックするための webhook テストツールで、自動型生成ができます
  • Speedskating はオリンピックのスピードスケート滑走を表示するアニメーションウィジェットです。Svelte、D3、regl で構築されています
  • Web tail はローカルまたはリモートサーバーのファイルを tail する web アプリケーションです

SvelteKit のサイトを一緒に作るのに興味がありますか？ Svelte Society のサイトにコントリビュートしてみましょう！

Learning Resources

To Read

To Watch

Libraries, Tools & Components

  • gosvelte は、Svelte が生成するページを Go 言語の HTTP サーバーでサーブし、Svelte コンポーネントにサーバーデータを props として送信する概念実証(proof of concept)です
  • svelte-ethers-store は ethers.js ライブラリを使用した、Svelte・Sapper・SvelteKit 向けの読み取り可能なストアのコレクションです
  • Fluid Grid は未来の web のための CSS グリッドシステムです
  • stirstack は、Svelte.js、TailwindCSS、InertiaJS、Ruby on Rails を組み合わせたオピニオネイテッドなフレームワークです。
  • OATHqr は 2FA/MFA と 他の OAUTH 対応アプリを使用するためのセキュリティクレデンシャルを作るのに便利です。Aegis や YubiKey などのワンタイムパスワード認証アプリ向けのスキャン可能な QR コードを生成するのに使用します
  • svelte-GridTiles はドラッグアンドドロップでサイズ変更可能なタイルライブラリで、レスポンシブグリッド上に構築されています
  • Miscellaneous Svelte Components は、alex-knyaz がよく使用する様々な svelte コンポーネントのコレクションです
  • walk-and-graph-svelte-components は、svelte と js ファイルを走査し、依存関係(imports)を美しい JPG に描画する CLI node script です
  • Felte は Svelte 向けのシンプルに使えるフォームライブラリです
  • svelte-use-tooltip は tooltip を表示するための Svelte action です
  • persistent-svelte-store は汎用的に使える書き込み可能な永続化ストアです。Svelte の store contract に従って TypeScript でスクラッチで開発されました

なにか見落としがありましたか？ Reddit や Discord に参加してください、お話を伺いましょう。

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