Skip to main content

What's new in Svelte: 2022年5月

`<svelte:element>` で動的に HTML 要素タイプを切り替える

Dani Sandoval

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

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

昨日 Svelte Summit があったので、シェアするニュースがたくさんあります！Svelte Society YouTube Channel のレコーディングをチェックしてみてください。それでは、今月の更新情報をどうぞ…

What's new in Svelte

  • <svelte:element> 要素によって、動的に指定したタイプの要素をレンダリングできます。これは例えば、CMS のリッチなテキストコンテンツをレンダリングする場合などに便利です。詳細は docs や tutorial をチェックしてみてください (3.47.0)!

Language Tools updates

  • svelte:element と sveltekit:reload がサポートされました
  • 無効な Svelte インポートパスが自動的に検知されるようになりました。以前の動作に戻したい場合は PR をご確認ください (#1448)
  • source.sortImports によって、未使用のインポートを削除することなくインポートをソートできるようになりました (#1338)
  • HTML 属性にカーソルを合わせたときに、TS のホバー情報ではなく HTML のホバー情報が表示されるようになり、より便利な情報が見られるようになりました (#1447)
  • VS Code で、Insert Snippet コマンドを使って既存のコードブロックをコントロールフロータグでラップできるようになりました (#1373)

What's new in SvelteKit

  • ルート(routes)のディレクトリにあるファイルやディレクトリの名前を __tests__ や __test__ にすることができるようになりました (#4438)
  • Netlify Edge Functions (#4657) と Vercel build output API (#4663) がサポートされました
  • ルート(routes)のロード時、そのページが依存している URL を表す文字列の配列である dependencies プロパティに、カスタムで URL を追加できるようになりました (Docs, #4536)

Breaking Changes

  • Validators が "matchers" という名称に変わりました (Docs, #4358)
  • __layout.reset が名前付きレイアウト(named layouts)に置き換えられました。これによって、レイアウトの共通化などの設定がこれまで以上にできるようになりました (Docs, #4388)
  • プリレンダリングで、rel="external" リンクがスキップされるようになりました (#4545)
  • maxage は、LoadOutput の中の cache になりました (#4690)

Community Showcase

Apps & Sites built with Svelte

  • polySpectra AR は、AR のファイルを渡すことで 3D プリントを早くプロトタイプすることができます (video demo)
  • Pixel Art Together は、複数人で使用できるフリーのピクセルアートエディタです。Liveblocks を使用しています
  • Tooling Manager では、あなたの JavaScript の技術スタックと、業界の標準的なボイラープレートを比較することができます
  • Easy Portfolio は、あなたの GitHub プロフィールをもとにポートフォリオを生成します
  • FLOAT は、イベント用の出席管理プログラムです
  • The Coin Perspective は暗号通貨の価格トラッカー兼ポートフォリオ管理ツールです
  • Locutionis は、修辞的表現法の小さなオンラインリファレンスです (フランス語)
  • ASM Editor は、M68K と MIPS 向けのオールインワンなエディタです
  • Otium はフリーでオープンソースのブックマネージャーであり、ブックシェルフオーガナイザーです。あなたの本や読みたい本を管理するのに役立ちます
  • Sinwaver は正弦波の SVG を生成するジェネレーターです

モダンな SvelteKit webサイト に貢献してみたいですか？Svelte Society のサイト構築を手伝っていただけませんか!

Learning Resources

To Read

To Watch or Hear

Libraries, Tools & Components

  • KitDocs は SvelteKit 向けのドキュメントのインテグレーションです。Svelte にとっての VitePress のようなものです。
  • Svelte Copy は、クリック/タップで簡単にクリップボードにコピーすることができるライブラリです
  • Svend3r は D3 のパワーを活用した美しいビジュアライゼーションを提供してデータに命を吹き込み、それだけでなく、命令形のコードを抽象化できます
  • Svelte Hamburgers は Svelte 向けの簡単に使えるハンバーガーメニューコンポーネントです
  • Svelte Droplet は Svelte 向けのファイルドロップゾーンです
  • Svelte MP3 は Svelte 向けの、軽量で高速かつシンプルでミニマルなオーディオプレーヤーです
  • SvelteUI は高機能でアクセシブルな Web アプリケーションをより速く構築するためのコンポーネントライブラリです
  • svelte-spotlight はヘッドレスな spotlight コンポーネントで、短時間でサイト全体の検索ボックスを構築するのに役立ちます
  • svelte-pdf-simple は PDF を表示するためのシンプルな Svelte ライブラリで、コントロールがカスタマイズ可能です
  • persistent-svelte-store は永続化のための汎用的な書き込み可能なストア(writable store)です。TypeScriptでスクラッチで構築されており、Svelte のストアコントラクト(store contract)に準拠しています
  • svelte-exmarkdown は markdown を動的にレンダリングするための Svelte コンポーネントです
  • Bookit は storybook ライクなコンポーネントレンダリング環境です。SvelteKit プロジェクトで動作するように細かくチューニングされています

この続きは Reddit や Discord で！

オフラインでのコミュニティ参加を待ち望んでいた方に朗報です。ついに Svelte Summit がリアルワールドに移行します。是非、素晴らしい Svelte コンテンツ でいっぱいの2日間にご参加ください！チケットはこちら！

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