概要
こちらはsvelteについての記事です。svelteは2016年に開発されたフレームワークです。
読みは多分、スヴェルトです。
こちらのページの「Awareness, interest, and satisfaction ratio rankings」において、vueよりも上位のフレームワークsvelte。ほぼ日本語の情報がなかったので翻訳しまとめたものをこちらに記載します。
今後、果たしてどうなるかはわかりませんが新しいjsのフレームワークを使用してみたい方に参考になると嬉しいです。
svelteって何？
svelteは高速Webアプリケーションを構築するためのツールで、ReactやVueなどのJavaScriptフレームワークに似ており滑らかでインタラクティブなユーザーインターフェイスを簡単に構築できるようにするという目標を共有しているとのこと
ReactやVueとの相違点
Svelteは、実行時にアプリケーションコードを解釈するのではなく、ビルド時にアプリを理想的なJavaScriptに変換します。 これは、フレームワークの抽象化のパフォーマンスコストを支払わず、アプリを最初にロードするときにペナルティが発生しないことを意味します。 Svelteでアプリ全体をビルドすることも、既存のコードベースに増分的に追加することもできます。 従来のフレームワークへの依存のオーバーヘッドなしで、どこでも動作するスタンドアロンパッケージとしてコンポーネントをexportすることもできます。
こちらより引用
ちなみにロゴはこんな感じです。
svelteの特徴
少ないコードでかける（Write less code）
例えば、2つの入力ボックスに入力した結果の和を出力したい場合、Reactなら442文字、Vueなら263文字のところsvelteなら145文字出かける
詳細はこちら
仮想DOMではない（No virtual DOM）
「仮想DOMが早いというのは神話でしかない」とのスタンスを元にsvelteは仮想DOMを使用していない
詳細はこちら
真にリアクティブ(Truly reactive)
Svelteは、ReactやVueのようなコンポーネントフレームワークだけれど、宣言型の状態駆動型コードを記述ではなく、ビルド時に実行され、コンポーネントを非常に効率的な命令コードに変換し、DOMを外科的に更新するとのこと。
ただ、まだ完成にはいたっていないとのこと。
詳細はこちら
コード例
以下は公式ドキュメントより引用します
データをhtmlに出力するコード
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>
cssのスコープについてのコード
<script>
import Nested from './Nested.svelte';
</script>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
<p>These styles...</p>
<Nested/>
については別ファイルのコンポーネント、こちらでは省略させていただきます。
この場合、cssが当たるのは「These styles...」のみ。
つまりコンポーネントごとにスコープされる。
ボタン押下時に文言を変えるコード
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
svelteを触ってみたい方へ
チュートリアルがありますので、こちらで触ってみてください
https://svelte.dev/tutorial/basics
まとめ
svelteについて今回は記述させていただきました。
こちらのフレームワークがどの程度、使用されるかはわかりかねますが、何らか参考になれば嬉しいです。
お読みいただきありがとうございました。
参考
公式ドキュメント