Svelteの根本部分を簡単に理解する

概要

Svelteにはsvelte/templateの様にSvelteでのアプリ開発をすぐに始められる様なテンプレートや、より多くの機能を持ったSveltekitの様な強力なフレームワーク(2022/3/10現在Beta)が既に存在しています。

しかし、この様なツールはとてもとても便利な一方、Svelteが結局何者なのかという根本的な部分を隠してしまう側面もあるかと感じています。

既にSvelteとは何か(Svelte=コンパイラ)説明する記事はたくさん存在するのですが、簡単なコードを使うことでより直感的に理解できると思い記事を書いてみました。

結局Svelteとは

上記でも記載したのですが、結論Svelteはコンパイラです。

コンパイラとはプログラミング言語（高級言語）で書かれたコンピュータプログラムを、コンピュータが解釈・実行できる形式に一括して変換するソフトウェア。

コンパイラ（compiler）とは - IT用語辞典 e-Words

Svelteの場合、Svelteの独自記法をブラウザの理解できる形(JavascriptとCSS)に変換してくれます。

コードで理解する

下記の様なJavaScriptファイルを作成します。(npmでsvelteを既にインストール済みの想定)

svelte-test.js

import * as svelteCompiler from 'svelte/compiler'

// (1) Svelteの独自記法
const SvelteComponent = `
<script>
  let text = "word";
</script>

<h1 class="greeting">Hello {text}</h1>

<style>
  .greeting {
    color: red;
  }
</style>
`

// (2) 独自記法をコンパイルする
const { js, css } = svelteCompiler.compile(SvelteComponent)

console.log(js.code)
console.log(css.code)

上記の簡単なJavaScriptのコードを見て頂くとわかりますが、(1)Svelteの独自記法を(2)コンパイルすることでブラウザの理解する事ができるjsとcssを返してきます。

コンパイル後のコード

下記コードの中身を見てみるとそれぞれ普通のcssとJavaScriptである事がわかります。

css.codeの中身

.greeting.svelte-9led3h {
color:red
}

js.codeの中身

/* generated by Svelte v3.46.4 */
import {
	SvelteComponent,
	append_styles,
	attr,
	detach,
	element,
	init,
	insert,
	noop,
	safe_not_equal
} from "svelte/internal";

function add_css(target) {
	append_styles(target, "svelte-9led3h", ".greeting.svelte-9led3h{color:red}");
}

function create_fragment(ctx) {
	let h1;

	return {
		c() {
			h1 = element("h1");
			h1.textContent = `Hello ${textHello}`;
			attr(h1, "class", "greeting svelte-9led3h");
		},
		m(target, anchor) {
			insert(target, h1, anchor);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(h1);
		}
	};
}

let textHello = "word";

class Component extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, null, create_fragment, safe_not_equal, {}, add_css);
	}
}

export default Component;

これを単純に下記の様にする事で、targetの箇所で期待した実装を表現してくれます。

// Componentはの定義は上のjs.codeの中身を参照
const component = new Component({
	target: document.querySelector('#test'),
	props: {
		greeting: 'world'
	}
});

結果

その他

• compile時のいろいろなオプションはこちらを参照してください
• compile時の挙動や使用するParserに関してはこちらの記事がわかり易く説明してくれていました。それ以上理解をする場合は実際のcompiler配下のソースコードを追うのが良いかと思います。
• js.code中で使用されているSvelteComponentやその他のinternal関数・オブジェクトはこちらから実際の実装を追う事ができます。

※ コード中のコメントにも記載されていますがinternal配下のコードはいつでも変わる可能性があります。

参考資料

• The easiest way to get started with Svelte: 公式のブログで紹介されている最速でSvelteで開発を始める方法
• Svelte Document: 公式のドキュメント
• Svelte Turtorial: 公式のチュートリアル
• Sveltekit: Svelteのフレームワーク