2 023 / 10 / 05 SAW Vue ユーザーが Svelte に⼊⾨してみた Kyoto.js 2 0

$(whoami) • ⽒名: 加藤 宗⼀郎 (29歳) • ハンドルネーム: SAW • ⼤阪在住‧愛知出⾝ • Twitter: @azuki_eater • 得意分野 • Web アプリケーション開発 (Laravel, Vue) • 約 1年ぶりの登壇 • オフラインは約 3年ぶり

発表概要 Vue ユーザーが Svelte の基本機能を Vue と⽐較しながら紹介 3

Svelte とは • JavaScript フレームワークの 1つ • 仮想 DOM を利⽤しない • TypeScript も公式対応 • 近年最も熱いフレームワーク • 興味のあるフレームワーク 1位 • 2020年~2022年で 3年連続 1位 https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/

Vue とは • JavaScript フレームワークの 1つ • React, Angular についで広く利⽤されている • 仮想 DOM を利⽤ • Vue 3 で⼤きなアップデート • Composition API という新たな記法が追加 • TypeScript に公式対応 https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/

Vue と Svelte は記法が似ている • コンポーネント単位でビューとロジックを記載可能 • HTML, CSS, JavaScript を 1 つのファイルに記載 • データバインディングやイベントハンドラの登録の記法が類似 • Vue 3 の Composition API と類似 • Vue ユーザーに特に馴染みやすい (と思う)

Svelte のプロジェクトの作成 • Vite から Svelte のテンプレートを選択することで作成可能 • Vite: 様々なフレームワークに対応したフロントエンドの爆速ビルドツール • オプション --template に svelte を指定 • TypeScript を利⽤する場合は svelte-ts を指定 # npm を利用する場合 npm create vite project-name -- --template svelte # yarn を利用する場合 yarn create vite project-name --template svelte

コンポーネントの定義 • 1つのファイルをコンポーネントとしてビューとロジックを定義 • Vue では Single File Component (SFC) と呼ばれる • ビューの定義: HTML タグをテンプレートとして記述 • スタイルの定義: style タグ内に CSS を記述 • ロジックの定義: script タグ内に JavaScript を記述 • TypeScript の利⽤時は script タグに lang="ts" を指定

ビューテンプレートの記述 • テンプレート内にロジックの変数の内容を表⽰可能 • Svelte: {変数名} で表⽰ • Vue: {{ 変数名 }} で表⽰ • プロパティにロジックの変数の内容を反映が可能 • Svelte: プロパティ名={変数名} で反映 • Vue: v-bind:プロパティ名="変数名"

⽐較: ビューテンプレートの記述 let name = 'Jack'; let url = 'https://example.com';

Hello, {name}.

Click here

const name = 'Jack'; const url = 'https://example.com';

Hello, {{ name }}.

Click here

Svelte の場合 Vue の場合

変数のバインディング • バインディング: ビューとロジック内の変数を結びつける概念 • 双⽅向にバインディングが可能 • 変数の変更を DOM 要素に即座に反映 • などの変更をロジックの変数に即座に反映 • Svelte の場合は bind:プロパティ名={変数名} と明⽰的に記載 • ロジックからの変更は値を再代⼊しないと検知されない • Vue の場合は ref() で初期化した変数が双⽅向バインディングになる Hello, world. Hello, world. message テキストフォームの⼊⼒内容を 変数 message に即時反映 変数 message の変更内容を テキストフォームに即時反映

⽐較: 変数のバインディング let message = 'Hello';

{message}

import { ref } from 'vue'; const message = ref('Hello');

{{ message }}

Svelte の場合 Vue の場合

テンプレート内の条件分岐‧繰り返し • テンプレート内で条件に応じて表⽰内容を変更可能 • Svelte: {#if 条件式} 〜 {/if} ブロック • Vue: v-if ディレクティブ • 配列の要素に基づいて繰り返し表⽰が可能 • Svelte: {#each 配列 as 変数} 〜 {/each} • Vue: v-for ディレクティブ

⽐較: テンプレート内の条件分岐‧繰り返し let array = [0, 1, 2, 3, 4]; {#each array as item} {#if item % 2 === 0}

{item}: Even

{:else}

{item}: Odd

{/if} {/each} import { ref } from 'vue'; const array = ref([0, 1, 2, 3, 4]);

{{item}} :Even

{{item}} :Odd

Svelte の場合 Vue の場合

リアクティブステートメント • 依存する変数が変更された際に実⾏される⽂ • ⽂の先頭に $: を記述 • ブロックで囲むことで複数の⽂を実⾏可能 • Vue の computed と watch を⾜したような機能 • computed: 変数の値の変更に依存して値が再計算されるプロパティ • watch: 変数の値が変更された際に実⾏される処理

⽐較: リアクティブステートメントと computed let h = 170.0; let w = 60.0; $: bmi = (w / ((h / 100) ** 2)).toFixed(2);

cm

kg

BMI: {bmi}

import { ref, computed } from 'vue'; const h = 170.0; const w = 60.0; const bmi = computed(() => (w.value / ((h.value / 100) ** 2)).toFixed(2));

cm

kg

BMI: {{ bmi }}

Svelte の場合 Vue の場合

イベントハンドラの登録 • DOM イベントや独⾃のイベントにハンドラを設定 • on:イベント名={関数} でイベントハンドラを登録 • 独⾃のイベントはコンポーネントイベントと呼称 function hello() { alert('Hello'); } Greet function hello() { alert('Hello'); } Greet Svelte の場合 Vue の場合

コンポーネントイベントの定義 • svelte パッケージの createEventDispatcher を利⽤ • createEventDispatcher() が返却する関数を実⾏することでイベントを発⽕ import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); const onClick = () => dispatch('greet', 'Hi'); Greet import GreetButton from './GreetButton.svelte'; const greet = e => alert(e.detail); greet イベント 発⽕

コンポーネントのプロパティ • Svelte では変数を export することでプロパティとして定義 • プロパティとして宣⾔する変数には let 修飾⼦を利⽤ • 宣⾔時に値を代⼊することで初期値を設定可能 • プロパティの値は親と⼦コンポーネントの双⽅から変更可能 • Vue の場合は⼦コンポーネントからプロパティを直接変更不可 • ⼦から独⾃イベントを発⽕して親からプロパティを変更 • defineProps() でプロパティを定義 • defineEmits() で独⾃イベントを定義

Svelte コンポーネントのプロパティの更新 export let value = 'Hello, world!'; import InputBox from './InputBox.svelte'; let message = 'Hi.'; value プロパティに 変数 message を バインディング • input から value プロパティを変更 • 変更内容は親から渡された変数に即時反映

⽐較: Vue コンポーネントのプロパティの更新 import { ref } = 'vue'; const props = defineProps(['value']); const emit = defineEmits('update']); const inputValue = ref(props.value); const onChange = ({target}) => { inputValue.value = target.value; emit('update', inputValue.value); }; import { ref } from 'vue'; import InputBox from './InputBox.svelte'; const message = 'Hi.'; const onUpdate = value => message.value = value; value プロパティに 変数 message を バインディング •update イベント発⽕ •onUpdate ハンドラで message の値を更新

Svelte と Vue の記法で異なる点 • Svelte • Vue の setup のような記述が不要 • Vue ではテンプレートに変数をバインディングするために必要 • プロパティの値が親⼦関係なく直接変更可能 • Vue では⼦コンポーネント側からプロパティを直接変更不可 • Vue • バインディングやイベントハンドラの登録で省略形が存在 • リアクティブな変数の変更を代⼊以外でも検知可能 • Array.push() などのメソッドからの値の変更を検知可能

総括 • Svelte の概要を紹介 • ⽐較対象の Vue についても紹介 • Svelte の基本機能を紹介 • Vue の記法と類似していることを確認 • コンポーネントのプロパティのように異なる部分も紹介

ご清聴ありがとうございました