Skip to main content

What's new in Svelte: 2023年6月

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

Dani Sandoval

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

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

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)
  • fullscreenElement と visibilityState バインディングが <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 関数の data と form がそれぞれ formData と formElement にリネームされました。古い名前を使用すると、非推奨である旨の警告が表示されます。また、将来的には削除されます。 (1.17.0, Docs, #9902)
  • Link options に true と false を設定できるようになりました (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
  • tall.ly 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
  • CodingView.io 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

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

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