Skip to main content

What's new in Svelte: 2023年6月

SvelteHack の受賞者、たくさんのバインディング、Svelte 4.0.0-next.0、そして SvelteKit の新機能がいっぱい

翻訳 : Svelte日本コミュニティ
原文 :


6月になりましたね。まず、SvelteHack の全カテゴリーの受賞者の皆さま、おめでとうございます!受賞者は5月6日の Svelte Summit で発表されました 🎉

Summit のプレイリストは、the Svelte Society YouTube channel からご覧いただけます (各講演ごとに動画がビデオが分割されています)。まだ見ていない場合は、チェックしてみてください。

今月のニュースレターは、Svelte と Kit の改善点をたくせんお届けします…

What's new in Svelte

Svelte 4.0 の最初のプレリリースバージョンである Svelte 4.0.0-next.0 が公開されました! このリリースの変更点、改善点、目的に関する説明は GitHub のリリースページ でご確認いただけます。Svelte の未来を先行して知りたければ、チェックしてみてください。移行ガイドも含まれておりますので、ごくわずかな破壊的変更・非推奨事項についてもご確認いただけます。

Svelte 3.59.0 も公開され、新機能がたくさん追加されています:

  • スプレッド構文 (...) による配列の再構築が正しく処理されるようになりました (3.59.0, #8552, #8554)
  • 新たに追加された a11y-autocomplete-valid 警告は、autocomplete 属性が HTML の仕様に従って使用されていない場合に警告を出します (3.59.0, Examples, #8520)
  • fullscreenElementvisibilityState バインディングが <svelte:document> 要素で使用できるようになりました (3.59.0, #8507)
  • devicePixelRatio バインディングが <svelte:window> 要素で使用できるようになりました (3.59.0, #8285)
  • ResizeObserver のバインディング contentRect/contentBoxSize/borderBoxSize/devicePixelContentBoxSize が、bind: で使用できるようになりました (3.59.0, #8022)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

What's new in SvelteKit

  • ルートレベルのエントリジェネレータ(Route-level entry generators)、つまり +page+page.server+server ファイルから entries 関数をエクスポートすることができるようになり、プリレンダリング向けにパラメータ(params)の値を提供することができるようになりました (1.16.0, Docs, #9571)
  • <meta> タグの URL がクロールされるようになり、プログラムによるソーシャルイメージの作成が簡単になりました (1.17.0, Docs, #9900)
  • enhance 関数の dataform がそれぞれ formDataformElement にリネームされました。古い名前を使用すると、非推奨である旨の警告が表示されます。また、将来的には削除されます。 (1.17.0, Docs, #9902)
  • Link options に truefalse を設定できるようになりました (1.19.0, Docs, #10039)
  • 新しい resolvePath エクスポートは、ルート ID (route ID) とパラメータから相対パスを構築するために使用されます (1.19.0, Docs, #9949)

Community Showcase

Apps & Sites built with Svelte

  • a-maze is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells
  • Windows 11 in Svelte attempts to replicate the Windows 11 desktop experience on web
  • JsonCrunch is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data
  • Typepost is a simple text post generator for social media
  • is a website for sharing bookmarks (example)
  • bbchallenge is a collaborative environment to prove or disprove the Busy Beaver conjecture
  • Reddit Map is a project of computer, data, and social scientists to explore and visualize Reddit
  • WeWatch allows watching videos together in sync
  • Wonderplan is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip
  • is an online coding interview tool
  • MeatGPT is an art-site that promptly ignores your prompt
  • Vim Ninja is an interactive Vim course in the browser
  • prcl is a Pastebin-alternative focused on speed and simplicity
  • md is a web based markdown editor

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch

To Read

Libraries, Tools & Components

  • svelte-svg-transform is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project
  • sirens is a visualization of active air raid sirens in Ukraine by DER SPIEGEL
  • Sveltronics is a collection of Svelte utility functions for your project
  • Prompta is yet another interface for chatting with ChatGPT (or GPT-4)
  • Colibri is a lightweight, customizable component library for Svelte apps
  • Svelte Smart Doc is a natural language interface to search the Svelte Svelte documentation
  • Tailwind Elements now has a Svelte Integration

お読みくださりありがとうございました! いつも通り、見落としなどございましたら RedditDiscord にてお気軽にお知らせください。

また次回お会いしましょう 👋