Svelte触ってみた。

前々から気になっていたJsフレームワークのSvelteをHello Worldがてら触ってみました！
複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツールであるRollupの製作者
Rich Harrisさんが作っています。

今日のコード

codesandbox


#### App.svelte
<script>
  // コンポーネントをインポート
  import Button from "./Button.svelte";

  // 変数を定義
  let name = "World";
  let show = true;

  // クリックイベント関数の指示
  function isShow() {
    show = !show;
  }
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
// if文で分岐
{#if show}
  // 変数を表示
	<h1>Hello {name} !!</h1>
{/if}
  // コンポーネントを配置
	<Button />

  // 表示/非表示ボタンの配置
  <button on:click={isShow}>
    SHOW/HIDE
  </button>
</main>


#### Button.svelte
<script>
  // 変数を定義
	let count = 0;

  // クリックイベントを定義
	function handleClick() {
    // countを1増加
	  count += 1;
	}
</script>

<style>
	button {
	  background: #ff3e00;
	  color: white;
	  border: none;
	  padding: 8px 12px;
	  border-radius: 2px;
	}
</style>
// クリックイベントを定義
<button on:click={handleClick}>
  // 1ならtimeをそれ意外なら{数字}timesを表示
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

見た目はscript, html, styleに分かれていてVueを思い出させるような感じですね！
Vue,React,Angularはコンパイル後の生成物(ランタイム)上であれこれと動くように作られていますが、 SvelteはシンプルなJavaScriptにコンパイルする為、仮想DOMを使用せずともバンドルサイズを削減することでブラウザの負担を削減しようという考え方のフレームワークです。

まとめ

一番感じたのはコードが短く、とても簡潔にかけるイメージを持ちました。
今回は少ないコードなのでコンパイルの速さを実感することはできませんでしたが、全体的にミニマムで直感的にかけた気がします。
実務で使用するには少し勇気が必要ですが、趣味で何かを作る分にはサクッと使用できて良いのかなぁといった印象です！

ブログの投稿ログ

# 今日のコード

# まとめ

今日のコード

まとめ