ChatGPT に頼ることが増えてきていて、本当にこのままで良いのだろうかという日々を送っています。

最近、デザインパターンを学習しています。デザインパターン自体は沢山の書籍があるので、それらで学習しています。とは言え、ソースコードを自分で準備してみないと、まったく結局理解できません。ですから、拾ってきたソースコードや写経をして実行結果や経過を見ながら、血肉にしています。

デコレーターパターン

今週はデコレーターパターンです。理解はできています。使い方も分かりました。「今、目の前で組んでみろ!」と言われたらフツーにコードかけるレベル。

ただ、ユースケースが思いつきませんでした。Wikipedia 先にあるユースケースで「ふーん」とは思うものの、めっちゃ入れ子になっているコール元が驚愕すぎて、他が頭に入ってきません。

仕方ないので ChatGPT に尋ねてみました。どんなユースケースがあるのって。

ハハーン。なるほど。1. はちょっと他のデザインパターンとかぶり気味なんだけど、インフラエンジニアとしては、4. 5. はとてもよく分かるパターンです。なるほど。cli で -v オプション付ける感じだなとか、余計なことを感じていました。と言うことで、5. のソースコードを吐いてもらいました。

interface NetworkConnection {
  sendRequest(data: string): void;
}

class BasicNetworkConnection implements NetworkConnection {
  sendRequest(data: string) {
    console.log("Sending request:", data);
  }
}

abstract class NetworkConnectionDecorator implements NetworkConnection {
  protected connection: NetworkConnection;

  constructor(connection: NetworkConnection) {
    this.connection = connection;
  }

  sendRequest(data: string) {
    this.connection.sendRequest(data);
  }
}

class LoggingDecorator extends NetworkConnectionDecorator {
  sendRequest(data: string) {
    console.log("Logging request:", data);
    super.sendRequest(data);
  }
}

class CompressionDecorator extends NetworkConnectionDecorator {
  sendRequest(data: string) {
    const compressedData = this.compressData(data);
    console.log("Compressing request:", compressedData);
    super.sendRequest(compressedData);
  }

  compressData(data: string): string {
    // データを圧縮するロジックを実装する
    return data.toUpperCase();
  }
}

// 利用例
const connection: NetworkConnection = new BasicNetworkConnection();
const connectionWithLogging: NetworkConnection = new LoggingDecorator(connection);
const connectionWithCompression: NetworkConnection = new CompressionDecorator(connection);

connection.sendRequest("Hello");
// 出力: Sending request: Hello

connectionWithLogging.sendRequest("Hello");
// 出力: Logging request: Hello
// 出力: Sending request: Hello

connectionWithCompression.sendRequest("Hello");
// 出力: Compressing request: HELLO
// 出力: Sending request: HELLO

はい、そうです。フツーに動きました。

ついでに、とても良く理解できました。データを圧縮するロジックが `toUpperCase` なのが面白すぎますけど。

もちろん重ねがけも OK です。以下を追加すれば、Compress & Logging されます。ははーん。オプション追加も余裕だと。

const connectionWithLoggingAndCompression: NetworkConnection =
  new CompressionDecorator(connectionWithLogging);

connectionWithLoggingAndCompression.sendRequest('Hello');

// 結果

Compressing request: HELLO
Logging request: HELLO
Sending request: HELLO

こんな感じで、ChatGPT(というかRaycast)のお世話になっている日々です。楽な世界だ。

ChatGPT 使わない生活もちゃんとしてて、こちらの Bookmarklet も Amazon 側の Element ID 修正にあわせて更新しました。誰も使ってないと思うけど。