4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-03-10

概要

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

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

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

結局Svelteとは

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

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

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

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

コードで理解する

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

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)コンパイルすることでブラウザの理解する事ができるjscssを返してきます。

コンパイル後のコード

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

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'
	}
});

結果

image.png

その他

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

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

参考資料

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?