カテゴリー
【Svelte入門】Svelte5で値の変化を監視するObservableなパターンをRuneで実装する
※ 当ページには【広告/PR】を含む場合があります。
2024/10/24
+ letを宣言する位置による作用(トップレベルかそれ以外か)
+ 「export let」
+ 「$: ...」等のリアクティブ構文
+ <script>と<script context="module">との違い
+ $$props/$$restProps
+ ライフサイクル (onMountなど)
+ Store APIと「$」プレフィックス
Svelte4以前のリアクティブ構文を使ったObservableパターン
「$」ブロックに処理を小出しに入れていく
「$: ...」
$: hoge = '初期化!';
$: console.log(`HOGE曰く「${hoge}」`);
$: hoge = '初期化!';
$: hogeSays(hoge);
function hogeSays(_msg) {
console.log(`HOGE曰く「${_msg}」`);
}
$: hoge = '初期化!';
$: hoge, (() => {
console.log(`HOGE曰く「${hoge}」`);
})();
「$:」
「,」
$: hoge = '初期化!';
$: piyo = '初期化!';
$: hoge, (() => {
console.log(`HOGE曰く「${hoge}」`);
})(), piyo, (() => {
console.log(`PIYO曰く「${piyo}」`);
})();
「writable」を使う
import { writable } from "svelte/store";
const hoge = writable('初期化!');
$: $hoge, hogeSays();
function hogeSays() {
console.log(`HOGE曰く「${$hoge}」`);
}
import { writable } from "svelte/store";
const hoge = writable('初期化!');
$: $hoge, (() => {
console.log(`HOGE曰く「${$hoge}」`);
})();
$: hoge = '初期化!';
///👇構文的に等価
const hoge = writable('初期化!');
「$」
const hoge = writable('初期化!');
hoge.subscribe(v => {
console.log(`HOGE曰く「${v}」`);
});
$hoge = ...
store.js
import { writable } from "svelte/store";
export const hoge = writable('初期化!');
import { hoge } from "./store.js";
hoge.subscribe(v => {
console.log(`HOGE曰く「${v}」`);
});
Svelte5からのRuneによるObservableパターン
+ 「$: ...」(リアクティブ構文)
--> 廃止
+ Store API
--> 非推奨とはならないまでも、後方互換のためしばらく残される
State(Observable)
Effect(Computed)
Derived(Pure-computed)
const count = ko.observable(0);
const doubleCount = ko.pureComputed(() => count() * 2);
//Logs whenever doubleCount updates
ko.computed(() => console.log(doubleCount()))
RuneによるObservableパターンの実装
$ yarn add svelte@latest
Uncaught Svelte error: component_api_invalid_new
Attempted to instantiate src/App.svelte with `new App`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
component_api_invalid_new errors.js:86
check_target legacy.js:9
App App.svelte:13
<anonymous> main.ts:4
errors.js:86:16
component_api_invalid_new errors.js:86
check_target legacy.js:9
App App.svelte:13
<匿名> main.ts:4
import './app.css'
import App from './App.svelte'
const app = new App({
target: document.getElementById('app')!,
})
export default app
import './app.css';
import App from './App.svelte';
//👇追加
import { mount } from 'svelte';
const app = mount(App, {
target: document.getElementById('app')!
});
export default app;
Runeよる変数の監視
$state
$derived
$effect
let hoge = $state('初期化した状態');
$effect(() => {
console.log(`HOGE曰く「${hoge}」`);
});
hoge = ...
$effect
$state
$derived
$effect
$props
$bindable
$inspect
$host
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー