【JavaScript】UIフレームワークのSvelteを触ってみる

JavaScript

こんにちは、しきゆらです。
今回は、Tauriを触っていて知ったJavaScriptフレームワークであるSvelteをちょっとだけ触ったのでメモしておきます。

実践 Svelte入門 エンジニア選書

実践 Svelte入門 エンジニア選書

Kyohei Hamaguchi (tnzk), 小関 泰裕
3,665円(09/11 15:05時点)
発売日: 2023/04/28

Amazon楽天市場

Amazonの情報を掲載しています

Svelteとは

SvelteはJavaScriptのフレームワークで、WebアプリケーションなどのUIを構築するためのライブラリになります。
ReactなどのようにUIを作るための物ですが、違いとしては仮想DOMを使わなかったり、ブラウザ側で処理するのではなくビルド時にJavaScriptコードに変換する点です。

Svelteのブログによると、仮想DOM自体のパフォーマンスに価値があるとしつつ、仮想DOMは純粋なオーバーヘッドだとまで言っています。

Web上からも試すことができるので、ちょっと試してみることも可能です。

Svelte入門

svelteファイルの構成

内部的な違いはあれこれあるようですが、コードとしての違いはコンポーネントを.svelteファイルとして作成し、1つのファイル内にHTML・CSS・JavaScriptをまとめて記載できます。

.svelteファイルの中身は以下のような構造になっています。

<script>
  // JSはここに記載する
</script>

テンプレート

<style>
 /* スタイルシート */
</style>

それぞれのブロックは記載されたコンポーネント内にのみ影響を与え、外部には影響しません。 他コンポーネントで同じ変数を定義したとしても、お互いの情報を書き換えたりしないので、コンポーネント1つに集中できるのが良い感じです。

他のコンポーネントを呼び出す

他にimgタグを持つSvelteLogoというコンポーネントがあったとすると、以下のように呼び出せます。
なお、SvelteLogoという名前でインポートしていますが、ファイル名に準じているわけでもないので、ファイル名とインポートしたコンポーネント名は一致していなくても良いようです。

<script>
	import SvelteLogo from "./SvelteLogo.svelte"
</script>

<div class="logo">
	<SvelteLogo />
</div>

コンポーネント名は先頭が大文字である必要があり、閉じタグが必須になっています。

HTMLを動的に記述する

PHPのように、配列の要素分だけHTML要素を作りたい、ということがあるかと思いますが、Svelteのテンプレートにはその記法を備えてます。
いくつかの種類があるが、よく使いそうなものをメモしておきます。

詳しくはこちら。

{#if}ブロック

{#if}ブロックを使うと、条件によって表示する部分を切り替えできます。

<script>
	let loggedIn = false;

	function toggle() {
		loggedIn = !loggedIn;
	}
</script>

<p>現在値: {loggedIn}</p>

{#if loggedIn}
	<button on:click={toggle}>ログアウト</button>
{/if}

{#if !loggedIn}
	<button on:click={toggle}>ログイン</button>
{/if}

上記は{#if}ブロックを2つ使っているが、{:else}ブロックを使ってシンプルに記載できます。

<!-- テンプレート部分のみ -->
{#if loggedIn}
	<button on:click={toggle}>ログアウト</button>
{:else}
	<button on:click={toggle}>ログイン</button>
{/if}

{:else}だけでなく{:else if}ブロックもあります。

{#each}ブロック

{#each}ブロックを使うことで、配列の要素を繰り返して表示できます。

<script>
	let products = [
		{name: "商品A", price: 100},
		{name: "商品B", price: 500},
		{name: "商品C", price: 1000},
	];
</script>

<ul>
	{#each products as product}
		<li>{product.name} / {product.price}円</li>
	{/each}
</ul>

{#each 配列 as 変数}のように記載すると、配列の要素を一つずつ変数へ代入して{/each}までの間が繰り返し処理されます。
{#each} ~ {/each}の中であれば、他の変数と同様に{式}のように展開できるのでさらに値を処理することも可能です。

また、{#each}ブロックの中に{:else}を書くと、配列がからの場合の表示を指定できる。

<script>
	let products = [];
</script>

<ul>
	{#each products as product}
		<li>{product.name} - {product.price}円</li>
	{:else}
		 <li>商品がありません</li>
	{/each}
</ul>

その他、コンポーネント間でのデータの受け渡しや属性の動的付与、TypeScriptで書くなどいろいろありますが、今回はここまで。
チュートリアルやドキュメントはこちらにあります。
割とシンプルに書かれているのと、環境を作らずともWeb上からも試すことができるので、触ってみていただければと思います。

実践 Svelte入門 エンジニア選書

実践 Svelte入門 エンジニア選書

Kyohei Hamaguchi (tnzk), 小関 泰裕
3,665円(09/11 15:05時点)
発売日: 2023/04/28

Amazon楽天市場

Amazonの情報を掲載しています

今回は、ここまで。

おわり

Posted by しきゆら