0Pricing
Angular Academy · レッスン

Signalの作成と読み取り

書き込み可能なSignalを宣言し、その値を読み取ります。

「Signalの作成と読み取り」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

シグナルの作成

signal()ファクトリに初期値を渡すことで、writableシグナルを作成します。

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

const c = signal(0); // initial value is 0

初期値によって型が決まる

TypeScriptは初期値からシグナルの型を推論します。signal(0)はWritableSignal<number>です。

const name = signal('Alice'); // WritableSignal<string>
const flag = signal(false);    // WritableSignal<boolean>

シグナルの読み取り

シグナルを呼び出すと、現在の値を読み取れます。保存されている値が返され、リアクティブコンテキスト内であれば依存関係も登録されます。

const c = signal(0);
const current = c(); // current === 0

複数回の読み取り

シグナルは何度でも読み取れます。呼び出すたびに、その時点での最新の値が返されます。

const c = signal(10);
console.log(c()); // 10
console.log(c()); // 10

明示的な型指定

初期値だけでは型を完全に表せない場合、明示的に型を指定できます。たとえば、nullにもなり得る値が該当します。

const user = signal<string | null>(null);
console.log(user()); // null

オブジェクトのシグナル

シグナルは、オブジェクトや配列を含む任意の値を保持できます。

const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0

配列のシグナル

配列も同じように扱えます。読み取りによって、現在の配列参照が返されます。

const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2

クラスフィールドとしてのシグナル

コンポーネントやサービスでは、シグナルをフィールドとして宣言します。インスタンスの作成時に一度だけ初期化されます。

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

@Injectable({ providedIn: 'root' })
export class CounterStore {
  count = signal(0);
}

コンポーネントクラス内での読み取り

シグナルは、メソッド内など、クラス内のどこからでも呼び出して読み取れます。

export class CounterStore {
  count = signal(0);
  isZero(): boolean {
    return this.count() === 0;
  }
}

読み取り専用アクセス

コンシューマーから変更できない形でシグナルを公開したい場合は、asReadonly()メソッドを使って公開できます。

const internal = signal(0);
export const value = internal.asReadonly();
// value() works; value.set is not available

命名規則

よくある規則は、シグナルが保持する値にちなんで名前を付けることです（例：count、items）。読み取りが通常のアクセサーのようにcount()と見えるためです。

理解度チェック：シグナルの作成

シグナルの作成と読み取りについての理解度を確認しましょう。

振り返り：作成と読み取り

signal(initialValue)でwritableシグナルを作成する方法、TypeScriptがその型を推論する仕組み、そしてシグナルを呼び出して読み取る方法を学びました。また、読み取り専用アクセスを公開するasReadonly()も確認しました。次は、シグナルの値を更新します。

よくある質問

「Signalの作成と読み取り」レッスンは無料ですか？

はい。「Signalの作成と読み取り」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「Signalの作成と読み取り」で何を学びますか？

書き込み可能なSignalを宣言し、その値を読み取ります。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「Signalの作成と読み取り」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Signalとは
  2. Signalの作成と読み取り
  3. setとupdateによるSignalの更新
  4. テンプレート内のSignal
← Angular Academyに戻る