はじめに
この度2024年10月にSvelte5がリリースされました。
従来のSvelte4までと大きく変わった部分も多かったので、特にリアクティブ構文周りを私なりにSvelte4とSvelte5に違いについて着目しながらまとめてみました。
Runes
本題に入る前に、Svelte5で重要なキーワードとなっている『Runes』について触れていきたいと思います。
Runesとは、リアクティブな状態や振る舞いを明示的に記述するための構文です。
Svelte5ではこのRuneが新しく導入され、状態管理やリアクティブな振る舞いをより簡潔かつ明確に記述できるようになりました。
従来は、letを使った変数の宣言や、$: を用いたリアクティブな監視が可能で、そのシンプルさがSvelteの大きな特徴でした。しかし、システムが大規模化するにつれて、コードの意図が分かりにくくなり、メンテナンス性の低下が課題となるケースもありました。
Runeの導入により、リアクティブな変数やロジックを明示的に記述できるようになり、コードの意図がより理解しやすくなるとともに、メンテナンス性の向上が期待されています。
Svelte5でのリアクティブ構文
Svelte5ではSvelte4までのリアクティブ構文とは書き方が異なります。
備忘録も兼ねてSvelte4までの書き方と比較しながらそれぞれ書いていこうと思います！
let -> $state
Svelte4までではlet hogehoge = .... でリアクティブな変数宣言ができましたが、
Svelte5では$stateを使用して作成された場合にリアクティブ宣言となります。
<script>
// Svelte4
let count = 0;
// Svelte5
let count = $state(0);
</script>
$: -> $derived/$effect
$derivedについて、、、
svelte4では$: でリアクティブに監視していたが、svelte5では$derivedを使って監視します。
以下のように書くことで、countが変更されたらdoubleもすぐに反映されます
<script>
// Svelte4
let count = 0;
$: double = count * 2;
// Svelte5
let count = $state(0);
$: const double = $derived(count * 2);
</script>
$effectについて、、、
Svelte4では$:の副作用を作成したい時、
例えば$: { if (引数) { 処理内容 } } のような書き方をしていたと思いますが、
Svelte 5では $:$effect(() => { ... }) という形に変更になりました。
<script>
// Svelte4
let count = 0;
$: {
if (count > 5) {
alert('カウントが高すぎます！');
}
}
// Svevlte5
let count = $state(0);
$:$effect(() => {
if (count > 5) {
alert('カウントが高すぎます！');
}
});
</script>
export let -> $props
Svelte 4ではexport letを使用して親コンポーネントから変数を受け取っていて、かつプロパティごとに宣言が必要でした。
Svelte5では$props()でまとめて受け取ることができます。
複数ある場合は以下のように,で区切って記載することでまとめて受け取ることができます。
<script>
// Svelte4
export let optional = 'unset';
export let required;
// Svelte5
let { optional = 'unset', required } = $props();
</script>
終わりに
いかがでしたでしょうか？
今回は公式のSvelte5以降ガイドをもとに私なりにSvelte4とSvelte5の違いに着目してまとめてみました。
大きく変わった部分も多く、私は今絶賛混乱してますが、私と同じような方に少しでも参加王にしていただけたら幸いです。
もし、間違いや解釈の不一致などがあればお伝えいただけると嬉しいです！
それでは今日はこの辺で！