React島→Svelte島 住民受け入れガイド

Reactに慣れているエンジニアがより良いSvelteを書くにはどうすればいいのか、を実体験を踏まえて考えます。
Joinする側、受け入れる側双方がどんな考え方でどんな行動をすれば良いのかをお伝えします。

この資料はSvelte Japan Offline Meetup #8での登壇資料です。

Transcript

1. 19: 09
3. Svelte 島
4. React 島
7. この発表のきっかけ
8. この発表のきっかけ • 自分が担当しているプロダクトに助っ人でエンジニアが入ってくれた • 自分の担当プロダクトはSvelteKitで構成 • 助っ人エンジニアさんの担当プロダクトはReact Routerで構成 • 共通部分もあり基本的には順調に開発が進むが… • しかし、レビューで大量の指摘をしてしまうことに……
9. Reactに慣れたエンジニアが より良いSvelteを書くには HIBIKI CUBE @hibiki_cube
10. 1. ReactにはRuneが無い
11. ReactにはRuneが無い
12. ReactにはRuneが無い import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); const doubled = count * 2; return ( <button onClick={() => setCount(c => c + 1)}> Count: {count} / Doubled: {doubled} </button> ); }
13. ReactにはRuneが無い <script lang="ts"> let count = $state(0); const doubled = count * 2; </script> <button onclick={() => count++}> Count: {count} / Doubled: {doubled} </button>
14. ReactにはRuneが無い <script lang="ts"> let count = $state(0); const doubled = count * 2; </script> <button onclick={() => count++}> Count: {count} / Doubled: {doubled} </button> リアクティブに 更新されない
15. ReactにはRuneが無い <script lang="ts"> let count = $state(0); let doubled = $state(0); $effect(() => { doubled = count * 2; }); </script> <button onclick={() => count++}> Count: {count} / Doubled: {doubled} </button>
16. ReactにはRuneが無い <script lang="ts"> let count = $state(0); let doubled = $state(0); $effect(() => { doubled = count * 2; }); </script> <button onclick={() => count++}> Count: {count} / Doubled: {doubled} </button> 󰢃
17. ReactにはRuneが無い <script lang="ts"> let count = $state(0); const doubled = $derived(count * 2); </script> <button onclick={() => count++}> Count: {count} / Doubled: {doubled} </button>
18. ReactにはRuneが無い <script lang="ts"> let count = $state(0); let doubled = $state(0); $effect(() => { doubled = count * 2; }); </script> <button onclick={() => count++}> Count: {count} / Doubled: {doubled} </button> <button onclick={() => doubled *= 2}> Double doubled: {doubled} </button>
19. ReactにはRuneが無い <script lang="ts"> let count = $state(0); let doubled = $derived(count * 2); </script> <button onclick={() => count++}> Count: {count} / Doubled: {doubled} </button> <button onclick={() => doubled *= 2}> Double doubled: {doubled} </button>
20. ReactにはRuneが無い • ReactもSvelteも”リアクティブ”だが、メンタルモデルが違う • Reactで考えてSvelteに訳すのではなく、Svelteで考えるべき • ただただチュートリアル丸投げ、ではメンタルモデルまで養えない
21. 2. それはSvelteの仕事 だ!
22. それはSvelteの仕事だ! import { useState } from 'react'; export default function ReactInput() { const [name, setName] = useState(''); return ( <> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <p>{name}さんこんにちは！</p> </> ); }
23. それはSvelteの仕事だ! <script lang="ts"> let name = $state(''); </script> <input type="text" value={name} onchange={(e) => name = e.target.value} /> <p>{name}さん、こんにちは！</p>
24. それはSvelteの仕事だ! <script lang="ts"> let name = $state(''); </script> <input type="text" value={name} onchange={(e) => name = e.target.value} /> <p>{name}さん、こんにちは！</p>
25. それはSvelteの仕事だ! <script lang="ts"> let name = $state(''); </script> <input type="text" bind:value={name} /> <p>{name}さん、こんにちは！</p>
26. それはSvelteの仕事だ! • Reactにはそもそも双方向バインディングの考え方がない • ユーザー入力 → イベントで扱う、と考えがち • 画面の変化は全てはステートの変化に依存するべき、と考えてもらう
27. 3. AIの罠に騙されるな!
28. AIの罠に騙されるな! • AI時代の今だからこそ、 「Reactが書けるならAI活用すればSvelteも書けるでしょ」 と思いがち • 相手側だけでなく、自分もそう思っていた • でもそのAI、本当に信用できますか……？
29. AIの罠に騙されるな! • 実際、ここまで紹介したBad CodeはどれもCursorで書かれた • Svelte公式のSkillも入れていたのに… • Reactのメンタルモデルのままでは、気づけないミスもある • ESLintなどである程度は防げるので活用すべし
30. Reactに慣れたエンジニアが より良いSvelteを書くには HIBIKI CUBE @hibiki_cube
31. より良いSvelteを書くためのマインドセットが必要 • Svelteらしくリアクティビティを設計する • チュートリアル丸投げではマインドセットまでは変えられない • ハンズオンをしても、Reactと重なる部分に寄りがち 受け入れる側も、Reactのメンタルモデルやマインドセットを理解し その差分を伝えてサポートするべきだった
32. End