Svelteに入門してみた

最近密かに話題になっているSvelteのドキュメントを見ながら、思ったことを書いていきます！

少ないコード量で書ける

Svelteのブログで紹介されていた項目です。(https://svelte.dev/blog/write-less-code)

ブログによると、Reactで442文字書かないといけない実装を、Svelteであれば145文字で書けるとあります。

ここではinputに紐づいたリアクティブな変数の扱いについてありますが、ReactではonChangeやuseStateを使って表現しなければいけませんが、Svelteではv-modelというディレクティブを変数に付与するだけで、リアクティブになってくれます。

充実のチュートリアル

公式サイトにはチュートリアルがあり、これを順番に進めていくとSvelteの基本的な書き方、考え方を学ぶことができます。

チュートリアルの画面では左側に説明、右側で自由にコードが書けて、その出力結果を見ることができ、ちゃんとできているか確認することができます。

左側の一番下のオレンジのボタン(Show me) を押すことで、もし詰まっても答えを見ることができるので、とても優しい設計となっています。

今回は、チュートリアルの中でも、すごい！と思ったパートを見ていこうと思います。

Inputの実装

冒頭でも紹介したように、やはりinput周りの実装の手軽さは流石だなと感じました！

<script>
   let name = 'world';
</script>

<input bind_value={name}>

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

上のコードは、inputを使った単純な実装ですが、明らかに少ないコード量であることがわかります。

具体的には、変数nameに関して、その変数をリアクティブに変化させるような関数や記述を一切していない直感的な実装であること、また、リアクティブな変数にする記述がディレクティブ(ここではbind:)を付与するだけというシンプルさです。

Vueのテンプレート構造にも少し似ているので、Vueを触ったことがある方は見やすい構造だなと感じるかもしれません。

If文の実装

SvelteのIf文もコード的に非常に見やすく、理解しやすい構造となってます。

<script>
  let x = 7;
</script>

{#if x > 10}
   <p>{x} is greater than 10</p>
   <p>{x} is greater than 10</p>
   <p>{x} is greater than 10</p>
{:else if 5 > x}
   <p>{x} is less than 5</p>
{:else}
   <p>{x} is between 5 and 10</p>
{/if}

PHPの書き方に似てますね。ReactではJSXの制約がありましたが、Svelteでは自由に条件式や条件結果を書くことができ、ストレスフリー設計だなと感じました。

デフォルトでトランジションが用意されている

Svelteにはディレクティブの一つにトランジションを設定してくれるものがあります。これを使えば外部ライブラリを用いることなく、遷移アニメーションを実現できます。

<script>
  import { fade, fly } from 'svelte/transition';
  let visible = true;
</script>

<label>
  <input type="checkbox" bind_checked={visible}>
   visible
</label>

{#if visible}
  <p in_fly="{{ y: 200, duration: 2000 }}" out:fade>
   Flies in, fades out
 </p>
{/if}

inとoutを設定することで、入ってくる方向や時間などを調整することができます。他にも複雑なアニメーションを設定できるライブラリがSvelteから提供されいます。

まとめ

Svelteはシンプルな実装ですが、ReactやVueに匹敵するくらいのパワーを持ったものだと感じました。

ぜひ使ってみてください！