svelteをチュートリアルしてみる

投稿日：2022年1月7日

年末の休みは、svelteのチュートリアルをしてみました。なんとなくやはりそう?なので。

svelteとは

Webアプリのフロントエンド(UI)用フレームワークです。要するにReactみたいなもんです。

特徴としては、以下だそうです。

記述量を少なくする
- HTMLやCSS、JavaScriptの記述と変わらないように書ける。
非仮想DOM
- あらかじめコンパイルしておく方針
本当のリアクティブ
- 変数の更新も「コンパイラ」としてシンプルに実行する。
- 例えば

count += 1;

は、コンパイラとしてはcountの加算をコンパイラ側でやりたいので、以下を記述するようにしてある。

count += 1; $$invalidate('count', count);

React.jsのような、関数型言語の意味のリアクティブやフックは採用しなかった。

感想

チュートリアルを終えての感想としては以下です。

なかなかいい感じ
- コードを簡単に書けそう
- React.jsみたいに、関数型言語が強調されてなくて分かりやすい。
ただし、大人数でこれを使うと、誰が何の状態をどう管理するかが決めきれなくて崩壊しそう。
- その点ではReactは徹底しているのでやりやすそう。

チュートリアルと共に

チュートリアルから始めました。

同時に、ローカルでも動作させようと思い、ここに書いてあるように、以下を行いました。

$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project
# to use TypeScript run:
$ node scripts/setupTypeScript.js
$ npm install
$ npm run dev

でsrc/App.svelteにチュートリアルのソースをコピペしながら動作させながら、理解を進める感じでやっていきました。

REST API呼び出し例(チュートリアル内)

チュートリアルで出た例で、REAT API呼び出し例は以下のようになります。

<script lang="ts">
  // API
  import { onMount } from 'svelte';
  let photos = [];
  onMount(async () => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
    photos = await res.json();
  });
</script>
<main>
<div class="photos">
    {#each photos as photo}
        <figure>
            <img src={photo.thumbnailUrl} alt={photo.title}>
            <figcaption>{photo.title}</figcaption>
        </figure>
    {:else}
        <!-- this block renders when photos.length === 0 -->
        <p>loading...</p>
    {/each}
</div>
</main>

要するにonMount内でREST APIを呼び出し、取り出した変数(photos)を描画するわけですが、結構直感的に分かりやすいです。

結構量がある

すぐ終わるのかと思ったら、ちょこちょことやっていたので、1週間はかかってしまいました。1時間かかると書いてましたが、思ったより分量があります。

おわりに

チュートリアルをやってみて、なかなかいい感じに見えました。

次は、svelte用のUIライブラリを使って、簡単なUIを作ってみようと思います。