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
2k
現代のReactivityとSvelteの魔法
TOMIKAWA Sotaro
November 06, 2023
Tweet
Share
More Decks by TOMIKAWA Sotaro
See All by TOMIKAWA Sotaro
useSyncExternalStoreを使いまくる
ssssota
6
4.6k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
7
4.6k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
100
脱法Svelte / Evasion of svelte rules
ssssota
1
170
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
900
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
7
3.8k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
130
型付きdotenv
ssssota
0
310
Other Decks in Programming
See All in Programming
Flatt Security XSS Challenge 解答・解説
flatt_security
0
1.1k
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
360
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
8
1.3k
ASP.NET Core の OpenAPIサポート
h455h1
0
160
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
150
CNCF Project の作者が考えている OSS の運営
utam0k
5
620
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
4
610
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
390
Linux && Docker 研修/Linux && Docker training
forrep
22
4.1k
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.3k
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.6k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
What's in a price? How to price your products and services
michaelherold
244
12k
Speed Design
sergeychernyshev
25
760
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
4 Signs Your Business is Dying
shpigford
182
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Being A Developer After 40
akosma
89
590k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Become a Pro
speakerdeck
PRO
26
5.1k
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