Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Svelte は記述量が少なくシンプルなコードで書けることが特徴の 1 つでした。しかし、アプリケーションの規模が大きくなるにつれて学習コストや認知負荷が増加していくという課題が浮上してきました。Svelte v5 で導入される Rune は今までの Svelte のコンセプトを覆し、よりシンプルになることを目指しています。このトークでは Svelte v5 の新機能を通じて Svelte の書き方がどのように変わるのかについて話します。

azukiazusa

May 24, 2024
Tweet

More Decks by azukiazusa

Other Decks in Technology

Transcript

  1. カスタムストア • let 変数宣言から急勾 配な学習コスト • React や Vue.js なら

    どの場所でも同じ方法 でリアクティブな値を 宣言できる
  2. Rune とは • Svelte v5 から Rune が導入される • Rune

    は関数の構文で宣言されるシンボル • Svelte コンパイラに指示を与え、JavaScript のコードの 変換される
  3. $effect() • 副作用を実行するための Rune • コンポーネントが Mount された 時、依存する値が変化した場合に 実行される

    • 関数を返すと、`$effect` が再実 行される直前、および破棄される 直前に実行される
  4. • ラベル構文 `${ … }` での副作用の実行を置き換える • `$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
  5. $props • コンポーネントの Props を受け取る Rune • 以前までは `export` 宣言で

    Props を指定していた • より JavaScript の構文に近い方法で Props を指定できる
  6. よりシンプルなイベントハンドラ • Svelte の学習コストの軽減 • `createEventDispatcher` 周りのボイラーコードが削減される • 型安全性の向上 ◦

    単なる Props なのでイベントハンドラが必須かどうか表現で きる ◦ コンポーネントが特定のイベントを発行しないことを Svelte が 保証することは事実上不可能だった
  7. スニペットの利点 • 変数などに代入して使い回せる JSX の利点を導入した • Svelte は 1 つのファイルにつき

    1 つのコンポーネントしか持てな かった ◦ React はコードの見通しを良くするために、プライベートな小さ なコンポーネントを作ることがよくある ◦ スニペットを使えば近いことができるようになる
  8. まとめ • Svelte は「記述量を減らす」から「シンプル」な設計へ • リアクティブな変数は `$state()` ルーンで定義する ◦ `$state()`

    はどの場所でも同じ構文で書ける • 副作用は `$effect()` ルーン内で実行する • Props は `$props()` ルーンで受け取るように • イベントハンドラは単なる Props となった • 使いまわしがしやすい jsx の利点を取り入れたスニペッ トが追加された