質問やフィードバックがありましたら、フォームからお願いします
本文は台湾華語で、ChatGPT で翻訳している記事なので、不確かな部分や間違いがあるかもしれません。ご了承ください
1. 注目度が持続的に上昇
State of JS の調査によれば、Svelte は2019年にアンケート項目に含まれた際、満足度は88%（React 89%、Vue 87%）でしたが、今年は89%に上昇し、満足度1位のフロントエンドフレームワークとなりました。
また、2019年には使用率が8%で6位だったのが、2020年には15%に増え、4位にランクアップしました。これは、ますます多くの人々がこのフロントエンドフレームワークに注目していることを示しています。
2. 入門しやすく、扱いやすい
Svelte の構文はほぼHTMLと完全に互換性があり、{#if} や {#each} といったテンプレート構文は、.ejs や .pug のようなものを書いたことがある方にとっては非常に理解しやすいものです。Svelte の構文は心的負担を軽減することを目的として設計されているため、初心者でも基本的な概念を理解すればすぐに使いこなせるようになります。Svelte コンポーネントはこのようになります。
<script>
export let prop; // prop をこう宣言
let count = 1; // 変数はこう宣言
onMount(() => { // ライフサイクルメソッド
count++; // 変数の値を変更するとコンポーネントが更新される
})
</script>
<style>
p { font-size: 14px }
</style>
<!-- 変数は {} で囲む -->
<p>{count}</p>
<!-- 属性の渡し方 -->
<Component count={count} />hooks の概念を別途学ぶ必要もなく、コンポーネントの見た目を簡単に理解できます。また、Svelte はコンパイル時にハッシュを追加するため、CSSの命名衝突を心配する必要もありません。これらは全て Svelte の実装に組み込まれているため、追加のローダー（css-module）を使う必要もありません。
もともとバックエンド開発を主に行っていた方が、急遽フロントエンドページの開発が必要になった場合、Svelte は非常に扱いやすく、迅速に開発に取り組める優れたツールです。
3. バンドルサイズが小さい
React や Vue と比べて、Svelte は先にコンパイルしてからコードを生成するため、コンパイル最適化や依存追跡のメカニズムを実現できます。興味のある読者は、著者自身が書いた「Virual DOM is pure overhead」を参考にしてください。そこでは、DOM APIを直接操作することを避けて宣言的な効果を達成するためには、パフォーマンスを犠牲にしなければならないことが説明されています。React の例で言えば、Virtual DOM と diff メカニズムがそれに当たります。diff のコストを十分に小さくし、複数のプラットフォームに互換性を持たせるために、React はレンダーツリーを記述するためにより軽量なメカニズム、すなわち Virtual DOM を必要とします。
大規模なアプリケーションでパフォーマンスの問題に直面した場合、開発者が自分でパフォーマンスを調整できる余地を持つために、React は useMemo や shouldComponentUpdate などのさまざまな最適化メカニズムを提供しています。
Svelte には Virtual DOM の概念がなく、最も重要な依存追跡メカニズムも静的な時期に分析されています。そのため、ランタイムのバンドルサイズは React や Vue よりもはるかに小さく、中小規模のアプリケーションにおいては Svelte がしばしばより小さなバンドルサイズと優れたパフォーマンスを持つことを意味します。
4. 内蔵のトランジションとアニメーション機能
Svelte には内蔵のトランジション機能があります。開発において一般的なシーンとの統合が非常に良好で、Svelte には内蔵のトランジションメカニズムもあり、transition というディレクティブを使って遷移効果を実現できます。Svelte は、いつ遷移効果（入場・退場）を実行すべきかを判断します。
Svelte ではこのように書くことができます：
<script>
import { scale } from "svelte/transition";
import { onMount } from "svelte";
let toggle = false;
onMount(() => {
setInterval(() => {
toggle = !toggle;
}, 2000);
});
</script>
<main>
{#if toggle}
<h1 transition:scale>Hello World</h1>
{/if}
</main>{#if toggle} が true のとき、h1 がレンダリングされ（入場）、false のときは削除されます（退場）。transition:scale を追加すると、Svelte は適切なタイミングでトランジションを実行します。
React の場合、通常は react-transition-group を使用する必要があります。そうでなければ、toggle && <Component /> と書くと、toggle が false のときにコンポーネントが直接 unmount され、トランジションが正常に実行されません。または、react-spring を使用して、より高度なアニメーションインタラクションを実現することもできます。
ここまで見ると、Vue 開発者は「何がそんなに珍しいのか」と思うかもしれません。Vue も内蔵のトランジションメカニズムを持ち、v-if の条件によって対応するトランジションが実行されます。しかし、Vue ではクラス名とトランジションの実装をCSS内で独自に定義する必要があるのに対し、Svelte では宣言的な方法で行えるため、CSSでクラス名を別途定義する必要がありません。
「結局、直接JavaScriptでインラインスタイルを変更する、性能が悪すぎる方法を使うだけだろう」
実際、Svelte は動的に CSS キーフレームを生成し、アニメーションの元コードはここにあります：
function go() {
const {
delay = 0,
duration = 300,
easing = linear,
tick = noop,
css
} = config || null_transition;
if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
...
}ここでの create_rule は全体のトランジションメカニズムの核心で、背後の実装は stylesheet.insertRule を介して行われます。例えば、以下のようにトランジションを定義したとします。
function myTransition(node) {
return {
css: t => `
transform: scale(${1 - t});
`;
}
}実際には、以下のようなアニメーションキーフレームが生成されます（insertRuleを介して）：
@keyframes svelte_hash_animation_name {
0% {
transform: scale(0);
}
10% {
transform: scale(0.1);
}
20% {
transform: scale(0.2);
}
30% {
transform: scale(0.3);
}
...
}そして、アニメーションを実行するDOMノードに追加されます。このようにして、各フレームごとにインラインスタイルを変更することによる無駄な性能低下を避けることができます。
クロスフェードとFLIP効果の実装が容易
具体的な例を用いた方が理解しやすいため、ページ内のボタンをクリックして実際の効果を見てみてください：
クリックすると、ラベルが現在の位置から目的の位置に遷移し、最終位置で停止します。この効果は Svelte を使って簡単に実現でき、ラベルをクリックすると他のラベルの位置も遷移することがわかります。これにより、インタラクションがよりスムーズに見えるようになります。このテクニックは Svelte の中でも実装されています。
欠点
ここまでの利点を語った後、次は自身の経験を基に使用上の欠点についてお話しします。
1. コンパイル時に多くの処理が行われる
例えば、Svelte は静的な時期に依存追跡を行ったり、生成されたコードをデバッグしようとすると、奇妙な箇所を調整するのが難しくなることがあります。
また、HTML に慣れている開発者にはそれほど感じないかもしれませんが、新人にとっては Svelte コンポーネントは HTML に似ているが異なる点があるため、例えば {} 構文やリアクティブ変数などが混乱を招くかもしれません。
Svelte の事前コンパイルの特徴は、Vue のように <script> 内にライブラリを直接インポートしてすぐに使用できるわけではなく、vite や webpack などのツールを経由する必要があることを意味します。
2. Svelte が定義するコンポーネントフォーマットに従う必要がある
Svelte コンポーネントを作成するには、Svelte のコンポーネントフォーマットに従って記述する必要があります。React では、すべてのコンポーネントが JavaScript ファイルであり、合法な JavaScript であればどんなものでも React コンポーネントを記述できます。
3. 他のフロントエンドフレームワークと比べてリソースが少なく、エコシステムが未成熟
最近 Svelte のリソースは増え続けていますが、依然として英語が主流であり、中国語のリソースは相対的に少ないです。そのため、問題が発生したときに解決策を見つけるのが難しく、他のフロントエンドフレームワークほど解決策が整っていないのが現状です。この点は時間が解決するしかなく、またはみんなで力を合わせて Svelte に関連するリソースをもっと創造していく必要があります！
4. 使用率は依然として低い
多くの企業にとって、Svelte の使用率は依然として低く、就職活動においては最良の選択肢ではないかもしれません。
まとめ
Svelte は他のフロントエンドフレームワークとは明確に異なるポジショニングを持ち、シンプルな構文、コンパイル思想、コードの記述量削減、バンドルサイズの小ささなどの利点によって、近年注目を集めています。私自身はこの多様性が好きで、必ずしも全ての人に好まれるわけではないですが、思想の衝突がさらなる進歩やインスピレーションをもたらすと考えています。2021年の新年を迎えるにあたり、ぜひ自分が慣れ親しんだフロントエンドフレームワークを一旦脇に置き、2020年に満足度1位となった Svelte を試してみてはいかがでしょうか！
Svelte に興味がある方は、私が過去に書いた記事も参考にしてみてください。
この記事が役に立ったと思ったら、下のリンクからコーヒーを奢ってくれると嬉しいです ☕ 私の普通の一日が輝かしいものになります ✨
☕Buy me a coffee