add notable b4h0c4t 2024 10

src/content/posts/2024/10.md

@@ -19,9 +19,43 @@ guest:
 
 ## 👀 Notable Articles
 
-### []()
+### [Svelte 5 is alive](https://svelte.dev/blog/svelte-5-is-alive)
 
-- 共有者:
+- 共有者: @b4h0_c4t
+
+Svelte 5 がリリースされました。
+
+今回のアップデートでは rune のサポートによって基礎的な記法が大幅に変更されています。
+
+例えば、`count` というリアクティブオブジェクトを作成する場合、Svelte4 以前だと
+
+```javascript
+let count = 0
+```
+
+となりますが、Svelte 5 では
+
+```svelte5
+let count = $state(0);
+```
+
+となります。
+
+また、slot でのコンポーネント結合が非推奨となり、snnipets による合成がサポートされました。
+
+基本的な children の受け渡しについて、Svelte 4 以前は `<slot />` をコンポーネントに差し込み、親コンポーネントが slot を受け取る仕組みでしたが、Svelte 5 では `$props` から children を取得してレンダーするようになりました
+
+```javascript
+<script>
+  let { children } = $props();
+</script>
+
+{@render children?.()}
+```
+
+Svelte コンポーネントが Class ではなくなっているため、今後コンポーネントを呼び出す際は `mount` や `hydrate` といった新たな API を呼び出す必要があります。
+
+詳細な Svelte 4 以前との比較は [Svelte 5 migration guide](https://svelte.dev/docs/svelte/v5-migration-guide) 参照。
 
 ### [First-class Vitest integration](https://storybook.js.org/blog/storybook-8-3/)