よりシンプルになる Svelte の世界 azukiazusa

自己紹介 ● Web アプリケーションエンジニア ● Web フロントエンドが得意 ● 趣味 ○ 読書 ○ 麻雀 ○ ポーカー azukiazusa

Svelte 歴 ● https://azukiazusa.dev は SvelteKit で作っています ● Sapper だったころから Svelte を使っていて、歴は 3 年ほど

今日話すこと ● v5 で訪れる Svelte の変化 ● 破壊的変更は多くないが、Svelte のコンセプトを大きく変 える機能が多く取り込まれた

Svelte の特徴といえば？

記述量が少ないシンプルな構文

Write less code すべてのコードにはバグがあります。したがって、記述しなけれ ばならないコードが増えるほど、アプリのバグが増加するのは当 然です。 … 記述しなければならないコードの量を減らすことは、Svelte の明 確な目標です。 https://svelte.dev/blog/write-less-code

アプリケーションが複雑になるにつれて 辛さが出てきた ● 変数がリアクティブかどうかの判断が難しくなる ○ `.svelte` ファイルのトップレベルで宣言された変数の みがリアクティブとなる ○ 関数やモジュールまとめるリファクタリングが困難 ● コンポーネントの境界を超えたロジックを書こうとする と、カスタムストアという概念が出てくる

カスタムストア ● let 変数宣言から急勾 配な学習コスト ● React や Vue.js なら どの場所でも同じ方法 でリアクティブな値を 宣言できる

ストアの値を参照する糖衣構文 ● ストアの値を参照する糖衣構文として、先頭に $ をつける ● JavaScript の構文を逸脱していて少々奇妙である ● どの変数に対して $ を付けるべきかを判断が認知負荷を高める

Svelte はアプリケーションが小さ なうちはシンプルに保てるが、 規模が大きくなると学習コスト・ 認知負荷が急激に上昇してしまう

Rune の登場

Rune とは ● Svelte v5 から Rune が導入される ● Rune は関数の構文で宣言されるシンボル ● Svelte コンパイラに指示を与え、JavaScript のコードの 変換される

$state() ● リアクティブな変数を宣言する ● 従来の `let count = 0` を置き換える

$state() ● `.svelte` ファイル以外の場所でも同じ書き方ができる ● 共通のロジックをカプセル化するようなリファクタリングがやりやすく なった

$effect() ● 副作用を実行するための Rune ● コンポーネントが Mount された 時、依存する値が変化した場合に 実行される ● 関数を返すと、`$effect` が再実 行される直前、および破棄される 直前に実行される

● ラベル構文 `${ … }` での副作用の実行を置き換える ● `$effect` は onMount、afterUpdate といったライフサイ クル関数を置き換える ○ このようにライフサイクルメソッドを用いたコードは時間的凝集度が高く ても機能的凝集度は低いといえる。... 各hook関数が状態の保持やライフ ルサイクルの管理といった個別機能を持つため、機能Aに必要なすべての hookを1箇所に集めることができる。すなわち機能的凝集度が高い状態、 機能的なSoCが実現できる。 $effect() https://ja.wikipedia.org/wiki/%E9%96%A2%E5%BF%83%E3%81%AE%E5%88 %86%E9%9B%A2

● `$effect()` は副作用を実行するためのエスケープハッチ ● 状態を同期するための使用は避ける $effect() 使用時の注意点

$props ● コンポーネントの Props を受け取る Rune ● 以前までは `export` 宣言で Props を指定していた ● より JavaScript の構文に近い方法で Props を指定できる

イベントハンドラの変更点

`on:` ディレクティブが非推奨に ● `on:` ディレクティブでイベントリスナーを要素にアタッチしていた ● v5 では単なる Props として渡せるようになる

コンポーネントのイベント ● `createEventDispatcher` でディスパッチャーを作成し、イベントを発火 していた ● v5 ではシンプルに Props としてコールバック関数を受け取る

よりシンプルなイベントハンドラ ● Svelte の学習コストの軽減 ● `createEventDispatcher` 周りのボイラーコードが削減される ● 型安全性の向上 ○ 単なる Props なのでイベントハンドラが必須かどうか表現で きる ○ コンポーネントが特定のイベントを発行しないことを Svelte が 保証することは事実上不可能だった

スニペットを使う

スニペットとは ● 再利用可能なマークアップ ● スニペットは任意の数の引数を受け取る ● `@render` でスニペットを呼び出す

スニペットの利点 ● 変数などに代入して使い回せる JSX の利点を導入した ● Svelte は 1 つのファイルにつき 1 つのコンポーネントしか持てな かった ○ React はコードの見通しを良くするために、プライベートな小さ なコンポーネントを作ることがよくある ○ スニペットを使えば近いことができるようになる

コンポーネントにスニペットを渡す ● スニペットは単なる値として扱われるので、Props としてコンポーネント に渡すことができる

コンポーネントにスニペットを渡す ● コンポーネントの子要素でスニペットが宣言された場合、暗黙的にコン ポーネントの Props として扱われる

コンポーネントにスニペットを渡す ● コンポーネント子要素でスニペット宣言ではないものは、`children` スニ ペットとして扱われる

コンポーネントにスニペットを渡す ● 従来までは `` を使用していた ● スニペットは単なる値であるためより柔軟性が高く、Props として 型定義ができるという利点がある ● `` は v5 では非推奨に

まとめ ● Svelte は「記述量を減らす」から「シンプル」な設計へ ● リアクティブな変数は `$state()` ルーンで定義する ○ `$state()` はどの場所でも同じ構文で書ける ● 副作用は `$effect()` ルーン内で実行する ● Props は `$props()` ルーンで受け取るように ● イベントハンドラは単なる Props となった ● 使いまわしがしやすい jsx の利点を取り入れたスニペッ トが追加された