Skip to main content

What's new in Svelte: 2022年4月

フォールスルールートにさようなら、param validatorにこんにちは！

Dani Sandoval

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

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

今月は、SvelteKit のページプロパティの扱い方に変更がありました。フォールスルールート(fallthrough routes)を必要とするユースケースの最後の難関「パラメータプロパティの検証」が、より具体的なソリューションに置き換えられました。

より詳細な情報と、その他 Svelte の新機能について見ていきましょう…

What's new in SvelteKit

  • Param matchers により、ページをレンダリングする前に URL パラメータがマッチするかチェックできるようになりました。フォールスルールート(fallthrough routes)で URL パラメータをチェックしていた場合は、これに置き換えてください (Docs, #4334)
  • 明示的なリダイレクトをエンドポイントで直接扱えるようになりました (#4260)
  • svelte-kit sync (#4182)、TypeScript 4.6 (#4190)、Vite 2.9 がリリースされました。ノンブロッキングな依存関係の最適化、開発モードでの実験的な CSS source map、SvelteKit チームのコントリビュートによるいくつかのバグフィックスが追加されています (#4468)

New Config Options

  • outDir により、モノレポや、プロジェクトディレクトリの外側に出力ディレクトリを置きたい状況におけるパスの問題が解決します (Docs, #4176)
  • endpointExtensions により、ご自身で endpointExtensions を指定しない限り、.js と .ts 以外のファイルがエンドポイントとして扱われるのを防ぎます (Docs, #4197)
  • prerender.default により、全てのページファイルに export const prerender = true を書かなくても全てのページをプリレンダリングすることができるようになりました (Docs, #4192)

Breaking Changes

  • フォールスルールート(Fallthrough routes)が削除されました。マイグレーションのための tips については、PR を確認してみてください (#4330)
  • tabindex="-1" がナビゲーションの間 <body> にのみ追加されるようになります (#4140、#4184)
  • Adapter は getClientAddress 関数を提供する必要があります (#4289)
  • InputProps と OutputProps は、生成される Load において別々に型付けされるようになりました (#4305)
  • \$ 文字が動的なパラメータとして使えなくなりました (#4334)
  • svelte-kit package が experimental としてマークされ、Kit 1.0 以降に変更があっても breaking と見なされません (#4164)

New across the Svelte ecosystem

  • Svelte: TypeScript、Svelte plugin ユーザー向けに新しい型が多く追加されました。style: ディレクティブや Svelte Actions も含まれます (3.46.4、3.46.5)
  • Language Tools: Svelte のプロジェクトファイルを、TS ファイルでインポートしていなくても参照(reference)からインポート/検索できるようになりました (105.13.0)
  • Language Tools: html で、 <!--#region-->/<!--#endregion--> で折りたたみができるようになりました (105.13.0)

Community Showcase

Apps & Sites built with Svelte

  • Launcher はオープンソースのアプリランチャーです。SvelteKit、Prisma、Tailwind を使用しています
  • Paaster は end to end で暗号化された pastebin で、デフォルトで安全です。Svelte、Vite、TypeScript、Python、Starlette、rclone、Docker で構築されています
  • Simple AF Video Converter は ffmpeg.wasm の Electron ラッパーです。フォーマット間の動画変換を簡単に行うことができます。
  • Streamchaser は、一元化されたエンターテイメントテクノロジープラットフォームを通じて、映画やシリーズ、ドキュメンタリーなどの検索をシンプルにすることを追求しています
  • Svelte Color Picker はシンプルなカラーピッカーで、Svelteで構築されています
  • ConcertMash は、Spotify API を使用してあなたが参加する予定のコンサートに基づいた新しいプレイリストを生成する小さな web サイトです
  • Modulus はデザイン+コードのシンクタンクで、デザインとテクノロジーを進化させることを主なミッションとしています。
  • Multiply はカルチャーのスピードに合わせた PR とソーシャルの総合エージェンシーです
  • yia! はニュージーランドの Young Innovator Award コンペティションです
  • Write to Russia は、パブリックな .ru のメールアドレスとやり取りするためのコミュニティメール作成プラットフォームです
  • Markdown Playground は、markdown 色々試してみるのに特化したオンラインの playground です
  • RatherMisty は装飾を省いた天気予報アプリで、Open-Meteo の気象データを使用しています
  • Minecraft Profile Pic (MCPFP) は Minecraft のプロフィール画像を簡単に生成できるサイトです
  • WebGL Fluid Simulation は様々な設定が可能な流体シミュレーションで、Svelte と WebGL で構築されています
  • この @NobelPeaceOslo の展示 は、プリントグラフィックス、プロジェクションモーショングラフィックス、パーティクルアニメーション、ジェネレーティブサウンドデザインを用いて構築されています

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

Learning Resources

To Attend

  • Svelte Summit: Spring が2022年4月30日に開催されます！YouTube と Discord で、5回目のバーチャルな Svelte カンファレンスに是非ご参加ください 🍾

To Read

To Watch

Libraries, Tools & Components

  • SvelTable は多機能なデータテーブルコンポーネントで、Svelteで構築されています
  • svelte-cyberComp はパワフルで軽量な Svelte コンポーネントで、Svelte と TypeScript で書かれています
  • Flowbite Svelte は Svelte 向けの非公式な Flowbite コンポーネントライブラリです
  • Svelte-Tide-Project は、フロントエンドに Svelte、バックエンドに Rust の Tide を使った スターター・テンプレートです
  • Fetch Inject は非同期な JavaScript の依存関係を管理するためのパフォーマンス最適化の実装で、Svelte をサポートし始めました
  • svelte-utterances は GitHub issues をベースにした軽量なコメントウィジェットです
  • Liquivelte は、Svelte ライクなコンポーネントで Shopify のテーマを構築することができます
  • @storyblok/svelte は、Storyblok API を使用するのに必要な Svelte SDK で、リアルタイムでビジュアル編集が可能となります
  • @svelte-on-solana/wallet-adapter は Solana/Anchor アプリケーション向けのモジュラーな TypeScript wallet adapter と UI コンポーネント で、フレームワークとして SvelteJS を使用しています
  • svelte-lookat は、その子要素がマウスカーソル(モバイルの場合はユーザーの顔)に追従するような div を作成します

この続きは Reddit や Discord で！

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