JavaScript を使用した関数型プログラミングの利用

設計パターンは、ソフトウェア設計における頻繁な課題に対する確立された解決策です。これらを活用することで、開発者はコードの可読性、拡張性、保守性を向上させることができます。この記事では、ますます人気が高まっている JavaScript のスーパーセットである TypeScript が、タイプ セーフと最新の機能によってこれらのパターンをどのように改善するかを説明します。大規模なアプリケーションを開発している場合でも、サイド プロジェクトを開発している場合でも、TypeScript のデザイン パターンを把握すると、開発スキルが向上します。

デザインパターンとは何ですか?

設計パターンは、ソフトウェア設計における一般的な課題に対する再利用可能な汎用ソリューションです。これらは実際のコードではなく、これらの問題に対処するためのテンプレートです。 「Gang of Four」(GoF) 本に由来するこれらのパターンは、次の 3 つの主要なカテゴリに分類されます。

1. 作成パターン: オブジェクト作成のメカニズムに関係します。
2. 構造パターン: オブジェクトの構成と組織を強調します。
3. 行動パターン: オブジェクト間の相互作用とコミュニケーションに焦点を当てます。

TypeScript でデザイン パターンを使用する理由

TypeScript の機能により、デザイン パターンの実装がより堅牢になります:

1.静的型付け: エラーはコンパイル時に捕捉され、実行時のバグが減少します。
2.インターフェイスとジェネリック: より正確で柔軟な実装が可能になります。
3. Enum 型と Union 型: 状態管理などの特定のパターンを簡素化します。
4.強化されたツール: IDE サポートにより、TypeScript は生産性を向上させます。

TypeScript のいくつかの主要なデザイン パターン

1. シングルトンパターン

クラスのインスタンスが 1 つだけであることを保証し、そのインスタンスへのグローバル アクセス ポイントを提供します。

TypeScript での実装:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

使用例: 構成設定またはデータベース接続の管理。

2. ファクトリーパターン

正確なクラスを指定せずにオブジェクトを作成するためのインターフェイスを提供します。

実装:

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

ユースケース: クロスプラットフォーム アプリケーション用の UI フレームワーク。

3. オブザーバーパターン

1 つのオブジェクトの変更がそのすべての依存オブジェクトに通知される、1 対多の関係を定義します。

実装:

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

ユースケース: Angular や React などのフロントエンド フレームワークでの反応性。

4. 戦略パターン

アルゴリズムのファミリーを定義し、それぞれをカプセル化し、交換可能にします。

実装:

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

ユースケース: 電子商取引プラットフォームの支払いシステム。

5. デコレータパターン

新しい機能をオブジェクトに動的に追加します。

実装:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

使用例: ショッピング カート内の製品に機能を追加します。

デザインパターン表

Pattern	Category	Use Case	Benefit
Singleton	Creational	Managing global state like configurations	Guarantees single instance
Factory	Creational	UI components or APIs	Decouples creation logic
Observer	Behavioral	Event systems in frameworks	Simplifies communication
Strategy	Behavioral	Algorithm selection in runtime	Enhances flexibility
Decorator	Structural	Extending class functionality	Adds dynamic capabilities

パターン

カテゴリ

使用例

特典
シングルトン クリエイティブ 設定などのグローバル状態の管理 単一インスタンスを保証 工場 クリエイティブ UI コンポーネントまたは API 分離作成ロジック オブザーバー 行動 フレームワーク内のイベント システム コミュニケーションを簡素化 戦略 行動 実行時のアルゴリズムの選択 柔軟性の向上 デコレータ 構造 クラス機能の拡張 動的機能を追加します デザインパターンを実装するためのベストプラクティス
1.問題を理解する:
不必要なパターンで物事を複雑にしないでください。 2.パターンの結合: シングルトンとファクトリーなどの組み合わせの使用を検討してください。

3. TypeScript の機能を活用します:

インターフェイス、ジェネリック、列挙型を利用して実装を容易にします。
• 4.テストの作成: パターンが意図したとおりに機能することを確認します。 追加リソース
• হাতে কলমে জাভাস্ক্রিপ্ট by Junayed Ahmed

パターンへのリファクタリング

---

、

Joshua Kerievsky

著

---

また次の記事でお会いしましょう、お兄さん！ ?

私の個人ウェブサイト: https://shafayet.zya.me

少し風が強いです、innit bruv???

以上がJavaScript を使用した関数型プログラミングの利用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。