LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kenogi

Angularの状態管理。Injectable, Observableなどまとめ

Posted at

chatGPTで勉強をしています。

Angularにおける状態管理のアプローチとして、それぞれの詳細について説明します。

  1. コンポーネントのプロパティ:

    • Angularのコンポーネントは、プロパティを通じて内部の状態を管理します。これは、ReactのsetStateメソッドを使用してローカルのstateを更新するのと似ています。しかし、Angularでは、プロパティの変更を検知するためのChange Detectionというメカニズムが動作します。これにより、プロパティの変更があるたびにビューが自動的に更新されます。

  2. サービス:

    • サービスはAngularの中心的な部分であり、アプリケーションの異なる部分間でデータやロジックを共有するために使用されます。サービスは、@Injectableデコレータを使用して作成され、特定のスコープ（例：モジュール、コンポーネント）で提供されることができます。サービスの主な利点は、シングルトンとして動作するため、アプリケーション全体で一貫した状態を持つことができることです。

  3. RxJS:

    • RxJSはリアクティブプログラミングのためのライブラリであり、データのストリームを扱うのに適しています。Angularとの統合により、状態の変更を監視し、変更に応じてUIを動的に更新することが容易になります。Observableはデータのストリームを表し、BehaviorSubjectは現在の値とその変更を監視することができる特殊なObservableとして動作します。

  4. 状態管理ライブラリ:

    • NgRxやAkita、Ngxsなどの状態管理ライブラリは、大規模なAngularアプリケーションで状態を効果的に管理するために使用されます。これらのライブラリは、Reduxの原則に基づいており、アクション、レデューサー、エフェクトなどの概念を通じて状態の変更を扱います。

これらのツールや概念を適切に組み合わせることで、Angularアプリケーションの状態管理を効果的に行うことができます。

実装例

了解しました。それぞれの概念に基づく簡単な実装例を示します。

1. コンポーネントのプロパティ:

Angularのコンポーネントには、内部の状態を管理するためのプロパティがあります。以下は、単純なカウンターコンポーネントの例です。

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="decrement()">-</button>
    {{ count }}
    <button (click)="increment()">+</button>
  `
})
export class CounterComponent {
  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

2. サービス:

Angularのサービスは、アプリケーション全体で共有するデータやロジックを管理するために使用されます。以下は、カウンターサービスの例です。

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

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  getCount() {
    return this.count;
  }
}

3. RxJS:

RxJSは、データのストリームを効果的に扱うためのライブラリです。以下は、BehaviorSubjectを使用したカウンターサービスの例です。

@Injectable({
  providedIn: 'root'
})
export class CounterRxService {
  private countSubject = new BehaviorSubject<number>(0);

  increment() {
    this.countSubject.next(this.countSubject.value + 1);
  }

  decrement() {
    this.countSubject.next(this.countSubject.value - 1);
  }

  getCountObservable(): Observable<number> {
    return this.countSubject.asObservable();
  }
}

4. 状態管理ライブラリ (NgRxの例):

NgRxは、Reduxの原則に基づいてAngularの状態管理を行うためのライブラリです。以下は、NgRxを使用したカウンターの例です。

actions/counter.actions.ts

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');

reducers/counter.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from '../actions/counter.actions';

export const initialState = 0;

const _counterReducer = createReducer(initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

export function counterReducer(state, action) {
  return _counterReducer(state, action);
}

以上は、各概念の基本的な実装例です。実際のアプリケーションでは、これらの概念を組み合わせて使用することが多いです。

Injectableについて

Angular での状態管理にはいくつかの方法がありますが、Injectable サービスを使用して簡単な状態管理を実装する方法を示します。

1. Injectable サービスの作成

最初に、状態を保持するためのサービスを作成します。このサービスはアプリケーションの状態を保持し、その状態を変更するメソッドを提供します。

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private _state: BehaviorSubject<string> = new BehaviorSubject<string>('initial state');
  public readonly state$: Observable<string> = this._state.asObservable();

  setState(newState: string): void {
    this._state.next(newState);
  }

  getState(): string {
    return this._state.value;
  }
}

このサービスでは、BehaviorSubject を使用して状態を保持しています。これにより、状態の変更をサブスクライブできるようになります。

2. コンポーネントでの状態の使用

次に、上記のサービスを使用して状態を表示・変更するコンポーネントを作成します。

import { Component } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-state',
  template: `
    <div>
      Current state: {{ state$ | async }}
      <button (click)="changeState()">Change State</button>
    </div>
  `
})
export class StateComponent {
  state$ = this.stateService.state$;

  constructor(private stateService: StateService) {}

  changeState(): void {
    const newState = 'changed state at ' + new Date().toISOString();
    this.stateService.setState(newState);
  }
}

このコンポーネントでは、状態を表示するために async パイプを使用しています。また、ボタンをクリックすると状態が変更されるようにしています。

まとめ

この方法は、小規模なアプリケーションや簡単な状態管理が必要な場合に適しています。より複雑な状態管理が必要な場合は、NgRx や Akita などの状態管理ライブラリを検討すると良いでしょう。

Observableとは何か？

Observableは、RxJSの中心的な概念であり、非同期やイベントベースのデータを扱うための強力なツールです。Observableは、時間の経過とともにゼロ回以上の値を発行することができるデータのストリームを表します。Observableには、データの発行、変換、フィルタリング、合成などの操作を行うための多くのオペレータがあります。

AngularでのObservableの使用

Angularアプリケーションでは、以下のような場面でObservableが頻繁に使用されます：

  • HTTPリクエストの結果
  • フォームの入力の変更
  • ルートパラメータやクエリパラメータの変更
  • カスタムイベント

Observableを使用した状態管理

Observableを使用して状態を管理する場合、BehaviorSubjectやReplaySubjectなどの特殊なObservableが一般的に使用されます。これらは、現在の状態の値を持ち、新しい値を発行するためのメソッドを提供します。

以下は、BehaviorSubjectを使用した状態管理の簡単な例です：

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSubject = new BehaviorSubject<string[]>([]);
  data$ = this.dataSubject.asObservable();

  addData(item: string) {
    const currentData = this.dataSubject.value;
    this.dataSubject.next([...currentData, item]);
  }
}

このサービスでは、data$という名前のObservableを公開しています。これにより、コンポーネントや他のサービスから状態の変更を購読することができます。addDataメソッドを使用して新しいデータを追加すると、BehaviorSubjectが新しい値を発行し、すべての購読者に通知します。

コンポーネント側では、以下のようにObservableを購読してデータを表示することができます：

@Component({
  selector: 'app-data-viewer',
  template: `
    <ul>
      <li *ngFor="let item of data$ | async">{{ item }}</li>
    </ul>
  `
})
export class DataViewerComponent {
  data$ = this.dataService.data$;

  constructor(private dataService: DataService) {}
}

asyncパイプを使用することで、テンプレート内でObservableを直接購読し、データの変更を自動的に反映することができます。

このように、ObservableとSubjectを使用することで、Angularアプリケーション内でリアクティブな状態管理を効果的に実現することができます。

実務で使っていたメモ Observable EMPTYの実装例

AngularのObservableは、非同期操作やイベントを扱うための強力な仕組みで、RxJS（Reactive Extensions for JavaScript）ライブラリの一部として提供されています。

EMPTYは、RxJSで提供される特別なObservableであり、その名の通り、何もデータを発行しないObservableを表します。具体的には、EMPTYは次のような特性を持っています。

  1. EMPTYは、データを発行しません。
  2. EMPTYは、即座に完了（complete）通知を発行します。
  3. EMPTYは、エラーを発行しません。

EMPTYの一般的な用途は以下のとおりです：

  1. デフォルトの動作として何もしないObservableが必要な場合。
  2. 条件に基づいてデータを発行するかどうかを判断する際に、データを発行しない場合の代わりとして使用する。
  3. エラーハンドリング時に、代わりとして何もしない動作を選択する場合。

サンプルコード：

import { EMPTY } from 'rxjs';

const emptyObservable = EMPTY;

emptyObservable.subscribe({
  next: value => console.log(`Received value: ${value}`),
  complete: () => console.log('Completed!'),
  error: err => console.log(`Error: ${err}`)
});

// 出力: Completed!

上のコードでは、EMPTY Observableはデータを発行せずに即座に完了します。そのため、next関数は呼び出されず、complete関数が呼び出されることが確認できます。

実務で使っていたメモ Observable pipe 実装例

pipeメソッドは、RxJSのObservableにおける中心的な概念の1つです。pipeを使用することで、Observableのデータフローに対して一連の操作を適用することができます。この操作は、RxJSのOperatorとして知られる関数を介して行われます。

pipeメソッドの主な特徴と用途は以下の通りです：

  1. 変換: ソースObservableが発行するデータを変換するためのオペレータを適用します（例: map, pluckなど）。
  2. フィルタリング: 特定の条件を満たすデータのみを通過させるためのオペレータを適用します（例: filter, first, lastなど）。
  3. 副作用: Observableのデータフローに何らかの副作用（ログの出力、外部APIの呼び出し等）を追加するためのオペレータを適用します（例: tap）。
  4. エラーハンドリング: エラーが発生した際の処理を定義するためのオペレータを適用します（例: catchError, retryなど）。
  5. 他の多くの操作: 例えば、複数のObservableを結合する（merge, concatなど）や、特定のタイミングでデータを発行する（debounceTime, throttleTimeなど）ためのオペレータを適用します。

以下は、pipeを使用していくつかのオペレータを適用するサンプルコードです：

import { of } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators';

const sourceObservable = of(1, 2, 3, 4, 5);

const processedObservable = sourceObservable.pipe(
  tap(value => console.log(`Before filter: ${value}`)),
  filter(value => value % 2 === 0),
  map(value => value * 10),
  tap(value => console.log(`After map: ${value}`))
);

processedObservable.subscribe(value => console.log(`Final value: ${value}`));

// 出力:
// Before filter: 1
// Before filter: 2
// After map: 20
// Final value: 20
// Before filter: 3
// Before filter: 4
// After map: 40
// Final value: 40
// Before filter: 5

上記のコードでは、tapを使用してデータフローの途中経過をログに出力し、filterとmapオペレータを使ってデータを変換しています。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?