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
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
2k
漸進。
ssssota
0
3.1k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.9k
useSyncExternalStoreを使いまくる
ssssota
6
5.9k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.5k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
240
脱法Svelte / Evasion of svelte rules
ssssota
1
250
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1.1k
Other Decks in Programming
See All in Programming
CSC509 Lecture 07
javiergs
PRO
0
240
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
420
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.2k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
iOSでSVG画像を扱う
kishikawakatsumi
0
170
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
One Enishi After Another
snoozer05
PRO
0
160
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
技術的負債の正体を知って向き合う
irof
0
250
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
KATA
mclloyd
PRO
32
15k
RailsConf 2023
tenderlove
30
1.3k
How GitHub (no longer) Works
holman
315
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Embracing the Ebb and Flow
colly
88
4.9k
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