Angular と SOLID の原則

SOLID は、開発者がより優れたソフトウェア アプリケーションを設計するのに役立つ一連の原則の頭字語です。これらの原則は次のとおりです。

1. 単一責任の原則 (SRP)
   ''クラスまたはモジュールには、変更する理由が 1 つだけある必要があります。''
   これは、クラスが 1 つのことだけに責任を持ち、複数の責任を持つべきではないことを意味します。
2. オープン/クローズの原則 (OCP)
   ''クラスは、拡張に対してオープンである必要がありますが、変更に対してはクローズされている必要があります。
   これは、既存のコードを変更することなく、新しい機能をクラスに追加できる必要があることを意味します。
3. Liskov Substitution Principle (LSP)
   ''サブタイプは、それらのベース タイプを代用できる必要があります。
   これは、クラスが別のクラスから派生した場合、予期しない動作を引き起こすことなく、親クラスを置き換えることができる必要があることを意味します。
4. Interface Segregation Principle (ISP)
   ''クライアントは、使用しないインターフェースに依存することを余儀なくされるべきではありません。
   これは、クラスが必要のないインターフェースを実装することを強制されるべきではないことを意味します。
5. Dependency Inversion Principle (DIP)
   ''高レベル モジュールは低レベル モジュールに依存すべきではありません。どちらも抽象化に依存する必要があります。''
   これは、クラスが具体的な実装ではなく抽象化に依存する必要があることを意味します。

Angular では、API からのデータの取得やユーザー認証の処理など、単一の責任を持つサービスを作成できます。API からデータをフェッチするサービスの例を次に示します。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://jhonburbakollam.com/data');
  }
}

オープン/クローズの原則 (OCP)

Angular では、継承と構成を使用して、元のコードを変更せずに拡張または変更できる再利用可能なコンポーネントを作成できます。コンポジションを使用するコンポーネントの例を次に示します。

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

@Component({
  selector: 'app-button',
  template: '<button>Click me!</button>'
})
export class ButtonComponent {}

import { Component } from '@angular/core';
import { ButtonComponent } from './button.component';

@Component({
  selector: 'app-custom-button',
  template: '<button>Custom text</button>'
})
export class CustomButtonComponent extends ButtonComponent {}

リスコフ置換原理 (LSP)

Angular では、インターフェイスを使用して、クラスが従わなければならないコントラクトを定義できます。コントラクトを定義するインターフェイスの例を次に示します。

export interface DataService {
  getData(): Observable<any>;
}

このインターフェイスを実装するクラスがある場合は、予期しない動作を引き起こすことなく、インターフェイスを実装する別のクラスに置き換えることができます。

インターフェイス分離の原則 (ISP)

Angular では、インターフェイスを使用して、クラスが従わなければならないコントラクトを定義できます。ISP に従うインターフェースの例を次に示します。

export interface Logger {
  log(message: string): void;
}

インターフェイスを使用することで、クラスが使用しないインターフェイスを強制的に実装するのではなく、クラスが必要なインターフェイスのみに依存するようにすることができます。

依存性逆転の原則 (DIP)

Angular では、依存性注入を使用して、クラスのインスタンスを他のクラスに提供できます。依存性注入を使用するサービスの例を次に示します。

import { Injectable } from '@angular/core';
import { DataService } from './data.service';

@Injectable()
export class LoggerService {
  constructor(private dataService: DataService) {}

  logData() {
    this.dataService.getData().subscribe((data) => {
      console.log(data);
    });
  }
}

依存性注入を使用すると、クラス間の疎結合を実現できます。これにより、依存するクラスのコードを変更せずに実装を交換できます。