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
5k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
7
4.7k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
110
脱法Svelte / Evasion of svelte rules
ssssota
1
180
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
930
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
3.8k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
140
型付きdotenv
ssssota
0
320
Other Decks in Programming
See All in Programming
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
SwiftUI Viewの責務分離
elmetal
PRO
2
270
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
380
自力でTTSモデルを作った話
zgock999
0
100
Ça bouge du côté des animations CSS !
goetter
2
150
Jasprが凄い話
hyshu
0
160
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
300
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
RailsConf 2023
tenderlove
29
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Designing Experiences People Love
moore
140
23k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
A Philosophy of Restraint
colly
203
16k
How to Ace a Technical Interview
jacobian
276
23k
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