【Angular】Signal is the best！？シンプルな状態管理を行う魔法のメソッド

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

// 数値のSignalを作成
const count = signal(0);

// オブジェクトのSignalを作成
const user = signal({
  name: 'John',
  age: 30
});

// 値の取得
console.log(count()); // 出力: 0

// 値の更新
count.set(1);
console.log(count()); // 出力: 1

// オブジェクトの更新
user.set({
  name: 'Jane',
  age: 25
});

// 値の更新（update使用）
count.update(value => value + 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.update(value => value + 1);
  }
}

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

const width = signal(10);
const height = signal(20);

const area = computed(() => width() * height());

console.log(area()); // 出力: 200

// widthを更新すると、areaも自動的に更新される
width.set(15);
console.log(area()); // 出力: 300

import { signal, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export class UserService {
  private http = inject(HttpClient);
  users = signal<User[]>([]);

  async fetchUsers() {
    try {
      const data = await this.http.get<User[]>('/api/users').toPromise();
      this.users.set(data);
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  }
}

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

const count = signal(0);

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

// effectが実行される
count.set(1); // ログ出力: "Count changed to: 1"
count.set(2); // ログ出力: "Count changed to: 2"

const items = signal<string[]>([]);

// 配列に新しい要素を追加
items.update(current => [...current, 'new item']);

// 配列から要素を削除
items.update(current => current.filter(item => item !== 'target'));

// 配列の要素を更新
items.update(current =>
  current.map(item =>
    item === 'target' ? 'updated item' : item
  )
);

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

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  private theme = signal<'light' | 'dark'>('light');

  getTheme() {
    return this.theme;
  }

  toggleTheme() {
    this.theme.update(current =>
      current === 'light' ? 'dark' : 'light'
    );
  }
}

// 悪い例
const user = signal({
  personalInfo: { name: 'John', age: 30 },
  settings: { theme: 'dark', language: 'en' },
  posts: [/* 大量のポストデータ */]
});

// 良い例
const personalInfo = signal({ name: 'John', age: 30 });
const settings = signal({ theme: 'dark', language: 'en' });
const posts = signal([/* 大量のポストデータ */]);

// 悪い例
const userDetails = computed(() => {
  // 全てのユーザー情報を計算に含める
  const user = userSignal();
  return `${user.name} (${user.age}) - ${user.location}`;
});

// 良い例
const userDisplayName = computed(() => {
  // 必要な情報のみを使用
  const { name, age } = userSignal();
  return `${name} (${age})`;
});

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

const items = signal<number[]>([1, 2, 3, 4, 5]);

// 重い計算をメモ化
const sum = computed(() => {
  console.log('Calculating sum...');
  return items().reduce((acc, curr) => acc + curr, 0);
});

// sumの値は一度計算されると、itemsが変更されるまでキャッシュされる
console.log(sum()); // 計算実行
console.log(sum()); // キャッシュから返される