初投稿になります。システム事業部の金城です。
私は普段Vue.jsでのフロントエンド開発を行っています。
今回は最近知ったJavascriptのフレームワーク「svelte」についてチュートリアルを実施してみたので、一部紹介致します。

f:id:zenet-tech:20210317101500p:plain

Svelteとは

Svelteはjavascriptを使用するフロントエンドフレームワークです。

Svelte独自の特徴として以下が挙げられます。
・UIライブラリではなくコンパイラに分類されている。(Vue.jsはUIライブラリ)
・仮想DOMを使用していない。

svelteはコードをコンパイルし、ライブラリを使用していない純粋なJavascript,CSSに変換されます。そのため、ライブラリの読み込みが発生する他ライブラリと比較して表示速度が早くなります。

また、他のフレームワークと比較して構造が単純化されており、学習コストが低いことも特徴になります。

また、欠点もあり大きく以下が挙げられます。
・規模が大きい開発には向いていない印象を受けた。
(ライフサイクル等の必要な機能は都度宣言する必要があるため、ステップ数が多くなる傾向がある。)
・開発環境は他フレームワークと比べて資料が少ない。 (2016年に作成されたフレームワークのため、他より日が浅い)

Svelte チュートリアル

Svelteは公式サイトにチュートリアルが用意されており、1～2時間程で一通り実施可能です。

今回はこの中から基本的な内容を一部抜粋して紹介します。

1.変数の取得

■ソースコード

<script>
        let name = 'world';
</script>

<h1>Hello {name}!</h1>

■実行結果

<h1>Hello world!</h1>

Svelteの基本構文になります。
HTMLタグ内に括弧で変数を指定することで、直接呼び出せます。

2.変数の文言内にHTMLタグが仕込まれている

■ソースコード

<script>
    let string = `test zenet<strong>blog</strong>`;
</script>
<p>{@html string}</p>

■実行結果

<p>test zenet
    <strong>blog</strong>
</p>

変数の頭に@htmlを付与することで、変数内の文言をhtml要素として読み込みます。
ただし、ユーザから編集できる箇所に@htmlを使用するとユーザ側からhtmlの改変が可能となり、HTMLインジェクションの温床となるため使用は非推奨とされています。

例: inputタグの入力内容を表示するPタグの変数呼び出しに@htmlを付与する。

<script>
    let value = '';
</script>

<input bind:value={value}>

<p>{@html value}</p>

3.HTML要素に条件分岐、ループを挿入

■ソースコード

<script>
    let test = true;
    function changeTest() {
        test = false;
    }
</script>

{#if test}
<p>Test True</p>
{/if}

<button on:click={changeTest}>
    change
</button>

■実行結果

<p>Test True</p>

<button on:click={changeTest}>
    change
</button>

HTML要素の指定時に「{#if }{/if }」を挿入して条件分岐を再現できます。
上記のサンプルではボタン押下時に変数「test」の値がtrueからfalseに変化するため」、Pタグの文言が削除されます。

また、ループ処理の場合は「{#if }{/if }」を「{#each Array as Element }{/each }」に変更することで再現できます。

<script>
    let Tests = [1,2,3,4,5]
</script>

{#each Tests as test}
<p>Test{test}</p>
{/each}

■実行結果

<p>Test1</p>
<p>Test2</p>
<p>Test3</p>
<p>Test4</p>
<p>Test5</p>

4.変数・関数の再計算

■ソースコード

<script>
    let test3 = 0;

    let test1 = 0;
    $: test2 = test1 + 1;
    $: {
        test3 = test2 + 1;
    }
    function test1Plus() {
        test1 += 1;
    }
</script>
<button on:click={test1Plus}>
    count
</button>
<p>Number{test1}</p>
<p>Number{test2}</p>
<p>Number{test3}</p>

■実行結果

<!-- ボタン押下無し -->
<button on:click={test1Plus}>
    count
</button>
<p>Number0</p>
<p>Number1</p>
<p>Number2</p>

<!-- ボタン押下1回 -->
<button on:click={test1Plus}>
    count
</button>
<p>Number1</p>
<p>Number2</p>
<p>Number3</p>

<!-- ボタン押下5回 -->
<button on:click={test1Plus}>
    count
</button>
<p>Number5</p>
<p>Number6</p>
<p>Number7</p>

変数の直下に「$:」を定義することで、変数の更新時に「$:」内の式、または関数を実行します。
変数を指定している場合、HTML要素でそのまま指定可能です。

5.ライフサイクル

■ソースコード

<script>
    import { onMount } from 'svelte';

    let test = 0;

    onMount(() => {
        test = 1;
    });
</script>

<p>{test}</p>

ライフサイクルはVue.jsにも存在しますが、HTML要素の生成～破棄の特定のタイミングで実行される関数の設定で使用されています。
svelteでは以下の4種が用意されており、いづれも予めsvelteのライブラリからimportする必要があります。

svelte	vue.js	実行契機
onMount	created	ソースが生成される場合
onDestroy	destroyed	ソースが破棄される場合
beforeUpdate	updated	DOM要素が更新される場合
tick	-	任意のタイミングで呼び出し可能

後書き

今回は普段Vueを使用している自分が個人的に面白いと感じた基本的な内容を抜粋して紹介しました。
以下にURLを掲載致しますので、もし興味があれば触ってみてください。
(言語は英語のみですが、私は機械翻訳でチュートリアルを一通り実施しました。)
https://svelte.dev/tutorial/basics