angular-reactive

Angular リアクティブプログラミング

バージョン： Angular 21（2025） タグ： リアクティブ、Observable、RxJS、BehaviorSubject

参考資料： リアクティブガイド • RxJS

ベストプラクティス

• 状態には BehaviorSubject を使用します

@Injectable({ providedIn: 'root' })
export class StateService {
  private state = new BehaviorSubject<State>(initialState);
  state$ = this.state.asObservable();
  
  updateState(newState: Partial<State>) {
    this.state.next({ ...this.state.value, ...newState });
  }
}

• サービスでは Observable を使用します

@Injectable({ providedIn: 'root' })
export class DataService {
  private http = inject(HttpClient);
  
  getData(): Observable<Data[]> {
    return this.http.get<Data[]>('/api/data');
  }
}

• async パイプを使用します

@Component({
  template: `
    @if (data$ | async; as data) {
      {{ data.name }}
    }
  `
})
export class MyComponent {
  data$ = this.service.getData();
}

• キャッシュには shareReplay を使用します

data$ = this.http.get('/api/data').pipe(
  shareReplay(1)
);

• クリーンアップには takeUntil を使用します

@Component({})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    this.data$.pipe(takeUntil(this.destroy$)).subscribe();
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}