はじめに

普段はフロントエンドのJavaScriptフレームワークはVue.jsやReact.jsを多用しています。しかし、最近、データの分析結果をPython DjangoやFlaskで可視化するダッシュボード的な平易なWebアプリを作ることが多く、もうちょっと軽量なフロントエンド向けのフレームワークはないものか？と探していました。

ブログを漁ってゆくとどうやらスベルトというフレームワークが軽量・高速でいいらしいということがわかりました。何よりもうれしいのは実装コード量が少なくて良いことです。

ということでさっそく触ってみました。以下は、そのスクラップになります。

環境構築の仕方

Svelte(スベルト)単体開発環境

• あらかじめnode.jsをインストールしておきます
  • わたしの普段使いのMacにはnode.jsとnpmがすでにインストールしてあります

$ node --version
v14.15.0
$ npm --version
6.14.8

• SvelteのREPLページを開きます
  • https://svelte.dev/repl
• ダウンロードボタン［↓］でZIPファイルをダウンロードします
  
• ダウンロードしたZIPファイルを適当なフォルダに解凍します
• 解凍先パスでSvelteの依存関係ライブラリをインストールします

$ cd svelte-app
$ npm install

• 開発用のサーバを起動します

$ npm run dev

• ブラウザで確認します
  • URL：http://localhost:5000/

Svelte フレームワークSapper開発環境

• webpackハンドラのSapperのテンプレートをダウンロードします

$ npx degit "sveltejs/sapper-template#webpack" my-app

• 依存関係ライブラリをインストールします

$ cd my-app
$ npm install

• TypeScriptを有効にします

$ node scripts/setupTypeScript.js

• ブラウザで確認します
  • URL：http://localhost:3000/
    
• ディレクトリを追加します

$ cd src/routes
$ mkdir test1

• TypeScriptコードを実装します
  • パス：/my-app/src/routes/test1/index.svelte
  • コード

<script lang="ts">
  let count: number = 0
  const increment = () => count += 1
	let isActive: boolean = false
	const handleActiveClick = () => isActive = !isActive
</script>

<span class="counter">Count: {count}</span>
<button on:click={increment}> + </button>
<button class={isActive ? 'active' : ''} on:click="{handleActiveClick}">いいね</button>

<style>
  .counter {
    color: rgb(0, 23, 128);
    font-size: 20px;
  }
 .active{
    background: rgb(167, 31, 185);
    color:white;
 }
</style>

• ブラウザで確認します
  • URL：http://localhost:3000/test1