---
title: svelte触ってみた
tags: 
author: [Tsumiki](https://convert.docswell.com/user/tsu-miki)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/2EV2Q9GXEQ.jpg?width=480
description: svelteのLT
published: December 23, 25
canonical: https://convert.docswell.com/s/tsu-miki/K74XN2-svelte-lt
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/2EV2Q9GXEQ.jpg)

Svelte触ってみた


# Page. 2

![Page Image](https://bcdn.docswell.com/page/57GRWZ8REL.jpg)

ある日の投稿


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4EQV3L9YJP.jpg)

なんでSvelte触ったんだっけ？


# Page. 4

![Page Image](https://bcdn.docswell.com/page/KJ4M1DXZE1.jpg)

2019年からずっと満足度高い


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LE18GZND7G.jpg)

概要っぽい話
・First release 2016
・v2: The magical disappearing framework 2018
・v3: Cybernetically enhanced web apps 2019
・TypeScript Support 2020
・SvelteKit beta / Japanese Document 2021
・SvelteKit 1.0 2022
Rich Harries(@Rich_Harris)


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GEWZK948E2.jpg)

触ってみた感想


# Page. 7

![Page Image](https://bcdn.docswell.com/page/47Z1Z929J3.jpg)

とにかく速い


# Page. 8

![Page Image](https://bcdn.docswell.com/page/YJ6LZKVDEV.jpg)

なぜこんなに速いのか


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GJ51WPD874.jpg)

No virtual DOM


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE3143MG75.jpg)

総当たりで変更点を見つけるのではなく、
コードから変更されうるものを見つけて挙動を変えている


# Page. 11

![Page Image](https://bcdn.docswell.com/page/8EDXQ46NJG.jpg)

No virtual DOM
仮想DOMは速いという神話を
完全に終わりにしよう
（思想強め）


# Page. 12

![Page Image](https://bcdn.docswell.com/page/V7PPLMYN78.jpg)

Library Size


# Page. 13

![Page Image](https://bcdn.docswell.com/page/2JV2Q9GYJQ.jpg)

内部で何をやってるか見てみる


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5EGRWZ8WJL.jpg)

Svelte compiler
・Javascript + HTMT + CSS
→ plain Javascript + scoped CSS
・No virtual DOM


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4JQV3L9Q7P.jpg)

Parse後の戻り値をとりあえず見る


# Page. 16

![Page Image](https://bcdn.docswell.com/page/K74M1DXYJ1.jpg)

No virtual DOM
・コンパイル時にcreate_fragmentという要素が作成され、その中に
DOM情報が書き込まれる
・scriptタグ内の全ての変数について、リアクティブに変更される部
分とされない部分を判断してコンパイル時に分けるようにしている
・変わりうるのであれば、それを$$invalidateとctxで繋げられるよう
にしている
https://svelte.dev/tutorial/basics


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LJ18GZNNEG.jpg)

個人的に思ったこと
・HTMLライクに書けるので非エンジニアでもコーディングできそう
・画期的だけどまだまだ実績の少ない言語
・LP、リッチなWebサイト、小〜中規模くらいまでのサービス・プロ
ジェクトなら使いやすそう
・コミュニティあったり盛り上がってはいるので今後も追っていく


