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.3k
現代のReactivityとSvelteの魔法
TOMIKAWA Sotaro
November 06, 2023
Tweet
Share
More Decks by TOMIKAWA Sotaro
See All by TOMIKAWA Sotaro
漸進。
ssssota
0
2.9k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.8k
useSyncExternalStoreを使いまくる
ssssota
6
5.6k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.3k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
200
脱法Svelte / Evasion of svelte rules
ssssota
1
220
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1.1k
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
4k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
170
Other Decks in Programming
See All in Programming
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
200
実践 Dev Containers × Claude Code
touyu
1
170
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
710
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
2.1k
Comparing decimals in Swift Testing
417_72ki
0
170
Constant integer division faster than compiler-generated code
herumi
2
590
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
970
実践!App Intents対応
yuukiw00w
1
230
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
810
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
210
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
150
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Ace a Technical Interview
jacobian
278
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Git: the NoSQL Database
bkeepers
PRO
431
65k
GraphQLとの向き合い方2022年版
quramy
49
14k
For a Future-Friendly Web
brad_frost
179
9.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Optimizing for Happiness
mojombo
379
70k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Thoughts on Productivity
jonyablonski
69
4.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
760
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