Signalとは
Signalをリアクティブな状態コンテナーとして理解します。
「Signalとは」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
シグナルとは
シグナルは、現代のAngularで導入されたリアクティブなプリミティブです。値をラップし、その値が変化したときに関心のあるコンシューマーへ通知できます。
シグナルによって、Angularのリアクティビティは明示的かつ粒度の細かい、理解しやすいものになります。
リアクティビティが重要な理由
UIフレームワークでは、画面とデータを常に同期させる必要があります。データが変化したら、ビューも更新されるべきです。
シグナルを使うと、Angularは何が変化したのか、そして何がそれに依存しているのかを正確に把握できるため、影響を受けるビューの部分だけが更新されます。
シグナル以前の問題
以前のAngularはZone.jsと大まかな変更検知に依存していました。非同期イベントが発生するたびに、Angularはコンポーネントツリーの広い範囲を再チェックしていました。
この方法でも動作しますが、無駄が生じる可能性があります。シグナルを使えば、すべてを走査せずに細粒度の更新を行えます。
シグナルは値を保持する
シグナルは、値を包むスマートな箱だと考えてください。中身を読み取ったり、中身を別の値に置き換えたりできます。
シグナルを読み取ると、誰が読み取ったかも記録されるため、後から依存先を更新できます。
import { signal } from '@angular/core';
const count = signal(0);
// count is now a signal holding the number 0読み取りは関数呼び出し
重要なポイントは、シグナルを読み取るには関数のように呼び出すということです。括弧によって、Angularは現在の値を読み取っていることを認識します。
const count = signal(0);
console.log(count()); // 0 <-- note the ()シグナルは同期的に動作する
シグナルの読み取りは同期的に行われ、常に現在の値をすぐに返します。管理が必要なサブスクリプションやasync pipe、手動のunsubscribeはありません。
WritableとComputedの違い
signal()で作成する基本的なシグナルはwritableで、値を変更できます。
また、writableシグナルを基盤として、computedシグナル（派生値）やeffects（副作用）も利用できます。
シグナルは依存関係を追跡する
computed値やテンプレートがシグナルを読み取ると、Angularはその依存関係を自動的に記録します。
その後シグナルが変化すると、依存している対象だけが再計算されます。これがシグナルを効率的にする仕組みです。
グリッチのない更新
シグナルはグリッチが発生しないように設計されています。コンシューマーには常に一貫した値が渡され、中間状態や更新途中の不完全な状態で通知されることはありません。
これにより、複雑なリアクティブグラフも予測しやすくなります。
シグナルの定義場所
シグナルは@angular/coreの一部です。signal、computed、effectはそこからインポートします。
コンポーネントやサービス、その他のTypeScriptコード内で使用できます。
import { signal, computed, effect } from '@angular/core';コンポーネント内のシグナル
よくあるパターンは、コンポーネントのクラスフィールドとしてシグナルを宣言し、テンプレートで読み取る方法です。
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '' })
export class CounterComponent {
count = signal(0);
}理解度チェック：シグナルの基本
シグナルとは何か、理解できているか確認しましょう。
振り返り：シグナルとは
シグナルは、値をラップするリアクティブな仕組みで、値が変化するとコンシューマーに通知することを学びました。シグナルは括弧を付けて呼び出すことで読み取り、読み取りは同期的に行われます。また、シグナルによって細粒度でグリッチのない更新が可能になります。
次は、自分でシグナルを作成して読み取ります。
よくある質問
「Signalとは」レッスンは無料ですか？
はい。「Signalとは」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「Signalとは」で何を学びますか？
Signalをリアクティブな状態コンテナーとして理解します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Signalとは」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。