TSKaigi Hokuriku - TC39 Signals で描くJS/TS/フレームワークの未来の姿

このスライドはTSKaigi Hokurikuの登壇に使用したスライドのアーカイブになります。

チームラボでは、フロントエンドエンジニアを募集しています。
少しでも、チームラボにご興味をお持ち頂けましたら、採用ページをご覧頂けますと幸いです。
https://www.team-lab.com/recruit/

TSKaigi Hokurikuは、TypeScriptの国内最大級技術カンファレンス「TSKaigi」の北陸地域版で、2025年11月に金沢で開催されたイベントです。
https://hokuriku.tskaigi.org/

Transcript

1. © teamLab Inc. TC39 Signals で描く JS/TS/フレームワークの未来の姿 TSKaigi Hokuriku 2025 takuma-ru チームラボ パッケージチーム 所属
2. © teamLab Inc. アジェンダ 1. 自己紹介 2. TC39 Signals とは？ 3. 未来の姿 その1 : JS/TSだけでDOM操作が簡単に 4. 未来の姿 その2 : ブラウザ以外の環境でもリアクティブな処理を 5. 未来の姿 その2 : JSフレームワーク間のコアロジック共有 6. 余談 : 未来のJSフレームワーク Dathomir.js 作ってみました！！ 2
3. © teamLab Inc. 所属｜ 3 自己紹介 3 チームラボ パッケージチーム フロントエンド班 takuma-ru たくまる ♥ 🐈 ♥ Vue.js
4. © teamLab Inc. TC39 Signals とは？ 4
5. © teamLab Inc. TC39 Signals とは？ 名称 5 JavaScript Signals standard proposal Stage 0 1 2 2.7 3 4 現在検討中
6. © teamLab Inc. TC39 Signals とは？ 目的 6 JavaScriptエコシステム全体に 共通のリアクティブ基盤 を提供し、断片化を解消する
7. © teamLab Inc. TC39 Signals とは？ 7 リアクティブ変数を組み合わせたリアクティブ変数を作成する computed() signal() リアクティブ変数を作成する リアクティブ変数の変更に応じて実行する処理を定義する effect()
8. © teamLab Inc. TC39 Signals とは？ Signal リアクティブ変数を作成する 1. 値の比較 更新された場合値に変化があるか検証 2. フラグ更新 変化した場合フラグを立てる 3. 通知 propagateを使って依存に変更フラグを通知 8 https://deepwiki.com/stackblitz/alien-signals/3.1-signals
9. © teamLab Inc. TC39 Signals とは？ Computed リアクティブ変数を組み合わせたリアクティブ変数を作成する 1. フラグチェック 変更フラグを検証 2. 再実行 変更が通知されていたら関数を再実行 3. 通知 shallowPropagateを使って依存に変更フラグを通知 9 https://deepwiki.com/stackblitz/alien-signals/3.2-computed-values
10. © teamLab Inc. TC39 Signals とは？ Effect リアクティブ変数の変更に応じて実行する処理を定義する 1. フラグチェック 変更フラグを検証 2. 実行 変更が通知されていたら関数を再実行 10 https://deepwiki.com/stackblitz/alien-signals/3.4-effect-scopes
11. © teamLab Inc. 11 JS/TSだけで DOM操作が簡単に 未来の姿 その1
12. © teamLab Inc. JS/TSだけでDOM操作が簡単に 今 DOM更新 : 適宜記述 複雑なDOM操作困難 → 基本React, Vue.js … 12 let counter: number = 0; const setCounter = (value: number) => { counter = value; render(); // 状態変更のたびに手動でレンダリングを呼び出す }; const isEven: () => boolean = () => (counter & 1) == 0; const parity: () => string = () => isEven() ? "even" : "odd"; const render: () => void = () => element.innerText = parity(); // 状態の更新 setInterval(() => setCounter(counter + 1), 1000);
13. © teamLab Inc. JS/TSだけでDOM操作が簡単に 未来の姿 DOM更新 : effectで自動 依存関係が単純で 追いやすくなる →簡単なSPAは構築可能 になるかも！ 13 const counter: Signal<number> = new State(0); const isEven: Computed<boolean> = new Computed(() => (counter.get() & 1 == 0); const parity: Computed<string> = new Computed(() => isEven.get() ? "eve : "odd"); effect(() => element.innerText = parity.get()); //effectはコールバック内の ソース(parity)を自動追跡し、変更時のみ再実行される // 状態の更新 setInterval(() => counter.set(counter.get() + 1), 1000);
14. © teamLab Inc. 14 ブラウザ以外の環境でも リアクティブな処理を 未来の姿 その2
15. © teamLab Inc. ブラウザ以外の環境でもリアクティブな処理を 数ある目標のうちの１つ 15 リアクティブモデルを レンダリングビューから 完全に分離する = ブラウザ以外でも動くこと
16. © teamLab Inc. ブラウザ以外の環境でもリアクティブな処理を 未来の姿 16 ビルド システム ビルド結果を保持して、不必要なリビルドを回避する TUI Gemini CLI, Claude Code のような複雑な TUI のレンダリング etc...
17. © teamLab Inc. 17 JSフレームワーク間の コアロジック共有 未来の姿 その3
18. © teamLab Inc. JSフレームワーク間のコアロジック共有 今 18 z runtime system reactive system z runtime system reactive system z runtime system reactive system
19. © teamLab Inc. JSフレームワーク間のコアロジック共有 遠い未来の姿 19 runtime system runtime system runtime system 値を動的に管理する Signals reactive system
20. © teamLab Inc. JSフレームワーク間のコアロジック共有 遠い未来の姿 20 runtime system runtime system runtime system Signals reactive system Signals 3つの機能の 処理と型を覚えるだけ！ Signal: Signal<any> Computed: Computed<any> Effect: Effect<any>
21. © teamLab Inc. JSフレームワーク間のコアロジック共有 遠い未来の姿 21 runtime system runtime system runtime system runtime system Signals reactive system
22. © teamLab Inc. JSフレームワーク間のコアロジック共有 遠い未来の姿 22 runtime system runtime system runtime system runtime system Signals reactive system Signals 対応ライブラリ 共有できる - JS処理 - TS型, 推論 - ドキュメント
23. © teamLab Inc. 余談 : 23
24. © teamLab Inc. 余談 : 未来のJSフレームワークDathomir.js 作ってみました！ 24
25. © teamLab Inc. 未来のJSフレームワーク Dathomir.js 作ってみました！！ 25 dathomir-js/dathomir A full-stack JS framework that works with the new order TC39 Signals ✅ SPA ✅ JSX構文による記述 ✅ Signals によるリアクティブ化 🚧 SSR対応（with Vite Environment） ✅ Typescript native https://github.com/dathomir-js/dathomir
26. © teamLab Inc. 未来のJSフレームワーク Dathomir.js 作ってみました！！ 26 dathomir-js/dathomir A full-stack JS framework that works with the new order TC39 Signals https://github.com/dathomir-js/dathomir npm install @dathomir/core @dathomir/plugin
27. © teamlab Inc. takuma-ru チームラボ パッケージチーム 所属 TC39 Signals で描く JS/TS/フレームワークの未来の姿 TSKaigi Hokuriku 2025 ご清聴ありがとうございました
28. © teamLab Inc. デザインルール 28
29. © teamLab Inc. 配色 29
30. © teamLab Inc. 配色 　テキストと背景 1 ｜#202020　セクションタイトル等　 　テキストと背景 2 ｜##ffffff　背景色や濃い背景でのテキスト等 　テキストと背景 3 ｜#595959　本文等　 　テキストと背景 4 ｜#fed535　特殊なページの背景色等　 30 テキストと背景
31. © teamLab Inc. 配色 　アクセント 1 ｜#fed535　標準テーマカラー　 　アクセント 2 ｜#ffedad　目立たせたくないテーマカラー　 　アクセント 3 ｜#f90100　警告等　 　アクセント 4 ｜#f29b03　用途自由　 　アクセント 5 ｜#0485f7　用途自由　 　アクセント 6 ｜#49dc10　用途自由　 31 アクセント
32. © teamLab Inc. 配色 　リンク ｜#01c4d6　テキストリンクのみ　 32 その他
33. © teamLab Inc. タイポグラフィ 33
34. © teamLab Inc. タイポグラフィ 本文｜Zen Kaku Gothic New / 18pt / Reguler / テキストと背景 3 (#595959) 強調｜Zen Kaku Gothic New / 18pt / Bold / テキストと背景 3 (#595959) 34
35. © teamLab Inc. スライド種別 35
36. © teamLab Inc. スライド種別 36 タイトルスライド セクションヘッダー 一般的なセクションの区切りで使う
37. © teamLab Inc. スライド種別 37 タイトルと本文 一般的なセクション本文 2列（タイトルあり）
38. © teamLab Inc. スライド種別 38 タイトルのみ １列のテキスト
39. © teamLab Inc. スライド種別 39 セクションタイトルと説明 説明
40. © teamLab Inc. スライド種別 40 数字（大） 空白
41. © teamLab Inc. スライド種別 41 敬具 自己紹介 すでに作られているものではなく、 新規でスライド作成した方がいい
42. © teamLab Inc. 装飾アイテム 42
43. © teamLab Inc. 装飾アイテム 43 タイトル補足、通知等
44. © teamLab Inc. 装飾アイテム 素材サイト https://loosedrawing.com 44
45. © teamLab Inc. 装飾アイテム 45
46. © teamLab Inc. 改訂履歴 ver1.0.0 - 2025/08/25 初版 ver1.1.0 - 2025/08/26 全体デザイン調整 ver1.1.1 - 2025/09/09 社名修正, ロゴ最新化 46