大変僭越ながら
みなさまの今の気持ちを
当てようと思います...
知ってる👍
知ってる👍
知ってる👍
知ってる👍
知ってる👍
知ってる👍
知ってる👍
知ってる👍
知ってる👍
知ってる👍
❓❓❓❓❓
❓❓❓❓❓
お前誰!?
Svelteのメンテナです。
Something
With
Svelte
baseballyama
(Yuichiro Yamashita)
速習Svelte
多くの方が思うだろうこと...
Svelteが最近流行っているのは知ってるし使ってみたいけど
業務で使うなら事例が多い React / Vue / Angular のどれかだよなぁ...
わかりました。
認めましょう。
私も業務では Vue.js を使用しています。
(Vue2 → Vue3 移行中...)
しかし同時に、Svelte も 使用しています。
多くの方が思うだろうこと...
Svelteが最近流行っているのは知ってるし使ってみたいけど
業務で使うなら事例が多い React / Vue / Angular のどれかだよなぁ...
Svelteが最近流行っているのは知ってるし使ってみたいけど
業務で使うなら事例が多い React / Vue / Angular のどれかだよなぁ...
今日のご提案
これからの時代は
React / Vue / Angular のどれかと Svelte だよなぁ...
Something
With
Svelte
ユースケースはなんですか?
React
Svelte
ユースケースはなんですか?
2. 小さなバンドルサイズが要求される場合
ユースケースはなんですか?
2. 小さなバンドルサイズが要求される場合
例えばこういう
埋め込みモーダル
ユースケースはなんですか?
2. 小さなバンドルサイズが要求される場合
(2022/8/17 時点で...)
つまり、21個以下のコンポーネントを持つアプリ / 部品の場合、
バンドルサイズはSvelteの方が小さくなります。
| ランタイムサイズ | コンポーネントサイズ |
Vue.js | 20.21 KB | 1.50 KB |
Svelte | 1.58 KB | 2.36 KB |
どうやって併用しますか?
1. Web Components
1. Web Components
参考資料
2. JavaScript で埋め込み
import App from "./App.svelte";
const app = new App({
// HTMLのどこにレンダリングするかを指定
target: document.getElementById('svelte-widget'),
props: {
name: "world",
},
});
3. 他のライブラリと共存
Demo
3. 他のライブラリと共存 (Vue編)
(0) 基本構成
<script setup lang="ts">
const svelteWrapper = ref<HTMLElement | null>(null);
const svelteComponent: Ref<SvelteComponent | null> = ref(null);
onMounted(() => {
svelteComponent.value = new SvelteComponent({ target: svelteWrapper.value});
});
</script>
<template>
<div ref="svelteWrapper"></div>
</template>
3. 他のライブラリと共存 (Vue編)
const props = defineProps<{
count: SvelteProps["count"];
onChangeCount: SvelteProps["onChangeCount"];
}>();
onMounted(() => {
svelteComponent.value = new SvelteComponent({
target,
props, // 1. インスタンス生成時にpropsを渡して
context: new Map([[key, storeRef.value]]),
});
});
// 2. propsが更新されたら都度渡す
watchEffect(() => component.value?.$set(props));
3. 他のライブラリと共存 (Vue編)
(2) propsの更新をSvelte から Vue に更新する (方法1)
// Svelte (イベントディスパッチャーを定義)
export let count: Props["count"] = 1;
const dispatch = createEventDispatcher<DispatcherPublisher>();
$: dispatch("change", { type: "count", value: count });
// Vue (イベントを受け取る)
onMounted(() => {
(svelteComponent.value.$on as $on)("change", (event) => {
const { type, value } = event.detail;
if (type === "count") props.onChangeCount(value);
});
});
3. 他のライブラリと共存 (Vue編)
(2) propsの更新をSvelte から Vue に更新する (方法2)
// Svelte (propsが変更される度にpropsで渡された関数を実行)
export let onChangeCount: Props["onChangeCount"];
$: onChangeCount(count);
// Vue (propsの変更時の処理を props として渡す)
onMounted(() => {
component.value = new SvelteComponent({
target,
props: {
count: props.count,
onChangeCount: (count) => props.onChangeCount(count),
},
});
});
3. 他のライブラリと共存 (Vue編)
(3) Vue から Svelte コンポーネントの関数を実行する
// Svelte
<script lang="ts">
export const reset = () => {
count = 0;
};
</script>
// Vue
const reset = () => component.value?.reset();
3. 他のライブラリと併用
参考資料
今日のまとめ
お前誰!?
Svelteのメンテナです。
Svelte は他のライブラリと併用で導入できる
遅延なく60fpsを実現したい場合や
小さなバンドルサイズが要求される
場面で力を発揮する
Svelte は他のライブラリと併用で導入できる
実装方法は3種類
1行で対応できる
簡単
Vue / React と共存する例をコードレベルで共有しました
ご清聴ありがとうございました
おしまい