Skip to main content

What's new in Svelte: 2022年2月

Svelte、SvelteKit、コミュニティを横断し、畳み掛けるようにリリース

Dani Sandoval

翻訳 : 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 changelog

What's new in SvelteKit

  • 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

  • config.kit.hydrate と config.kit.router が config.kit.browser の配下に移動されました (Docs, 3578)

Breaking change

  • エンドポイント(endpoints) と Hooks で、Request オブジェクトと Response オブジェクト が使われるようになりました (#3384)

Community Showcase

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

To Watch

To Listen To

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 にご参加ください。

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