スクリプトのお勉強

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

-スクリプトのお勉強

執筆者:

関連記事

使えるチートシート一覧

チートシートとは 普段使うコードとか、よく忘れやすい、コピペするコードを集めた情報です。 自分が使う言語のチートシートを書いておきます。 チートシート集 URL内容https://github.com …

Mojolicious XML-RPC Pluginの開発(2)

はじめに 「Mojolicious XML-RPC Pluginの開発」のその2です。 本内容では、前回の内容を踏まえ、XML-RPC実装を、Mojoliciousのプラグイン機能を使用して実装しよう …

no image

GLP-1 メディカルダイエット 58日目

メディカルダイエットして58日目の記録をしておこうと思います。 9回目。 今回は左腹(中部)に打ちました。痛いのはいまだに慣れない。。 土曜にゲットしてした 渋谷に行ってきたが、そこの医院には相変わら …

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

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

Vue.js 導入編

1.はじめに 近年、web関係で「クライアントサイドJavaScript」というのがトレンドになっているそうです。 「クライアントサイドJavaScript」と、従来のWebアプリケーションとの違いは …

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