ReactとSvelteのその先、 Ripple-TS ssssota #tskaigi 

⾃⼰紹介 ssssota (TOMIKAWA Sotaro) 株式会社ZOZO テックリード 個人OSS開発者 仕事React、趣味Svelte,Preact 

Ripple-TS (Ripple) とは Reactや、Svelte 5の開発に深く携わってきた Dominic Gannaway氏が開発している、新しいフロントエンドフレームワーク “the elegant TypeScript UI framework” https://www.ripple-ts.com 

現状の整理 Framework 書き方 更新モデル React JSX 🧱 Virtual DOM Vue.js SFC / template / JSX 🧱 Virtual DOM Vue Vapor SFC / JSX ⚡ Fine-grained Svelte SFC風 ⚡ Fine-grained Solid.js JSX ⚡ Fine-grained 

Ripple（と TSRX）がある世界 Framework 書き方 更新モデル React JSX / TSRX 🧱 Virtual DOM Vue.js SFC / template / JSX 🧱 Virtual DOM Vue Vapor SFC / JSX / TSRX ⚡ Fine-grained Svelte SFC風 ⚡ Fine-grained Solid.js JSX / TSRX ⚡ Fine-grained Ripple TSRX ⚡ Fine-grained 

TSRXとは 元々Rippleのために作られた言語 (.ripple) それをReactやVue、Solid.jsなどでも使えるようにした言語および仕様。 https://tsrx.dev （Ripple特有の言語として紹介するつもりが１ヶ月ほど前にTSRXが発表された） 

TSRXの⽂法 (1) component App() { } 

TSRXの⽂法 (1 / React) const App__static1 = ; function App() { return App__static1; } component App() { } compile 

TSRXの⽂法 (2) type Props = { name: string }; component App({ name }: Props) { } 

type Props = { name: string }; component App({ name }: Props) { } TSRXの⽂法 (2 / React) type Props = { name: string }; function App({ name }: Props) { return ( ); } compile 

TSRXの⽂法 (3) type Props = { name?: string }; component App({ name }: Props) { } 

TSRXの⽂法 (3 / React) type Props = { name?: string }; component App({ name }: Props) { } type Props = { name?: string }; function App({ name }: Props) { return ( ); } compile 

TSRXの⽂法 (scoped-style, for-of, try-catch) component TodoList({ items }) {

for (const item of items) {
• {item}
}

.ul { list-style: none; } } component SafeProfile({ userId }) { try { } catch (error) { } } 

Vite, Rspack, Bun(, Turbopack)のプラグインとして利用できる。 TSRXは言語仕様を提供しているので、 どのような形コンパイルされるかはプラグインの実装に依存する。 TSRXでReactコンポーネントを書いておくことで、Solid.jsの出力も可能 （React hooksなどのAPIはそのまま使えないものの） TSRXのコンパイル 

Fine-grained reactivityと記法 Fine-grained reactivityの実現には記述方法に制約が生まれがち。 (変数直接アクセス、代入では使用箇所の追跡、変更の検知ができないため) // 変数直接アクセス・代入 let state = 0; console.log(state); state = 1; // 利用箇所追跡、変更通知可能 const state = createState(0); console.log(state.value); state.value = 1; function createState(init) { let _state = init; return { get value() { return _state; // +追跡処理 }, set value(val) { _state = val; // +変更通知 } }; } 

Fine-grained reactivityとTSRX TSRXではLazy destructuring (&{} / &[])と呼ばれる文法を導入して、 JavaScriptのメンタルモデルを極力維持しつつ記法の制限を乗り越える。 // 変数直接アクセス・代入 let state = 0; console.log(state); state = 1; // 利用箇所追跡、変更通知可能 const &{ value } = createState(0); console.log(value); value = 1; let state = 0; console.log(state); state = 1; const __lazy0 = createState(0); console.log(__lazy0.value); __lazy0.value = 1; compile 

TSRXとは（再） TSRXはTypeScriptの拡張構文。 Vue.jsやSvelteのようにUIのための独自構文と見ることができるが、 より汎用的で、JavaScript/TypeScriptに近い場所にある。 記述のコロケーション（styleタグ、変数宣言等）によりLLMの出力も安定する。 言語は特定のフレームワークにロックせず、それぞれのペインを取り除く。 ● React Hooksはコンポーネント内ならどこでも使える（if内、JSX内） ● Solid.jsはShow/Forコンポーネントを使わなくてもいい 

Rippleの特徴 RippleはTSRXファーストなフレームワークの１つ。 ● TSRXを前提とした優れた開発者体験 ○ AI含む ● 優れたパフォーマンス ○ 一般的なSignalsとは異なるアプローチ （時間都合で省略 詳細はAsk the Speakerへ） ● Viteベースのメタフレームワーク提供 ○ SSRなども含む ○ 絶賛進行中 

Svelte 5の開発から ● 独自構文・コンパイル方式でもユーザーは利用する ● Signals開発における知見 Reactの開発から ● Hooksの構造的な難しさ ● 大規模なReactからの移行難度 ○ TSRXをフレームワーク移行の中間パスとして利用可能に （Solid.js作者Ryan Carniato氏との対談で言及されている https://www.youtube.com/watch?v=xulUG54CW4c) Dominic Gannaway⽒の視点 

RippleはTSRXを使った新しいフレームワーク。 TSRXはTypeScriptベースなフレームワーク非依存の基盤言語。 いずれもStableではないものの、利用するのに十分な要素は揃っている。 気になった人は触ってみては？ おわりに