【シグナル】

シグナル(フロントエンド状態管理) とは?

最終更新:
💡 変化を「ピンポイント」に届ける伝書鳩

値と、その値を読む計算や表示との依存関係を追跡する状態管理の仕組み。値の変更に応じて必要な計算や表示の更新を促す。追跡や再描画の単位はフレームワークによって異なる。

📌 このページのポイント
シグナル:値と依存先を結ぶ count = 5 値の表示 countを読む 派生した計算 count × 2 変更を伝える 追跡する文脈で読んだ依存先を記録 再計算・描画の単位は実装による
リアクティブな文脈での読み取りを追跡する例。描画方式や更新単位は実装により異なる
ひよこ ひよこ
ペンギン先生 ペンギン先生
値と、その値を使う計算や表示を結び付ける仕組みだよ。カウンターの値が変わったら、その値に依存する表示や計算を更新する。全部を自分で呼び出して更新する手間を減らせるんだ。
ひよこ ひよこ
使っている場所はどうやって分かるの?
ペンギン先生 ペンギン先生
リアクティブな処理の中でシグナルを読むと、その処理との依存関係を記録する仕組みがあるよ。たとえばcountからdoubleCountを計算すれば、countの変更でdoubleCountの再計算が必要だと分かる。通常の変数を読むだけで、すべてが追跡されるわけではないんだ。
ひよこ ひよこ
読んだらいつでも追跡される?
ペンギン先生 ペンギン先生
追跡する実行文脈とタイミングが大事だよ。Angularのcomputedやテンプレートなどには追跡する文脈がある。一方、非同期処理でawaitの後に読んだ値などは、自動では依存関係にならない場合がある。使う実装の規則を確認しよう。
ひよこ ひよこ
シグナルならVirtual DOMは不要で、必ず速い?
ペンギン先生 ペンギン先生
描画方式と状態の依存追跡は分けて考えよう。SolidJSは必要な表示箇所を細かく更新し、Angularはテンプレートで読むシグナルをコンポーネントの依存として追跡する。どこまで再描画するかや性能は実装と使い方によるので、全製品が同じ動きとは限らないよ。
ひよこ ひよこ
JavaScript標準の機能なの?
ペンギン先生 ペンギン先生
TC39に標準化の提案があるけれど、確定した共通APIとして扱わないでね。提案はフレームワークが土台に使う依存グラフなどを検討している。すでに使える各ライブラリのシグナルと、標準案のAPIは区別するんだ。
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「シグナル」って出てきたら「変化を必要な場所にだけ伝える状態管理の仕組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Signal」 = 信号
💬 ここでは値の変化を依存先へ伝える仕組みの名前だよ。OSのプロセスへ送るシグナルとは、使われる文脈が違うんだ。

参考資料

← 用語集にもどる