【Angular】Signalsで状態管理を実装する方法

2026年8月24日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

AngularのSignalsで状態管理を実装する方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。

「AngularのSignalsで状態管理を実装する方法を知りたい」とお考えではありませんか？

Angularアプリで状態管理をシンプルに実装したいと考えている方へ。

Signalsを使えば、RxJSのSubscribe管理をせずに状態の変化を検知できるようになります。

いずみ

サクッと解説します。

ということで、本記事ではAngularのSignalsで状態管理を実装する方法を解説します。

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式

執筆者／監修者

フリーランスエンジニア（保有資格13個、企業と直接契約）
ブログ・アフィリエイト歴7年（2018年〜）
ブランドせどりで月利50万円⇨脱サラ
投資（仮想通貨・FX）歴7年（2018年〜）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

よく読まれている記事はこちら！

【Angular】Signalsで状態管理を実装する方法

早速ですが、AngularのSignalsで状態管理を実装する方法を解説します。

Angular Signalsとは

Signalsは、値の変化を自動的に検知して画面を更新する仕組みです。

signal関数で状態を作成すると、値が変わったタイミングだけコンポーネントが再計算されます。

RxJSのObservableと違い、SubscribeやUnsubscribeの管理が不要になります。

いずみ

RxJSは非同期処理の管理に強い一方、状態管理だけならSignalsの方がシンプルに書けます。

事前準備

Angular CLIでプロジェクトを作成します。

ng new signal-sample

standaloneコンポーネントが既定で生成されるので、NgModuleの作成は不要です。

Signalsは標準機能としてAngularに組み込まれているので、追加のライブラリインストールは不要です（バージョンによって細部の仕様は変更される可能性があります）。

実装（コード付き）

カウンターコンポーネントを例に、signal・computed・effectを順番に実装してみます。

STEP

signalで状態を定義する

まずカウンターの値をsignalで定義します。

import { signal } from '@angular/core';

export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(value => value + 1);
  }
}

テンプレートでは、count()のように関数呼び出しの形で値を読み取ります。

<p>カウント: {{ count() }}</p>
<button (click)="increment()">+1</button>

いずみ

signalの値は直接書き換えず、setやupdateメソッド経由で更新します。

STEP

computedで算出値を作る

count信号から偶数か奇数かを判定する算出値を作成します。

import { computed, signal } from '@angular/core';

export class CounterComponent {
  count = signal(0);
  isEven = computed(() => this.count() % 2 === 0);
}

computedで作成した値は読み取り専用になり、count信号が変化するたびに自動で再計算されます。

STEP

effectで副作用を実行する

count信号の変化をログに出力する副作用を追加します。

import { effect, signal } from '@angular/core';

export class CounterComponent {
  count = signal(0);

  constructor() {
    effect(() => {
      console.log('カウントが変化しました:', this.count());
    });
  }
}

effect内で参照したsignalが自動的に依存関係として登録されるので、依存配列を手動で書く必要はありません。

いずみ

effectはログ出力やlocalStorageへの保存など、画面表示以外の副作用に使うのがおすすめです。

input()でコンポーネント間に値を渡す

親コンポーネントから子コンポーネントへ値を渡す場合は、input関数を使います。

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-badge',
  standalone: true,
  template: `<span>{{ label() }}</span>`,
})
export class BadgeComponent {
  label = input.required<string>();
}

input.requiredを使うと、値を渡し忘れた場合にコンパイル時のエラーで気付けます。

model()で双方向バインディングを実装する

親子間で値を同期させたい場合は、model関数を使います。

import { Component, model } from '@angular/core';

@Component({
  selector: 'app-toggle',
  standalone: true,
  template: `<button (click)="checked.set(!checked())">切り替え</button>`,
})
export class ToggleComponent {
  checked = model(false);
}

呼び出し側のテンプレートでは、banana-in-a-box構文でバインディングします。

<app-toggle [(checked)]="isAdmin" />

checked信号の値が変わると、親コンポーネントのisAdmin信号にも自動で反映されます。

いずみ

modelはON/OFFの切り替えUIやフォーム部品を自作するときに特に便利です。

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式

【厳選】フリーランスエンジニアにおすすめなエージェント3選

フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。

僕が実際に利用しているおすすめエージェントを紹介しますね。

いずみ

エージェントは必ず複数登録してください。

担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…

僕は実際に5つのエージェントを使い回していますよ。

フリーランスを始めるなら「レバテックフリーランス」

案件数	マージン率	単価
約88,000件	非公開	高
初心者	福利厚生	申し込み
		無料

Good Point

業界最大級の案件数。
業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
案件参画中のフォローの充実。

※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。

レバテックフリーランス は業界最大手のフリーランスエージェントです。

とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！

いずみ

僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス です。

保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。

詳細はコチラ

公式サイトを詳しく見る

手厚い保障を重視したいなら「Midworks 」

案件数	マージン率	単価
約10,000件	非公開	中
初心者	福利厚生	申し込み
		無料

Good Point

手厚い保障で正社員並みの安心感。
還元率60％超え＆単価公開でクリアな契約。
給与保障制度（審査あり）。

Midworks は手厚い保障が特徴のフリーランスエージェントです。

フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。

いずみ

僕も何度か案件を紹介してもらいました。

自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。

詳細はコチラ

公式サイトを詳しく見る

週2〜3日の案件探しなら「ITプロパートナーズ」

案件数	マージン率	単価
約5,000件	非公開	高
初心者	福利厚生	申し込み
経験者向け		無料

Good Point

IT案件に特化したフリーランスエージェント。
週2〜3日の案件が豊富。
リモート案件が多く、直エンドなので単価も高い。

※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。

ITプロパートナーズ はIT案件に特化したフリーランスエージェントです。

週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。

いずみ

週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。

とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！

詳細はコチラ

公式サイトを詳しく見る

よくある質問

SignalsとRxJSはどちらを使うべきですか？

コンポーネントの状態管理はSignals、HTTP通信やイベントのストリーム処理はRxJSという使い分けがおすすめです。

両方を組み合わせて使うことも可能です。

既存のコンポーネントを全てSignalsに書き換える必要がありますか？

既存のコードを一括で書き換える必要はありません。

新規のコンポーネントや状態管理が複雑な箇所から段階的に導入するだけでも十分効果があります。

effectを使うとパフォーマンスに影響しますか？

依存するsignalが変化したときだけ実行されるため、無駄な再計算は発生しません。

ただし、effect内で重い処理を行うと画面の応答性に影響するので、重い処理は別途デバウンスするなどの工夫が必要です。

まとめ

今回は、AngularのSignalsで状態管理を実装する方法について解説しました。

以下が本記事のまとめになります。

まとめ

signalで状態を定義し、setやupdateで値を更新する。
computedで算出値を作ると、依存するsignalの変化に応じて自動で再計算される。
effectでログ出力などの副作用を実行できる。
input()やmodel()を使うと、コンポーネント間の値の受け渡しや双方向バインディングを簡潔に書ける。

まとめ

おすすめ本

Angularアプリケーションプログラミング

¥4,070 （2023/07/23 15:56時点 | Amazon調べ）

Amazon

＼楽天ポイント4倍セール！／

楽天市場

ポチップ

Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました！

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式