Angular信号を理解する: 総合ガイド

進化し続ける Web 開発の世界において、AngularはAngularプログラマーの能力を絶え間なく強化することで道を切り開き続けています。改善への揺るぎない取り組みで知られるこの製品は、再び可能性の限界を押し広げ、今回はAngular v16 リリースでエキサイティングな新機能であるAngular Signals を導入します。

初めて使用する場合、またはすでに開発者プレビューを試したことがあるが、Signal の仕組みについて詳しく知りたい場合は、この包括的なガイドが理解するのに役立ちます。

Angularシグナルとは何ですか、そして今すぐその使い方を学ぶことが重要なのはなぜですか?

本質的に、Angular Signals は引数ゼロの関数 [(() => T)] として機能し、実行時に特定の値を返す反応性モデルです。どうやってそれを行うのでしょうか?ここに重要なことが 1 つあります - ゲッター関数です。getter 関数の呼び出しは現在の値を返し、依存関係が変更されると、Angularはこれらのリアクティブ値を自動的に認識して更新します。

このプロセスを視覚化するのに役立つ図を次に示します。

モデルを更新すると、Angularは変更を対応するビューに自動的に適用します。これにより、シームレスで同期されたモデルビューの相互作用が可能になり、最終的にはよりスムーズな UX につながります。

Angular Signals は Observer Design Pattern と呼ばれるパターンに基づいているため、値を格納する Publisher と、それに関心のある Subscriber のリストがあります。値が変更されると、通知が届きます。つまり、変更されたのは 1 つだけなので、更新する必要があることを示しています。これにより、Angularコンポーネントツリー全体で変更を確認する必要がなくなります。ここでは、過度に複雑な操作はありません。

この機能の大きな利点が 1 つあるとすれば、状態値の更新を簡略化し、レンダリング パフォーマンスを最適化できることです。これを使用すると、開発者は状態の変更をきめ細かく制御できるようになり、次のようなメリットが得られます。

• 自動依存関係追跡: Angularは、リアクティブ値を自動的に認識して更新します。
• より簡単に処理できる状態更新: 最小限の複雑さで状態変更をきめ細かく制御できます。
• 最適化されたパフォーマンス: コンポーネント ツリー全体に変更をチェックする必要がないため、パフォーマンスが向上します。
• 遅延評価される計算値。
• Granular state tracking.
• コンポーネントの外部にシグナルを実装する可能性(依存関係の注入でうまく機能します)。
• Improved Angular Change Detection.
• アプリのパフォーマンスと保守性が向上します。

Angular Signals vs RxJS

これらすべてにより、多くの人はAngular Signals が RxJS と同じくらい強力ですが、構文が単純であると考えています。これはRxJSにとって何を意味しますか?それは運命づけられているのでしょうか?私の意見ではそうではありません。この新機能は、手動のサブスクリプション管理やメモリリークのリスクなど、RxJSの複雑さの一部を隠すことができるかもしれませんが、すぐにRxJSに取って代わるわけではありません。

この新機能の重要性を強調し、定義しました。AngularでSignalsの作成方法と使用方法の説明に移りましょう。

ハンズオン: Angular Signals の使用を開始する

3つのプリミティブを調べて、それらがどのように機能し、それぞれをいつ使用するかを示します。

前提条件

• Angularを使用した経験。
• フレームワークのリアクティブ原則に関する基本的な知識。
• Angular 16 version installed or running.

まず最初に、このまったく新しい機能は、書き込み可能な信号、計算された信号、およびエフェクトの3つのリアクティブプリミティブを提供し、Angularアプリでリアクティブを実現できるようにします。

1. 書き込み可能な信号の使用

これらは直接更新できるシグナルですが、それらを使用するには、最初に定義する必要があります。技術的なデモンストレーションは次のとおりです。

Import { signal } from ‘@angular/core’;
const count = signal(0);
Count.set(count() +1);

2. 計算されたシグナルの使用

計算された信号を使用すると、派生値を処理するための宣言型メソッドが得られます。関数が依存するシグナルのいずれかに変更がある場合、計算されたシグナルは再計算され、読み取り専用の派生シグナルが生成されます。技術的なデモンストレーションは次のとおりです。

import { computed, signal } from '@angular/core';
const count = signal(0);
const doubled = computed(() => count()

3. エフェクトの使用

Angular Signals のエフェクトは、Signal の変化に応じてその機能を実行します。effect() 内では、命令型で状態を変更したり、DOM を手動で変更したり、非同期コードを実行したりできます。技術的なデモンストレーションは次のとおりです。

import { effect, signal } from '@angular/core';
const count = signal(0);
effect(() => {
  console.log('Count changed to:', count());
});
count.set(1);

Angular Signals Examples

ここでは、Angular Signals の動作を確認するための実践的な例を示します。3 つのプリミティブすべてを使用して単純なカウンタ アプリケーションを作成しましょう。

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-counter',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <p>Count: {{ count() }}</p>
      <p>Doubled: {{ doubled() }}</p>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);
 
  constructor() {
    effect(() => {
      console.log('Count changed to:', this.count());
    });
  }
 
  increment() {
    this.count.set(this.count() + 1);
  }
}

Angular信号とIgnite UI: 袖の下には何がありますか?

Angular Signals をIgnite UI for Angularと組み合わせることで、Web アプリケーションを次のレベルに引き上げることができます。この強力なコンボがどのように機能するかを簡単に見てみましょう。Angular Signals は変更を正確に追跡することで状態管理を簡素化し、Ignite UIは堅牢で高性能な UI コンポーネントを提供します。これらを組み合わせることで、アプリの速度と応答性が向上します。

それでは、Angular Signals とIgnite UIを使用してリアルタイム データ グリッドを構築しましょう。

1. シグナルの設定 – データとフィルターのシグナルを定義します。

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store our data
  filter = signal('');  // Signal for filtering the data
 
  // Computed signal to apply the filter to the data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
  // Method to fetch and update data
  fetchData(newData) {
    this.data.set(newData);
  }
}

2. データの更新: 新しいデータを取得し、シグナルを更新します。

fetchData(newData) {
  this.data.set(newData);
}

 

3.スムーズなアップデートを体験

グリッドは、Angular Signals の無効電力とIgnite UIの効率的なレンダリングのおかげで、データが変化するとリアルタイムで更新されます。しかし、ここに別の例があります—Angularシグナルなし。

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [(ngModel)]="filter" (ngModelChange)="applyFilter()" placeholder="Filter" />
    <igx-grid [data]="filteredData">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = [];  // Data array
  filteredData = [];  // Filtered data array
  filter = '';  // Filter string
 
  applyFilter() {
    this.filteredData = this.data.filter(item => item.name.includes(this.filter));
  }
 
  fetchData(newData) {
    this.data = newData;
    this.applyFilter();
  }
}
With:
import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [value]="filter()" (input)="filter.set($event.target.value)" placeholder="Filter" />
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store data
  filter = signal('');  // Signal for filter
 
  // Computed signal to filter data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
   fetchData(newData) {
    this.data.set(newData);
  }
}

結論として...

ここでは、Angular Signals を使用したい理由を簡単に説明します。Angular Signals を使用しないと、状態とその効果を手動で更新して管理します。これには、状態を更新して変更をトリガーする関数を記述することが多く、コードがより複雑になり、エラーが発生しやすくなります。Angular Signals を使用すると、状態管理がより宣言的で効率的になり、エラーが発生しにくくなり、パフォーマンスと保守性の両方が向上します。