Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
現代のReactivityとSvelteの魔法
Search
TOMIKAWA Sotaro
November 06, 2023
Programming
0
2.2k
現代のReactivityとSvelteの魔法
TOMIKAWA Sotaro
November 06, 2023
Tweet
Share
More Decks by TOMIKAWA Sotaro
See All by TOMIKAWA Sotaro
漸進。
ssssota
0
2.4k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.7k
useSyncExternalStoreを使いまくる
ssssota
6
5.5k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.2k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
190
脱法Svelte / Evasion of svelte rules
ssssota
1
210
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1k
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
3.9k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
160
Other Decks in Programming
See All in Programming
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
6.4k
NPOでのDevinの活用
codeforeveryone
0
750
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.1k
XP, Testing and ninja testing
m_seki
3
230
技術同人誌をMCP Serverにしてみた
74th
1
600
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
C++20 射影変換
faithandbrave
0
560
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
540
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Faster Mobile Websites
deanohume
307
31k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Balancing Empowerment & Direction
lara
1
400
Git: the NoSQL Database
bkeepers
PRO
430
65k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for humans not robots
tammielis
253
25k
Transcript
現代のReactivityと Svelteの魔法 SvelteとReact HooksとSignals #zozomeetup 株式会社ZOZO ブランドソリューション開発本部 WEARフロントエンド部 Webブロック
冨川 宗太郎 Copyright © ZOZO, Inc. 1
© ZOZO, Inc. 2 おことわり 現代のReactivityとSvelte※1 の魔法※2 ※1: Svelteについて掘り下げてる内容ではありますが、株式会社ZOZOには Svelteを採用したプロダクトは存在しません。あくまでも個人的な嗜好に基づく
発言になります。 ※2: 魔法と題した発表をしますが、 その実態は技術の結晶でありながら魔法のように見えるという意で、 魔法の存在を保証するものではありません。
© ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 WEARフロントエンド部 Webブロック 冨川 宗太郎 2022年新卒でZOZOに入社
WEARのWebフロントエンド開発に従事 仕事ではNext.js/Reactだが ViteやSvelteが好き {"x":"ssssotaro","github":"ssssota"} 3
© ZOZO, Inc. https://wear.jp/ 4 • ファッションコーディネートアプリ • 1,600万ダウンロード突破、コーディネート投稿総数は1,400万 件以上(2023年6月末時点)
• ピックアップタグから最新のトレンドをチェック • コーディネート着用アイテムを公式サイトで購入可能 • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレン ト・デザイナー・インフルエンサーといった各界著名人も参加
© ZOZO, Inc. 5 世は大Reactivity時代
© ZOZO, Inc. 6 世は大Reactivity時代 React、Vue.js、Svelte、Preact、Solid.js、etc… さまざまなフロントエンドフレームワーク(ライブラリ)が登場している現代 Webフロントエンド。 開発者はどのように「状態を画面に反映するか」で鎬を削っている。 とはいえ、何が言いたいかわかりにくいのでカウンターを例に挙げる。
© ZOZO, Inc. 7 React なんてことのない、カウンターアプリ。 ボタンを押したら、setCountが呼ばれて表示が変わる。 それがReactivity(ユーザアクションへの反応) ReactのHooksは、(パッと見では状態がない関数に見えるが)React内部でデー タが保管され、setCountが呼ばれることで再レンダリングが走る。
function App() { const [count, setCount] = useState(0); return <button onClick={() => setCount((p) => p + 1)}>{count}</button>; }
© ZOZO, Inc. 8 Preact なんてことのない、カウンターアプリ。 PreactはいわゆるSignalsを採用している。 Vue.js(Composition API),Solid.jsなどもSignals。 Signalsは
.value の getterで監視がはじまり、setterで更新がトリガーされる。 function App() { const count = useMemo(() => signal(0), []); // useSignal(0); return <button onClick={() => count.value++}>{count.value}</button>; }
© ZOZO, Inc. 9 Svelte なんてことのない、カウンターアプリ。 変数に直接代入している!!のに画面が更新される。 React HooksやSignalsは関数呼び出しやgetterを使っているので JavaScriptランタイムの範囲で変化に気づき反応できる。
代入だけではJavaScriptランタイムの範囲※3 では反応できない...まるで魔法※2 。 ※3: この発表では「JavaScriptをそのまま解釈したとき、JavaScriptの機能(Proxy等含む)で実現しうる範囲」と定義 <script> let count = 0; </script> <button on:click={() => count++}>{count}</button>
© ZOZO, Inc. 10 どうして動くのか Svelteはビルド時に、変数の参照箇所と代入箇所が洗い出されて反応できるよう にコンパイルされる。 REPLのアウトプットを見ると一目瞭然(諸説あり)。
© ZOZO, Inc. 11 Signalsもたまに魔法※2 Vue.jsやPreactも糖衣構文的な機能が用意されており、 .value が場合により省略できる。 参照 変更
備考 Vue.js ✅ ✅ SFC Compilerの恩恵 templateタグ内、イベントハンドラ含む Preact ✅ ❌ Option Hooksの恩恵 JSX内、イベントハンドラ含まない Solid.js - - そもそも.valueでアクセスしない
© ZOZO, Inc. 12 コンポーネントを跨ぐ状態 Reactの開発ではよくライブラリ選定などで議論を巻き起こす方の状態。 • React ◦ useContext
や useSyncExternalStore を利用して自作する ◦ ライブラリ(Redux,Recoil,jotai,Zustand,etc...)を導入する • Signals(Vue.js, Preact, Solid.js) ◦ Signal自体がコンポーネント外で宣言、利用できる • Svelte ◦ svelte/store というモジュールから公式が提供するストア(状態管 理)が利用できる
© ZOZO, Inc. 13 svelte/store svelte/store から利用できるストアはRxJSのようなインターフェースを備え ている。Svelteコンポーネント内からは $ をプレフィックスとしてつけることで
魔法※2 によりReactivityを獲得する。 <script> import { writable } from 'svelte/store'; const input = writable(''); </script> <h1>Hello {$input}</h1> <input bind:value={$input} />
© ZOZO, Inc. 14 おわりに どのフレームワーク(ライブラリ)においても、Reactivityがそれぞれの思想の もとに実現されている。 今回紹介した特性が、各フレームワーク(ライブラリ)のすべてではないが、こ れを理解した上でチームの体制などと相談して技術を選定してほしい。 Svelteは中でも簡潔なインターフェースを持ち、JavaScript初学者や、デザイ
ナーやバックエンドとの二足の草鞋などの開発者にもやさしいと考えている。 ※1: Svelteについて掘り下げてる内容ではありますが、株式会社ZOZOにはSvelteを採用したプロダク トは存在しません。あくまでも個人的な嗜好に基づく発言になります。
None