IT用語
(
ひよぺん
)
Home
コラム
用語集
About
検索
Ctrl K
Esc
見つかりませんでした
調べたいIT用語を入力してね
シグナル(フロントエンド状態管理)
シグナル
プログラミング
用語集
› 💻 プログラミング › シグナル(フロントエンド状態管理)
【シグナル】
シグナル(フロントエンド状態管理) とは?
公開:
2026年8月7日
💡 変化を「ピンポイント」に届ける伝書鳩
📌 このページのポイント
値(
シグナル
)が変わると、購読している
コンポーネント
だけが再描画される
React
のようなVirtual
DOM
全体の差分比較が不要で、パフォーマンスが高い
SolidJS
・
Angular
・Preactなど多くの
フレームワーク
が採用・検討している
TC39(
JavaScript
標準化団体)での仕様提案も進行中
シグナル — 細粒度リアクティビティ
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(信号)」はもともと電気工学の用語で、変化を伝える波形のことだよ。フロントエンドでは「値の変化を購読者に伝える仕組み」として使われるようになったんだよ
🔗 あわせて読みたい
リアクティブプログラミング とは?
状態管理 とは?
仮想DOM とは?
シェアする
X
URLコピー
← 用語集にもどる