基本から上級まで: 角度信号を段階的にマスターする

角度信号が重要な理由: より良いアプリケーションへの初心者ガイド

Angular シグナルは、Angular アプリケーションの状態管理と反応性に対する革新的なアプローチを表します。この包括的なガイドでは、基本概念から高度な実装まで、シグナルについて知っておくべきことをすべて説明します。

角度信号とは何ですか?

シグナルは、Angular 16 で導入された新しいプリミティブで、リアクティブな状態管理を処理する方法を提供します。これらは、値が変更されたときに関心のある消費者に通知する値の特別なラッパーです。

シグナルの主な利点

• きめ細かい反応性: 変更された値に依存するコンポーネントのみが更新されます
• パフォーマンスの向上: 変更検出サイクル数の削減
• 開発者エクスペリエンスの向上: より明示的なデータ フロー
• タイプ セーフティ: 組み込みの TypeScript サポート
• フレームワークの統合: Angular のエコシステムとのシームレスな統合

シグナルの使用を開始する

基本的な信号作成

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

// Creating a simple signal
const count = signal(0);

// Reading signal value
console.log(count()); // Output: 0

// Updating signal value
count.set(1);

コンポーネントでの信号の使用

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

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

高度な信号操作

更新方法

1. set(): 新しい値を直接設定します

const name = signal('John');
name.set('Jane');

1. update(): 以前の値に基づいて値を更新します

const counter = signal(0);
counter.update(value => value + 1);

1. mutate(): オブジェクトまたは配列を変更します。

const user = signal({ name: 'John', age: 25 });
user.mutate(value => {
  value.age = 26;
});

計算された信号

計算された信号は、他の信号から自動的に値を取得します。

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

const price = signal(100);
const quantity = signal(2);
const total = computed(() => price() * quantity());

console.log(total()); // Output: 200

信号効果

エフェクトを使用すると、信号が変化したときに副作用を実行できます。

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

const message = signal('Hello');

effect(() => {
  console.log(`Message changed to: ${message()}`);
});

message.set('Hi'); // Logs: "Message changed to: Hi"

実際の例

ショッピングカートの実装

interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'app-shopping-cart',
  template: `
    <div>
      <h2>Shopping Cart</h2>
      <div *ngFor="let item of cartItems()">
        {{ item.name }} - ${{ item.price }}
      </div>
      <p>Total: ${{ cartTotal() }}</p>
    </div>
  `
})
export class ShoppingCartComponent {
  cartItems = signal<Product[]>([]);
  cartTotal = computed(() => 
    this.cartItems().reduce((total, item) => total + item.price, 0)
  );

  addToCart(product: Product) {
    this.cartItems.update(items => [...items, product]);
  }

  removeFromCart(productId: number) {
    this.cartItems.update(items => 
      items.filter(item => item.id !== productId)
    );
  }
}

シグナルによるフォーム処理

@Component({
  selector: 'app-user-form',
  template: `
    <form (submit)="handleSubmit($event)">
      <input
        [value]="formData().name"
        (input)="updateName($event)"
        placeholder="Name"
      >
      <input
        [value]="formData().email"
        (input)="updateEmail($event)"
        placeholder="Email"
      >
      <button type="submit">Submit</button>
    </form>
  `
})
export class UserFormComponent {
  formData = signal({
    name: '',
    email: ''
  });

  updateName(event: Event) {
    const input = event.target as HTMLInputElement;
    this.formData.update(data => ({
      ...data,
      name: input.value
    }));
  }

  updateEmail(event: Event) {
    const input = event.target as HTMLInputElement;
    this.formData.update(data => ({
      ...data,
      email: input.value
    }));
  }

  handleSubmit(event: Event) {
    event.preventDefault();
    console.log('Form submitted:', this.formData());
  }
}

ベストプラクティスとヒント

1. 信号の初期化
   • コンポーネント作成時に信号を初期化する
   • タイプの安全性を高めるために適切な入力を使用してください
   • デフォルト値を慎重に検討してください

// Good practice
const userProfile = signal<UserProfile | null>(null);

// Better practice with type safety
interface UserProfile {
  name: string;
  email: string;
}
const userProfile = signal<UserProfile>({
  name: '',
  email: ''
});

1. パフォーマンスの最適化

   • 導出値には計算された信号を使用します
   • 不必要なシグナル更新を避ける
   • 信号の依存関係を最小限に抑えます

2. エラー処理
   

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

// Creating a simple signal
const count = signal(0);

// Reading signal value
console.log(count()); // Output: 0

// Updating signal value
count.set(1);

一般的なシナリオと解決策

シナリオ 1: デバウンスされた信号の更新

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

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

シナリオ 2: 非同期データの読み込み

const name = signal('John');
name.set('Jane');

よくある質問

Q: シグナルと BehaviorSubject の違いは何ですか?
A: シグナルはよりシンプルでパフォーマンスが高く、Angular の変更検出に直接統合されています。 BehaviorSubject は、手動のサブスクリプション管理を必要とする RxJS オブザーバブルです。

Q: NgRx でシグナルを使用できますか?
A: はい、NgRx がグローバル アプリケーションの状態を処理する一方で、Signals はローカル コンポーネントの状態について NgRx を補完できます。

Q: シグナルは従来のプロパティ バインディングを置き換えますか?
A: いいえ、シグナルは追加ツールです。リアクティブな状態管理が必要な場合にこれらを使用しますが、より単純な場合には従来のプロパティ バインディングも引き続き有効です。

Q: シグナルは古い Angular バージョンでも利用できますか?
A: シグナルは Angular 16 で導入されました。古いバージョンの場合は、RxJS オブザーバブルなどの代替手段を使用する必要があります。

結論

Angular Signals は、アプリケーションでリアクティブな状態管理を処理するための強力かつ効率的な方法を提供します。このガイドで概説されている例とベスト プラクティスに従うことで、独自のプロジェクトにシグナルを実装する準備が整います。まずは簡単なパターンから始めて、ニーズが高まるにつれて徐々に高度なパターンを組み込んでいくようにしてください。

シグナルをマスターする鍵は、練習し、その反応的な性質を理解することです。まずは基本的な例を実装し、概念に慣れてきたらより複雑なシナリオに進みます。

以上が基本から上級まで: 角度信号を段階的にマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。