【Svelte入門】Svelte5で値の変化を監視するObservableなパターンをRuneで実装するタコつぼの中でプログラミングをコツコツ楽しむ人のためのやや偏ったブログです。当ページには【広告/PR】を含む場合があります。参考サイト直近の2024年10月、いよいよ『Svelte5』が正式にリリースがアナウンスされました。svelte@5.0.0これによって、色々と実装の作法がガラっと変わります。『Rune』と位置づけられたリアクティブの新しい構文の登場によって、v4以前とv5以降で過去のプロジェクトをマイグレする場合に大なり小なり開発者に負担が生じることが予想されます。APIと「$」プレフィックスちょっとしたことですが、個人レベルのSveltekitプロジェクトで、コンポーネントの一つで旧式となったリアクティブ構文「$」を「Rune」で置き換えたときのポイントを記事として記しておきます。2024Svelte4以前のリアクティブ構文を使ったObservableパターン「Observable」パターンは文字通り、変数の監視を行って、値が変化した際に、Subscribeとして登録した処理を行わせる手法です。先に、今後使う機会が少なくなってくるSvelte4以前の「リアクティブ構文」の内容を総括としてダイジェストな感じでまとめてみましょう。...」を使って記述する方法が基本となります。この方法では監視対象としたい変数を宣言(と初期化)、監視対象が変化した際の処理、を複数のブロックで記述するものです。console.log(`HOGE曰く「${hoge}」`);このパターンは、Observable的な挙動というより、javascriptの伝統的なイベントコールバックを行っているに過ぎません。処理の部分が長くなるときには、別の関数として切り出して、以下のようにします。console.log(`HOGE曰く「${_msg}」`);}なんだか関数として分離する書き方が格好悪く感じる場合、即時関数を利用して以下のように書けます。console.log(`HOGE曰く「${hoge}」`);})();個人的にはこちらの即時関数を使う書き方が好みで多用していました。ちなみに、このテクニックの応用として、一つの「$:」ブロックには、「,」で区切ることで複数の監視対象の変数と、コールバック処理を順序不問で連鎖させることも可能です。API」を利用する必要があります。APIの中でも特に「writableストア」の使い方が基本となります。先程のリアクティブ構文の例をwritableストアで置き換えるなら以下のようになるでしょう。console.log(`HOGE曰く「${$hoge}」`);}もちろん、即時関数形にもできます。writable('初期化!');のようにみなすことができます。注意点として、writableストアを使って変数を宣言した場合、Writableクラスのインスタンスになるため、中身の値を参照したい場合に「$」プレフィックスを付けています。...とストアの値を書き換えればちゃんとストアを監視することができます。通常は別ファイルでstore.jsなどとして、外部にストアを定義してから利用することで、複数のコンポーネントでストアの値の変化を共有させることが可能です。writable('初期化!');としておいて、イベントを共有したいコンポーネントで以下のようにSubscribeさせておきます。API」の2つの機能が密に競合してしまっており、Svelte初学者の方にとっては無用な混乱を招く問題になっていました。そこでSvelte5からは新しいリアクティブなAPI・『Rune』に機能集約を行うことで、より理解しやすく、ユーザーの使いやすい方向に持っていくように大幅な修正が行われてきた経緯があります。非推奨とはならないまでも、後方互換のためしばらく残されるという扱いに変わります。Runeの基本的な概念は『Signal』という考え方に基づいています。JavaScript古くは15年ほど遡るKnockout.jsなどのJSフレームワークに端を発し、Solid.jsによって洗練され、現在は多くのJSフレームワークに採用されてきた経緯があります。Signalでは、State(Observable)、Effect(Computed)、Derived(Pure-computed)の重要な3つのコンセプトが存在します。早くにこのSignalモデルを提唱したKnockout.js時代の端的な実装例は以下のようになります。console.log(doubleCount()))見ての通り、簡素な記述の取り決めであり、シンプルが故にコード実装者には解りやすいのがSignalの大きな利点と言えます。理科の時間に習うような、"てこの原理"や"フレミングの左手の法則"のように、3つのキーワードを押さえることでユーザーの頭に入りやすいという効果もあるのかもしれません。2024RuneによるObservableパターンの実装Svelte4から5へのマイグレーションの詳しい内容は、以下のガイドを読んでください。guideまずはプロジェクトをSvelte5へアップグレードしていない場合には以下のコマンドでバージョンを引き上げておきます。svelte@latestおもむろに、そのままローカルサーバーで立ち上あげてみると、ブラウザ側で以下のエラーが起こって止まります。main.ts:4Svelte5以降だと、bootstrapのやり方が異なるようです。appこれがSvelte5だと以下のように修正しないといけません。app;Runeよる変数の監視では本題のRuneの使い方です。基本は組込みで使える$state、$derived、$effectのどれかを使えば簡単に監視可能なイベントを作成することできます。前節で説明したサンプルコードをRuneにしてみましょう。...と値を更新したときに$effectにある処理が発火します。Svelte開発者の覚えておくことは、Signalモデルの3つの骨子、$state、$derived、$effect、です。慣れていけば、他のRuneである$props、$bindable、$inspect、$hostも必要に応じて使っていけば良いでしょう。2024まとめ以上、今回はSvelte5で初登場となった『Rune』を使う上で知っておきたい事前知識を交えながら、過去のリアクティブ構文の置き換えテクニックをちょっとだけ紹介しました。Svelte5では、過去のバージョンのSvelteで悪かった点を軒並み清算するくらいドラスティックに修正されています。これからSvelteを始めようとされる方には、過去のSvelteから学ぶより、Svelte5から入られたほうがよりスッキリと学習することができるでしょう。記事の担当:taconocatナンデモ系エンジニア主にAngularでフロントエンド開発することが多いです。開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。プログラミングするのが好きな人間です。