What's new in Svelte: 2022年2月
Svelte、SvelteKit、コミュニティを横断し、畳み掛けるようにリリース
翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-february-2022日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
Happy February, everyone! ここ1か月ほどで、Svelte と SvelteKit の 開発が加速し、Reddit、GitHub、Discord で新しいコミュニティのルールができ、そしてかなりの数の素晴らしいアプリ、チュートリアル、ライブラリがリリースされました。
それでは見ていきましょう…
Highlights from the Svelte changelogpermalink
- 3.45.0 では、新しい a11y の warning である
a11y-no-redundant-roles
と、分割代入およびキャッシュの修正が行われました - 3.46.0 では、要望が多かった
{@const}
tag とstyle:
directive が追加されました - 3.46.1 - 3.46.3 では、
{@const}
タグとstyle:
ディレクティブの修正、アニメーションに関する多くの修正が行われました - Svelte REPL で AST が出力できるようになりました
What's new in SvelteKitpermalink
inlineStyleThreshold
によって、CSS ファイルをインラインスタイルシートにしてページに挿入するかどうか指定できるようになりました (Docs, #2620)beforeNavigate
/afterNavigate
ライフサイクル関数によって、ページナビゲーションの前後に機能を追加することができるようになりました (Docs, #3293)- プラットフォーム固有のコンテキストを、adapter から渡せるようになりました (Docs, #3429)
- Hooks の
resolve
関数にssr
パラメーターが追加され、必要に応じて SSR を簡単にスキップできるようになりました (Docs, #2804) $page.stuff
は、ページがレイアウトに対してデータを '上向きに' 渡すためのメカニズムを提供します (Docs, #3252)- Fallthrough routes によって、ルート(route)が読み込めないときのルーティング先を指定することができます (Docs, #3217)
New configs
- Content Security Policy (CSP) がサポートされ、インラインの JavaScript と スタイルシートを使用するときのセキュリティが強化されます (Docs, #3499)
kit.routes
の設定で、ビルド時に、どのモジュールをパブリック/プライベートにするかカスタマイズできるようになりました (Docs, #3576)prerender.createIndexFiles
の設定で、index.html をサブフォルダの名前でプリレンダリングできるようになりました (Docs, #2632)kit.methodOverride
を使用することで、HTTP メソッドをオーバーライドできるようになりました (Docs, #2989)
Config changes
Breaking change
- エンドポイント(endpoints) と Hooks で、
Request
オブジェクトとResponse
オブジェクト が使われるようになりました (#3384)
Community Showcasepermalink
Apps & Sites
- timb(re) は、ライブミュージックプログラミング環境です
- Music for Programming は、
${task}
中に聴くことで脳を集中させやる気を起こすことを目的としてミックスシリーズです - Team Tale は、1つのストーリーを2人の執筆者がタッグを組むような形で書くことができます
- Puzzlez は、数独と Wordle をオンラインでプレイできます
- Closed Caption Creator は、Windows、Mac、Google Chrome で、あなたのビデオに簡単に字幕を付けられます
- SC3Lab は、svelte-cubed and three.js を使用した実験的なコードジェネレーターです
- Donkeytype は、Monkeytype にインスパイアされた、ミニマルで軽量なタイピングテストです
- Above は、ADHD/自閉症の方のために作られたビジュアル・ルーティーン・タイマーです
- base.report は、本格的な投資家向けのモダンなリサーチプラットフォームです
- String は、あなたのスマートフォンをセキュアでポータブルなオーディオレコーダーに変身させ、個人的なメモ、家族の思い出、講義などを記録して共有するのを簡単にしてくれます
- The Raytracer Challenge REPL は、シーンのレイトレーシングを設定してそれをレンダリングするライブ・エディター・インタフェースで、モダンなブラウザで動作します
- awesome-svelte-kit は、SvelteKit の素晴らしい example のリストです
- Map Projection Explorer は、様々な地図の投影法を調べ、その違いを明白にすることができます
- Rubiks はルービックキューブのシミュレーターです
- Pianisto は、SVG と ToneJS と多くの忍耐によって作られた、実際に動くピアノです
みんなで SvelteKit サイト に取り組んでみたいなら、Svelte Society のサイトへのコントリビュートにトライしてみてください!
Learning and Listening
To Read
- Svelte の開発を加速する(Accelerating Svelte's Development) by Ben McCann
- Storybook for Vite
- Let's learn SvelteKit by building a static Markdown blog from scratch by Josh Collinsworth
- Building an iOS app with Svelte, Capacitor and Firebase by Harry Herskowitz
- Mutating Query Params in SvelteKit Without Page Reloads or Navigations and Workaround for Bubbling Custom Events in Svelte by Mohamad Harith
- How to build a full stack serverless application with Svelte and GraphQL by Shadid Haque
- How to Deploy SvelteKit Apps to GitHub Pages
- Creating a dApp with SvelteKit by Anthony Riley
- Comparing Svelte Reactivity Options by Steve Lee
To Watch
- Integrating Storybook with SvelteKit and Integrating FaunaDB with Svelte by the Svelte Sirens
- SvelteKit Crash Course Tutorial by The Net Ninja
- Svelte for Beginners by Joy of Code
- SvelteKit For Beginners | Movie App Tutorial by Dev Ed
- SvelteKit $app/stores by lihautan
- Sveltekit - Get All Routes/Pages by WebJeda
To Listen To
- New Year, New Svelte!? from Svelte Radio
- So much Sveltey goodness (featuring Rich Harris) from JS Party
- The Other Side of Tech: A Documentarian Perspective (with Stefan Kingham) from Purrfect.dev
Libraries, Tools & Components
- threlte は Svelte 向けの three.js コンポーネントライブラリ
- svelte-formify は、フォームの管理とバリデーションを行うライブラリで、デコレーターを使用してバリデーションを定義します
- gQuery は、SvelteKit 向けの GraphQL Fetcher & Cache です
- Unlock-protocol は、MetaMask、Firebase、paywall のユーザーのログインを支援するインテグレーションです
- AgnosticUI は、クリーンな HTML と CSS で構成されている UI プリミティブのセットです
- Vitebook は、高速で軽量な Storybook の代替で、Vite を使用しています
- SwyxKit は、SvelteKit + Tailwind + Netlify を使用したオピニオネイテッドなブログ・スターターです。2022年に向け新しくなりました!
- svelte-themes は、SvelteKit アプリのテーマを抽象化したものです
- svelte-transition は、CSS クラスベースのトランジションを簡単にする Svelte コンポーネントです - TailwindCSS と一緒に使用するのが望ましいです
- Svelte Inview は、viewport/親要素 への要素の出入りを監視する Svelte アクションです
- svelte-inline-compile は、Jest と
@testing-library/svelte
を使って Svelte コンポーネントをテストする際に、より快適な体験を得るための Babel transform です - @feltcoop/svelte-mutable-store は、
immutable
コンパイラオプションでもミュータブルな値を扱える Svelte ストアです - headless-svelte-ui は、Svelte アプリを構築する際に使用できるヘッドレスコンポーネント(headless components)集です
なにか見落としがありましたか?Svelte でアイデアを実現するのに助けが必要ですか? Reddit または Discord にご参加ください。
また来月お会いしましょう!