【シグナル】

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

公開:
💡 変化を「ピンポイント」に届ける伝書鳩
📌 このページのポイント
シグナル — 細粒度リアクティビティ Signal count = 5 コンポーネントA count を表示 コンポーネントB count を計算 コンポーネントC 購読なし → 無影響 値変化で通知 値変化で通知 通知なし 購読しているコンポーネントだけが再描画される
シグナルの値が変わると購読者にだけ通知が届くイメージ
ひよこ ひよこ
ペンギン先生、フロントエンドで「シグナル」って言葉をよく見るんだけど、Reactのstateと何が違うの?
ペンギン先生 ペンギン先生
Reactのstateが変わると、そのコンポーネント全体(と子コンポーネント)が再レンダリングされるんだ。でもシグナルは「その値を使っている場所だけ」をピンポイントで更新するよ。
ひよこ ひよこ
ピンポイントって、どういう仕組みなの?
ペンギン先生 ペンギン先生
シグナルを「読む」と、自動的に「この場所はこの値を使っている」と登録される仕組みだよ。値が変わると登録されたすべての場所に通知が飛ぶんだ。これを「細粒度リアクティビティ」と呼ぶんだね。
ひよこ ひよこ
Virtual DOMを使わないってこと?
ペンギン先生 ペンギン先生
そうだよ。ReactはVirtual DOM全体を比較して差分を見つけるアプローチだけど、シグナルは「最初から変わった場所を知っている」から比較作業自体が不要になるんだ。だからSolidJSみたいなフレームワークReactより高速なベンチマーク結果を出すことが多いよ。
ひよこ ひよこ
じゃあReactシグナルを使えばいいんじゃないの?
ペンギン先生 ペンギン先生
React公式はシグナルの採用に慎重な姿勢を取っているよ。シグナルはミュータブル(変更可能)な設計で、Reactが大切にしている「状態は不変」という原則と相性が悪いんだ。ただTC39でJavaScript言語レベルのシグナル仕様が提案されていて、将来は標準機能になるかもしれないね。
ひよこ ひよこ
TC39の標準化って、どのくらい進んでいるの?
ペンギン先生 ペンギン先生
2024年にTC39の「Stage 1」(提案受理)に進んだよ。Standardになるには複数のステージを経る必要があるから実用化にはまだ時間がかかるけど、AngulerやPreactがすでに独自実装を本番採用していて、エコシステム全体でシグナルへの移行が加速しているんだ。
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
シグナル」って出てきたら「変化を必要な場所にだけ伝える状態管理の仕組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Signals Pattern」 = シグナルパターン
💬 「Signal(信号)」はもともと電気工学の用語で、変化を伝える波形のことだよ。フロントエンドでは「値の変化を購読者に伝える仕組み」として使われるようになったんだよ
← 用語集にもどる