alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS

Vue Fes Japan 2025（2025/10/25開催）のスポンサーLTでの登壇資料です。

---

マルチプロダクト環境では、似通った処理やロジックを各プロダクトごとに重複実装しがちです。
本セッションでは、"ロジックそのものをフレームワークから切り離し、 Signals をベースとした純粋な TypeScript で一度だけ実装し、各フレームワークで同じ実装を活用する" というアプローチを共有します。
このアプローチを実現するために、 Vue.js 3.6 でも採用される alien-signals をベースとした自作 OSS の『 sigrea 』というライブラリを構築しました。
このライブラリを用いて、フレームワークに依存しないロジックを定義し、各フレームワークへ薄いアダプターで橋渡しする設計方法をお話しします。

---

■ GitHub
- https://github.com/sigrea/core
- https://github.com/sigrea/vue
- https://github.com/sigrea/react

■ npmjs
- https://www.npmjs.com/package/@sigrea/core
- https://www.npmjs.com/package/@sigrea/vue
- https://www.npmjs.com/package/@sigrea/react

■ X (Twitter)
https://x.com/aose_developer

Transcript

1. alien-signalsと⾃作OSSで実現する フレームワーク⾮依存な ロジック共通化の探求 Vue Fes Japan 2025
2. SPEAKER フロントエンドエンジニア Aose Yuu • CLI / Vim盆栽好き • Composition API好き • 趣味は散歩とドラム🥁
6. フレームワーク⾮依存な ロジック共通化とは？
7. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
8. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
9. ①マルチフレームワークにおける課題
10. プロダクトごとに使⽤FWが異なる ①マルチフレームワークにおける課題
11. 開発時期‧開発メンバー‧開発規模 すべてバラバラ ①マルチフレームワークにおける課題
12. 同じFWでもデザインシステムが 共通化できていない ①マルチフレームワークにおける課題
13. 歴史の⻑いプロダクトは 趣のある味わい深い実装がたくさん 重複実装 歴史的経緯 R.I.P.な古コード…… ①マルチフレームワークにおける課題
14. 類似処理をプロダクトごとに 実装せざるを得ない 😭 ①マルチフレームワークにおける課題
15. フレームワークに依存しない ロジック共通化を実現したい！ ①マルチフレームワークにおける課題
16. 無いなら作ればいいじゃない 🍳 ①マルチフレームワークにおける課題
17. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
18. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
19. できたものがこちらです 󰳏 https://github.com/sigrea/core ①マルチフレームワークにおける課題
20. sigrea とは？ （発⾳：シグリア /sɪɡriə/） • signal ベースの reactive ライブラリ • alien-signals ➡ alien-deepsignals ➡ sigrea ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ
21. sigrea の特徴 • Vue の Composition API にかなり近い書き⼼地 ◦ .value, .value = XX ◦ signal, deepSignal, computed, watch, ...more ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ
22. sigrea の特徴 • ライフサイクル周りのロジック実装も可能 ◦ defineLogic, onMount, onUnmount • ロジック単体でライフサイクルを含めたテストが書ける ◦ mountLogic, cleanupLogic • ※ Nano Stores から着想を得ました ◦ https://github.com/nanostores/nanostores?tab=readme-ov-file#tests ◦ https://github.com/nanostores/nanostores?tab=readme-ov-file#move-logic-from-co mponents-to-stores ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ
23. 各npmパッケージの違い • @sigrea/core …… ロジック定義に必要な関数群 • @sigrea/vue …… Vue 向けのアダプター • @sigrea/react …… React 向けのアダプター アダプターは各FWが扱える形に変換する「ロジック翻訳機」 ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ
24. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
25. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
26. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例
27. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 Composition APIっぽい 👀
28. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 ライフサイクルも実装可能
29. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例
30. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例
31. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 ロジックから取り出すだけ！
32. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 そのままtemplateで使⽤！
33. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例
34. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例
35. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 Vueとほぼ⼀緒 🤝
36. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 Vueとほぼ⼀緒 🤝
37. ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例
38. 1つの共通TSロジックファイルから 各FW向けの実装が可能になる ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例
39. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
40. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
41. ライフサイクルのズレ 1 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと • Vue ではコンポーネントの setup() が呼ばれた時点で、そのコンポーネントに結び付いた リアクティブな状態とクリーンアップが⾃動的に登録される • アンマウント時には⾃動的にクリーンアップが実⾏される ⬇ • React の StrictMode では「マウント → 即クリーンアップ → 再マウント」が実⾏される • 最後のアンマウント時だけクリーンアップする仕組みを実装した
42. ライフサイクルのズレ 1 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと
43. リアクティブ値の購読⽅式の違い 2 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと • Vue では外部の状態と繋ぐときは shallowRef を使う https://ja.vuejs.org/api/reactivity-advanced#shallowref • React では useSyncExternalStore で「変化を通知する関数」と「最新値を返す関数」 を明⽰的に渡す必要がある https://ja.react.dev/reference/react/useSyncExternalStore#subscribing-to-an-external-store
44. リアクティブ値の購読⽅式の違い 2 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと • 共通のハンドラー関数で値の変化を検知して、 Vue では shallowRef ∕React では useSyncExternalStore に渡すことで、どちらでも同じように値を扱えるようにした
45. ロジック再⽣成のタイミング制御 3 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと • Vue では props が変わるたび setup() が再実⾏されて、⾃動的にロジックが差し替わる • React ではいつ再マウントすべきかを⾃⼒で判断しないと古いロジックが残ってしまう ⬇ • 再レンダリング時に「前回の props と同じかどうか」をチェックする仕組みを実装した • これにより、 props に変化があったときだけ新しいロジックへ差し替えることで解決した
46. ロジック再⽣成のタイミング制御 3 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと
47. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
48. INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ
49. sigrea を導⼊することで…… • プロダクトごとに使⽤FWが異なる • 同じFWを使っていても実装⽅法がバラバラ • ロジックとコンポーネントが密結合している • 類似処理をプロダクトごとに実装せざるを得ない ③ まとめ
50. sigrea を導⼊することで…… • プロダクトごとに使⽤FWが異なる • 同じFWを使っていても実装⽅法がバラバラ • ロジックとコンポーネントが密結合している • 類似処理をプロダクトごとに実装せざるを得ない FW非依存なロジック共通化によって根本的な解決ができる！ ③ まとめ
51. • プロダクトごとに使⽤FWが異なる • 同じFWを使っていても実装⽅法がバラバラ • ロジックとコンポーネントが密結合している • 類似処理をプロダクトごとに実装せざるを得ない FW非依存なロジック共通化によって根本的な解決ができる！ （かもしれない） ③ まとめ sigrea を導⼊することで……
52. FW⾮依存なロジック共通化 ➡ 可能性のかたまり 結論 ①
53. 銀の弾丸は存在しない 結論 ② カッコよく⾔ってみた
54. コントリビュート お待ちしております 🎩 ぜひ！
55. FOLLOW ME!! Yappli Tech Blog Yappli Developers カジュアル⾯談 @yappli_dev https://tech.yappli.io/ https://open.talentio.com/r/1/c/yappli/pages/59642