ざっくり学ぶSvelte

Svelteとは

ReactやVueのようなコンポーネントフレームワークですが 仮想DOMを使用せずシンプルにかつ高速で動くフレームワークです。

https://svelte.dev/

環境構築

公式にある通り下記を実行します。

npx degit sveltejs/template my-svelte-project

作成されたプロジェクトに移動します。

cd my-svelte-project

プロジェクトに必要なプラグイン等をインストールします。

npm install

ローカル環境を起動します。

npm run dev

「http://localhost:5000」をブラウザで表示します！

あっという間ですね！

ファイル構成

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── build
│   │   ├── bundle.css
│   │   ├── bundle.js
│   │   └── bundle.js.map
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── rollup.config.js
├── scripts
│   └── setupTypeScript.js
└── src
    ├── App.svelte
    └── main.js

publicディレクトリはデプロイ時にあげるファイル一式です。
srcディレクトリはコンパイルされるファイルで実際この中で機能やページを作成していきます。

主な機能

変数

<script>
	let name = '名前';
</script>

<h1>Hello {name}!</h1>

変数の設定は普通のJavaScriptと変わりありません。呼び出すときは変数を波括弧で囲んであげます。

Reactive

<script>
	let count = 0;

	function clickHandler() {
		count += 1;
	}
</script>

<button on:click={clickHandler}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

イベントのフックになる要素にon:イベント={行いたい処理}を記述することで実現します。

クリック処理も簡単にできますね！

if文

{#if user.loggedIn}
	<button on:click={toggle}>
		Log out
	</button>
{/if}

{#if !user.loggedIn}
	<button on:click={toggle}>
		Log in
	</button>
{/if}

if文は出し分けしたい要素の上下に囲ってあげるだけで実現できます。

Each

<script>
	let fruits = [
		'apple',
		'banana',
		'strawberry'
	];
</script>

<ul>
	{#each fruits as item}
	<li>{item}</li>
	{/each}
</ul>

loop処理も何も迷わず簡単にかけますね！上記の場合だとfruitsがソースデータの配列です。itemはエイリアスです。

おわりに

実際色々書いてみましたがVueの書き方に近い印象がありました。

なので普段Vueを使用している人はそれほど困らずに使用出来るのかなと思います。

公式ページにはチュートリアルやサンプルが記載されておりまた実際コードを試しながら学べるのでとてもおすすめです！

VueやReactといったメジャーなフレームワークではないですがさくっと軽くて早いページを作成するにはちょうど良いのかもしれません！