Svelte 3：リアクティビティの再考

数ヶ月間「もうすぐリリース」の状態が続いていましたが、Svelte 3の安定版リリースを発表できることを大変嬉しく思っています。これは、Svelteコミュニティの多くの人々による数百時間に及ぶ作業の成果であり、ベータテスターからの貴重なフィードバックが設計のあらゆる段階で役立ってきました。

気に入っていただけると思います。

Svelteとは何か？

Svelteは、ReactやVueのようなコンポーネントフレームワークですが、重要な違いがあります。従来のフレームワークでは、宣言型のステート駆動型コードを書くことができますが、代償があります。ブラウザは、仮想DOMの差分比較などの手法を使用して、これらの宣言型構造をDOM操作に変換するために追加の作業を行う必要があり、フレーム予算を圧迫し、ガベージコレクタに負担をかけます。

代わりに、Svelteはビルド時に実行され、コンポーネントをDOMを直接更新する非常に効率的な命令型コードに変換します。その結果、優れたパフォーマンス特性を持つ大規模なアプリケーションを記述することができます。

Svelteの最初のバージョンは、仮説の検証、つまり、目的特化型のコンパイラが堅牢なコードを生成し、優れたユーザーエクスペリエンスを提供できるかどうかを検証することに重点を置いていました。2番目のバージョンは、いくつかの点を整理した小さなアップグレードでした。

バージョン3は大幅な改良です。過去5～6ヶ月間の焦点は、優れた開発者エクスペリエンスを提供することにありました。他のフレームワークと比べて大幅に少ないボイラープレートコードでコンポーネントを作成できるようになりました。全く新しいチュートリアルを試してみてください。他のフレームワークに慣れている方は、きっと驚かれると思います。

そのためには、まず、最新のUIフレームワークの中核にある概念であるリアクティビティを再考する必要がありました。

リアクティビティを言語に取り込む

古いSvelteでは、`this.set`メソッドを呼び出すことで、ステートが変更されたことをコンピュータに通知していました。

const { const count: anycount } = this.get();
this.set({
	count: anycount: const count: anycount + 1
});

これにより、コンポーネントが反応します。ちなみに、`this.set`は、従来の（フック以前の）Reactで使用される`this.setState`メソッドとほぼ同じです。

const { const count: anycount } = this.state;
this.setState({
	count: anycount: const count: anycount + 1
});

(上記のビデオで説明しているように、Reactはリアクティブではないという点で)重要な技術的な違いはありますが、概念的には同じです。

ステートを全く異なる方法で処理するフックが登場したことで、すべてが変わりました。多くのフレームワークが独自のフック実装を試行し始めましたが、すぐにそれは私たちが進むべき方向ではないと結論付けました。フックには興味深い特性がありますが、不自然なコードも含まれており、ガベージコレクタに不要な負担をかけます。組み込みデバイスやアニメーションが多いインタラクティブなアプリケーションでも使用されるフレームワークにとっては、これは良くありません。

そこで一歩下がって、どのようなAPIが私たちにとって最適なのか自問自答し…そして、最高のAPIはAPIがないことだと気づきました。単に言語を使うことができるのです。`count`という値、そしてそれに依存するすべてのものを更新するのは、これほど簡単です。

let count: numbercount += 1;

コンパイラであるため、バックグラウンドで代入を操作することで実現できます。

let count: numbercount += 1;
const $$invalidate: <number>(name: string, value: number) => undefined$$invalidate('count', let count: numbercount);

重要なのは、プロキシやアクセサを使用することによるオーバーヘッドや複雑さなしに、これらすべてを実行できることです。ただの変数です。

新しいルック

コンポーネントだけでなく、Svelte自体も新しいルックアンドフィールになっています。Achim Vedamによる素晴らしいデザイン作業のおかげで、新しいロゴとウェブサイトが作成されました。ウェブサイトはsvelte.technologyからsvelte.devに移行しました。

また、タグラインも「魔法のように消えるUIフレームワーク」から「サイバネティックに強化されたウェブアプリ」に変更しました。Svelteには、優れたパフォーマンス、小さなバンドルサイズ、アクセシビリティ、組み込みのスタイルカプセル化、宣言型トランジション、使いやすさ、コンパイラであるという事実など、多くの側面があり、どれか1つに焦点を当てることは、他の側面に不公平です。「サイバネティックに強化された」という表現は、私たちのツールが私たち自身の知的な拡張機能として機能するべきだというSvelteの包括的な哲学を喚起することを意図しており、レトロでウィリアム・ギブソン風なひねりを加えています。

バージョン2からのアップグレード

既存のSvelte 2ユーザーの方は、手動でのアップグレードが必要になります。今後数日以内に移行ガイドとsvelte-upgradeの更新版をリリースします。これにより、プロセスを自動化するための最善の努力が払われますが、これは重要な変更であり、すべてが自動的に処理できるわけではありません。

これは軽々しく考えていません。Svelte 3を体験していただければ、なぜ過去のやり方から脱却する必要があったのかご理解いただけると思います。

今後の予定

このリリースは大変な作業でしたが、まだ終わりではありません。よりスマートでコンパクトなコードを生成するための多くのアイデアがあり、長い機能ウィッシュリストがあります。Sapper（Next.jsスタイルのアプリフレームワーク）は、Svelte 3を使用するように更新中であり、Svelte Native（SvelteでAndroidおよびiOSアプリを作成できるコミュニティプロジェクト）は順調に進展していますが、コアからのより完全なサポートが必要です。他のフレームワークのように、エディタ拡張機能、構文ハイライター、コンポーネントキット、デベロッパーツールなどがまだ豊富ではありませんが、これを修正する必要があります。本当にファーストクラスのTypeScriptサポートを追加したいと考えています。

しかし、今のところ、Svelte 3はウェブアプリを構築するための最良の方法だと考えています。チュートリアルを1時間かけて試してみてください。きっと納得していただけると思います。どちらにしても、DiscordチャットルームとGitHubで皆さんとお会いできるのを楽しみにしています。どなたでも歓迎です、特にあなたを。