Skip to main content

What’s new in Svelte: 2021年12月

Svelte Summit Fall 2021 の要約、Rich Harris が Vercel にジョイン、Kevin は Svelte Society でフルタイムに

Dani Sandoval

SvelteKit が日に日に stable に近づいてきて、バグフィックス以外のコード変更の観点では取り上げられることがなくなってきました… そのため、今月のニュースレターでは、Svelte Summit Fall 2021 を取り上げます！

もしこの1か月間のバグフィックスを深く知りたければ、Svelte と SvelteKit の changelogs をそれぞれチェックしてみてください。

What happened at Svelte Summit?

もし Svelte Summit を見逃したなら、全ての配信を YouTube で視聴できますし、Discord の #svelte-summit チャンネル で要約をチェックできます。

ハイライトはこちら:

  • Rich Harris は Svelte の歴史ツアーを案内し、Vercel への入社 を発表しました - 今後は Svelte のメンテナンスをフルタイムで行います！(20:00)
  • Steph Dietz は、なぜSvelteのシンプルな抽象化が、初心者から上級者まで、JavaScriptを学び使うのを(それもボイラープレートなしで)簡単にできるのか説明しました (29:00)
  • Kevin Bridges は、Svelte の リアクティビティロジックを ReflectiveCounter によって可視化し、必要に応じて “微調整” する方法を見せてくれました。プレゼンテーションの完全な “シラバス” Kevin のサイト で入手できます (42:55)
  • Mateo Morris は Primo を立ち上げました。これは静的サイトを構築しビルドするのに役立つ all-in-one の SvelteKit CMS です (1:12:34)
  • Guillermo Rauch は、Vercel の Svelte に対するコミットメント、Rich をチームに迎え入れたことが何を意味するか、今後の展望について説明しました… (1:21:54)
  • Geoff Rich は、Svelte のモーションとトランジションを、Webの全てのユーザーにとってアクセシブルなものになるように改善する様々な方法を紹介しました。講演のスライドと文字起こしの全文は Geoff のサイト から入手できます。 (1:32:30)
  • Dean Fogarty は、Svelteのメカニズムを使用し、データを storage に、または storage から変換するカスタムストアの様々なユースケースをデモしました。文字起こしとコードは Dean の GitHub から入手できます。 (1:43:06)
  • Kellen Mace は、コンテンツ制作者が WordPress を使い続けながら、フロントエンドで Svelte を活用し、素晴らしいユーザーエクスペリエンスを提供する方法についてシェアしました (1:49:30)
  • Ben Holmes は、”islands” アーキテクチャと、11ty + Slinkity によってどんな HTML テンプレートにも islands をもたらすことができる方法について説明しました (2:17:15)
  • Scott Tolinski は、React ベースの LevelUpTutorials を Svelte で書き換えて得た教訓と、”開発者の至福を発見” したことをシェアしました (3:16:35)
  • Svelte Sirens は、女性とノンバイナリーとその味方のための新しい Svelte コミュニティとして発表されました。最初のイベントは11月29日で、今後のイベントはすべて Svelte Sirens の website で見つけることができます (3:50:45)
  • Rich Harris は、SvelteKit を使ったライブラリ作成、開発時のパッケージへのリンクのより良い方法、SvelteKit が最新の JavaScript ライブラリ開発で役立つ方法について話しました (3:56:00)
  • Ken Kunz は、有限状態機械(及び svelte-fsm ライブラリ) によって、Svelte コンポーネントの状態などをより管理しやすくする方法について説明しました。講演の例は Ken の GitHub で入手できます。 (4:07:18)
  • Austin Crim は、Webでコードを学ぶことを楽器の演奏方法を学ぶことになぞらえています。学習者に早く成功体験を与え、現実世界のアプリを通して基礎を紹介することで、Svelte (及びその下地となる基礎) を学ぶことが簡単になります (4:21:50)
  • Jesse Skinner は、React (さらには jQuery) プロジェクトで Svelte コンポーネントを使用(及び再利用)する方法について説明し、レガシーアプリを未来に導きました (4:32:30)
  • Jim Fisk と Stephanie Luz は、Svelte サイトをより早く構築するための Plenti とそのテーマ設定ツールを紹介しました (4:59:00)
  • Evyatar Alush は、Vest というパワフルなバリデーションライブラリを使用することでよりよいフォームを作成(そして維持)することができると教えてくれました (5:08:55)
  • Dominik G. は、アイコンライブラリに関するフレッシュな見解をプレゼンしました - それはアプリケーションのバンドルサイズを減らし、Svelteアプリで Iconfy ライブラリ 全てが使用できる、というものです (5:30:04)

このような素晴らしいイベントを開催して頂き、Kevin と Svelte Society のボランティアの皆様に感謝いたします！エキサイティングなことに、イベント終了後に Kevin が今後 Svelte Society にフルタイムで取り組む ことが発表されました！ この Svelte Society の YouTube Playlist で、個々のビデオに分割された全ての講演をチェックすることができます。

Svelte Summit にフィードバックがあれば、Kev が Svelte subreddit でフィードバックを募集しています 👀

Community Showcase

Apps & Sites

  • pixeldrain は無料で使えるファイル共有プラットフォームです
  • LifeHash は、Blockchain Commons から美しいビジュアルハッシュを生成します
  • simple-cloud-music は、モダンブラウザ向けの軽量なサードパーティーの NetEase cloud ミュージックプレーヤーです (Chrome でのみ動作するようです)
  • palette.rocks はコントラストチェック機能を備えたカラーパレットジェネレーターです
  • Kadium は、YouTubeチャンネルのアップロードを常に把握するためのアプリです
  • Multi-Monitor Calculator は、マルチモニターのセットアップを計画するためのツールです
  • Your Home は、Facebook のプライバシー設定のインタラクティブなオーバービューです
  • Svelte Crush は、Candy Crush スタイルの match-3 ゲームです
  • 100.000 Corona deaths in Germany は、Spiegel Gesundheit のために作られたビジュアライゼーションです

何か取り組める Svelte プロジェクトをお探しですか？ Web における Svelte のプレゼンスを高めることに興味がありますか？ もし Svelte Society を SvelteKit に置き換えることに貢献したいなら、open issue のリスト をチェックしてみてください。

Videos, Blogs and Podcasts

Libraries, Tools & Components

  • svelte-cubed は Svelte 向けの Three.js コンポーネントライブラリです - Rich Harris によって開発され、Svelte Summit Fall 2021 の彼の講演でプレゼンされました
  • svelte-fsm は、小さく、シンプルで、表現力があり、プラグマティックな有限状態機械(Finite State Machine (FSM))ライブラリで、Svelte に最適化されています
  • bromb は、Web サイトや Web アプリ向けのフィードバックウィジェットで、小さく、インテグレーション/セルフホストが簡単です
  • Spaper は Svelte 向けの PaperCSS コンポーネントのセットです
  • svelte-intl-precompile は Svelte 向けの i18n ライブラリで、ビルド時に翻訳を解析します
  • svelte-preprocess-svg は Svelte コンポーネントにある inline svg を自動的に最適化し、ファイルサイズを減らしより良いパフォーマンスをもたらします
  • svelte-subcomponent-preprocessor は、Svelte ファイルに1つ以上のコンポーネントを書くことができるようにしてくれます
  • svelte-pdfjs は、Svelte の PDF viewer コンポーネントのおおまかな実装です
  • svelte-inview は、viewport/親要素 への要素の出入りを監視する Svelte action です
  • sveltekit-adapter-wordpress-shortcode は、アプリを wordpress shortcode にする SvelteKit の アダプター(adapter) です
  • svelte-websocket-store は、websocket をバックエンドにした Svelte ストアです
  • Svelte Auto Form は、柔軟性よりも使いやすさを重視した、高速で楽しいフォームライブラリです
  • set-focus は、<a> や <button> 要素がマウントされるとすぐに focus をセットする Svelte action で、なんらかのケースやテストに便利です

SvelteKit に関するアイデアをお持ちですか？Svelte リポジトリの新しい GitHub Discussions をチェックしてみてください。また、Reddit や Discord にもご参加いただけます。

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