🔥

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

2022/03/10に公開

3件

概要

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

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

結局Svelteとは

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

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配下のコードはいつでも変わる可能性があります。