スクリプトのお勉強

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

投稿日:

年末の休みは、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を作ってみようと思います。

-スクリプトのお勉強

執筆者:

関連記事

(小ネタ) python3 date_range + step付き

ちょっと前に同じような感じのネタを。。 したような気がするのだが、まぉおいておこう。。 素のPython3で、日付にてfor文を回す方法 日付で分割して処理をしたいと思うときがあります。例えば、202 …

ワンライナーから使いそうなのを抜粋

ワンライナー多すぎ、、 https://linuxcommandlibrary.com/basic/oneliners は膨大なワンライナーがあっていいのですが、多すぎて、何が使えるかぱっと見分かりま …

Python3 – django-webtest

忙しいので断片だけ。。 DjangoでWebブラウザからアクセスする感じでテストする、やり方の一つです。以前にやったように、 Seleniumからやってもいいのすが、そこまでじゃない場合の単体テスト方 …

poetry installでJSONDecodeError

小ネタです。OSをアップデートしたので、その他もいろいろアップデートしようとしたらエラーになったので、メモとして書いておきます。 WSL2のUbuntuを 22.04 LTSにアップデート は、さほど …

VMware player(workstation) から WSL2に乗り換える

いままで、VMware player(今のVMWare Workstation Player)上で、作って確認していたけど、いちいち起動するのがだるいです。 ついでにやたらとリソースを使用するので、こ …

google オプトアウト Click here to opt-out.