Zenn
Open1

JavaScriptフロントエンドフレームワーク Svelte ことはじめ

Svelte
us-east-7us-east-7

はじめに

普段はフロントエンドの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ページを開きます
  • ダウンロードボタン［↓］でZIPファイルをダウンロードします
  • ダウンロードしたZIPファイルを適当なフォルダに解凍します
  • 解凍先パスでSvelteの依存関係ライブラリをインストールします
$ cd svelte-app
$ npm install
  • 開発用のサーバを起動します
$ npm run dev

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

  • webpackハンドラのSapperのテンプレートをダウンロードします
$ npx degit "sveltejs/sapper-template#webpack" my-app
  • 依存関係ライブラリをインストールします
$ cd my-app
$ npm install
  • TypeScriptを有効にします
$ node scripts/setupTypeScript.js

$ 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>