スクリプトのお勉強

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

-スクリプトのお勉強

執筆者:

関連記事

小ネタ: Ansible , with_itemsをloopに変える方法

とっても小さい小ネタです。 Ansible 2.4(今現在) -> Ansible 2.9に変えたい Ansibleを使用していますが、だいたい2.4ぐらいを使っています。流石にバージョンアップしない …

顔画像のモザイク方法(python + OpenCV + face_recognition)

Python3での顔画像モザイク方法 python3での顔画像モザイクの方法を調べてみました。 仕事とは関係なく、単なる趣味だったりしますが。。 この内容で、Djangoと統合する予定です。 Open …

pipenv + Apache + Django起動設定

仕事でwebアプリケーションを作成しています。 Djangoで作成し、webサーバをApache、環境をpipenvで設定したpython3環境上で動かす予定です。 Apacheが起動するまでに、苦労 …

Mojolicious XML-RPC Pluginの開発(1)

はじめに 最近、お仕事関連で、perlとWebアプリケーションを触っています。 両方一度にお勉強、ということで、perlのWAF(Webアプリケーションフレームワーク)を調べてみようと思いました。 こ …

SPAMチェック for OCN の開発

前回、Thunderbirdプラグインの概要を書いたので、今回は開発したプラグインについて書きます。 SPAMチェック for OCNとは 以下の機能を持ったThunderbirdのアドオン(プラグイ …

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