この記事は「Eureka Advent Calendar 2020」7日目の記事です。

Hi. webチームのspiceです。

昨年から、Svelteというライブラリの注目度が上がっています。

2020年、Svelte界隈で話題になったBytemdを知っていますか？

Bytemdは、byteDance社が作成したSvelteで書かれたmarkdownエディタライブラリです。

単にSvelteで書かれたことだけでなく、UIフレームワークなしでも使うことができ、React向け/Vue向けのバインディングが用意されていることも注目を浴びました。

この記事では、Bytemdを題材に

• Svelteで書かれたコンポーネントがReact/Vueで上で動く仕組み

を探ります。

また、これ以降はSvelte,React,Vueの概要をご存知の方向けの内容になります。

それぞれについて知らない方は、公式サイトなどで概要を把握してからこの記事を読むことをおすすめします。

Svelte is compiler.

Svelteで書かれたコードは、ビルド時に全てVanilla JSになります。

ReactやVueで書かれたコンポーネントは、ブラウザのruntime時に、ライブラリを動作させるためのコードが必要になりますが、Svelteの場合はそのようなコードが必要ありません。

例えば、以下のようなSvelteで書かれたコンポーネント、Footer.svelteがあるとします。