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

by aose

Embed

Start on current slide

Slide 1

Slide 1 text

alien-signalsと⾃作OSSで実現するフレームワーク⾮依存なロジック共通化の探求 Vue Fes Japan 2025

Slide 2

Slide 2 text

SPEAKER フロントエンドエンジニア Aose Yuu ● CLI / Vim盆栽好き ● Composition API好き ● 趣味は散歩とドラム🥁

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

フレームワーク⾮依存なロジック共通化とは？

Slide 7

Slide 7 text

INDEX ⽬次 1. マルチフレームワークにおける課題 2. 課題解決のアプローチ a. alien-signalsをベースにした⾃作ライブラリ b. FW⾮依存なロジック共通化の簡単な例 c. 同じ開発者体験を実現するために⼯夫したこと 3. まとめ

Slide 8

Slide 8 text

Slide 9

Slide 9 text

①マルチフレームワークにおける課題

Slide 10

Slide 10 text

プロダクトごとに使⽤FWが異なる ①マルチフレームワークにおける課題

Slide 11

Slide 11 text

開発時期‧開発メンバー‧開発規模すべてバラバラ ①マルチフレームワークにおける課題

Slide 12

Slide 12 text

同じFWでもデザインシステムが共通化できていない ①マルチフレームワークにおける課題

Slide 13

Slide 13 text

歴史の⻑いプロダクトは趣のある味わい深い実装がたくさん重複実装歴史的経緯 R.I.P.な古コード…… ①マルチフレームワークにおける課題

Slide 14

Slide 14 text

類似処理をプロダクトごとに実装せざるを得ない 😭 ①マルチフレームワークにおける課題

Slide 15

Slide 15 text

フレームワークに依存しないロジック共通化を実現したい！ ①マルチフレームワークにおける課題

Slide 16

Slide 16 text

無いなら作ればいいじゃない 🍳 ①マルチフレームワークにおける課題

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

できたものがこちらです 󰳏 https://github.com/sigrea/core ①マルチフレームワークにおける課題

Slide 20

Slide 20 text

sigrea とは？（発⾳：シグリア /sɪɡriə/） ● signal ベースの reactive ライブラリ ● alien-signals ➡ alien-deepsignals ➡ sigrea ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ

Slide 21

Slide 21 text

sigrea の特徴 ● Vue の Composition API にかなり近い書き⼼地 ○ .value, .value = XX ○ signal, deepSignal, computed, watch, ...more ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ

Slide 22

Slide 22 text

sigrea の特徴 ● ライフサイクル周りのロジック実装も可能 ○ defineLogic, onMount, onUnmount ● ロジック単体でライフサイクルを含めたテストが書ける ○ mountLogic, cleanupLogic ● ※ Nano Stores から着想を得ました ○ https://github.com/nanostores/nanostores?tab=readme-ov-ﬁle#tests ○ https://github.com/nanostores/nanostores?tab=readme-ov-ﬁle#move-logic-from-co mponents-to-stores ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ

Slide 23

Slide 23 text

各npmパッケージの違い ● @sigrea/core …… ロジック定義に必要な関数群 ● @sigrea/vue …… Vue 向けのアダプター ● @sigrea/react …… React 向けのアダプターアダプターは各FWが扱える形に変換する「ロジック翻訳機」 ② 課題解決のアプローチ - alien-signalsをベースにした⾃作ライブラリ

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例

Slide 27

Slide 27 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 Composition APIっぽい 👀

Slide 28

Slide 28 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例ライフサイクルも実装可能

Slide 29

Slide 29 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例

Slide 30

Slide 30 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例

Slide 31

Slide 31 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例ロジックから取り出すだけ！

Slide 32

Slide 32 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例そのままtemplateで使⽤！

Slide 33

Slide 33 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例

Slide 34

Slide 34 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例

Slide 35

Slide 35 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 Vueとほぼ⼀緒 🤝

Slide 36

Slide 36 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例 Vueとほぼ⼀緒 🤝

Slide 37

Slide 37 text

② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例

Slide 38

Slide 38 text

1つの共通TSロジックファイルから各FW向けの実装が可能になる ② 課題解決のアプローチ - FW⾮依存なロジック共通化の簡単な例

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

ライフサイクルのズレ 1 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと ● Vue ではコンポーネントの setup() が呼ばれた時点で、そのコンポーネントに結び付いたリアクティブな状態とクリーンアップが⾃動的に登録される ● アンマウント時には⾃動的にクリーンアップが実⾏される ⬇ ● React の StrictMode では「マウント → 即クリーンアップ → 再マウント」が実⾏される ● 最後のアンマウント時だけクリーンアップする仕組みを実装した

Slide 42

Slide 42 text

ライフサイクルのズレ 1 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと

Slide 43

Slide 43 text

リアクティブ値の購読⽅式の違い 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

Slide 44

Slide 44 text

リアクティブ値の購読⽅式の違い 2 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと ● 共通のハンドラー関数で値の変化を検知して、 Vue では shallowRef ∕React では useSyncExternalStore に渡すことで、どちらでも同じように値を扱えるようにした

Slide 45

Slide 45 text

ロジック再⽣成のタイミング制御 3 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと ● Vue では props が変わるたび setup() が再実⾏されて、⾃動的にロジックが差し替わる ● React ではいつ再マウントすべきかを⾃⼒で判断しないと古いロジックが残ってしまう ⬇ ● 再レンダリング時に「前回の props と同じかどうか」をチェックする仕組みを実装した ● これにより、 props に変化があったときだけ新しいロジックへ差し替えることで解決した

Slide 46

Slide 46 text

ロジック再⽣成のタイミング制御 3 ② 課題解決のアプローチ - 同じ開発者体験を実現するために⼯夫したこと

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

sigrea を導⼊することで…… ● プロダクトごとに使⽤FWが異なる ● 同じFWを使っていても実装⽅法がバラバラ ● ロジックとコンポーネントが密結合している ● 類似処理をプロダクトごとに実装せざるを得ない ③ まとめ

Slide 50

Slide 50 text

sigrea を導⼊することで…… ● プロダクトごとに使⽤FWが異なる ● 同じFWを使っていても実装⽅法がバラバラ ● ロジックとコンポーネントが密結合している ● 類似処理をプロダクトごとに実装せざるを得ない FW非依存なロジック共通化によって根本的な解決ができる！ ③ まとめ

Slide 51

Slide 51 text

● プロダクトごとに使⽤FWが異なる ● 同じFWを使っていても実装⽅法がバラバラ ● ロジックとコンポーネントが密結合している ● 類似処理をプロダクトごとに実装せざるを得ない FW非依存なロジック共通化によって根本的な解決ができる！（かもしれない） ③ まとめ sigrea を導⼊することで……

Slide 52

Slide 52 text

FW⾮依存なロジック共通化 ➡ 可能性のかたまり結論 ①

Slide 53

Slide 53 text

銀の弾丸は存在しない結論 ② カッコよく⾔ってみた

Slide 54

Slide 54 text

コントリビュートお待ちしております 🎩 ぜひ！

Slide 55

Slide 55 text

FOLLOW ME!! Yappli Tech Blog Yappli Developers カジュアル⾯談 @yappli_dev https://tech.yappli.io/ https://open.talentio.com/r/1/c/yappli/pages/59642