スクリプトのお勉強

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を作ってみようと思います。

-スクリプトのお勉強

執筆者:

関連記事

seaborn + Pandas + Python によるグラフ描画(その2: グラフ描画編)

前回の続き 前回の続きです。 折れ線グラフ まずは折れ線グラフを描画したいと思います。 描画するのは以下です。 運用商品(4つ)日経平均 以下で起動します。引数(dataset-2017-201908 …

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

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

yoyo-migrationsを使ってみる

勉強用に、PythonでPostgresqlを制御しようと思います。 その前に、Postgresqlの設定と、マイグレーションをしようかと思います。まずyoyo-migrationsを使用します。 y …

IPS/IDS(Suricata)のインストール

とても遅まきながら、暇なのでIPS/IDSをこのサイトに組み込んでみます。 Suricata SuricataというOSSのIPSがあるそうなのでインストールしてみます。 環境 CentOS7(7.9 …

CentOS7 + Django2.2でSQlite3を使用する方法

そのままだとエラーになる 素のCentOS7で、SQLite3を使用して、Djangoアプリを起動すると以下のエラーになります。 File “/opt/webapps/django_upload/.v …

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