概要

Memento Patternは、オブジェクトの状態を保存し、後で復元できるようにするデザインパターンです。

これにより、オブジェクトが以前の状態に戻ることができます。

このパターンは、特にアプリケーションでアンドゥやリドゥ機能が必要な場合に有用です。

今回示すプログラムの設計

エディタアプリケーションを例に、Memento Patternを使ってアンドゥ/リドゥ機能を実装してみましょう。

クラス図

クラス名	役割
`Editor`	状態を持つオブジェクト。Mementoを作成し、状態を復元できるメソッドを提供します。
`EditorMemento`	エディタの状態を保持するオブジェクト。エディタの状態を保持し、後で復元できるようにします。
`EditorCaretaker`	Mementoの保存と復元を管理するオブジェクト。アンドゥ/リドゥ機能を実現します。

サンプルコード

class Editor {
  private content: string;

  constructor(content: string) {
    this.content = content;
  }

  getContent(): string {
    return this.content;
  }

  setContent(content: string): void {
    this.content = content;
  }

  createMemento(): EditorMemento {
    return new EditorMemento(this.content);
  }

  restore(memento: EditorMemento): void {
    this.content = memento.getContent();
  }
}

class EditorMemento {
  private readonly content: string;

  constructor(content: string) {
    this.content = content;
  }

  getContent(): string {
    return this.content;
  }
}

class EditorCaretaker {
  private mementos: EditorMemento[] = [];
  private current: number = -1;

  save(editor: Editor): void {
    const memento = editor.createMemento();
    this.mementos = this.mementos.slice(0, this.current + 1);
    this.mementos.push(memento);
    this.current++;
  }

  undo(editor: Editor): void {
    if (this.current <= 0) return;
    this.current--;
    editor.restore(this.mementos[this.current]);
  }

  redo(editor: Editor): void {
    if (this.current >= this.mementos.length - 1) return;
    this.current++;
    editor.restore(this.mementos[this.current]);
  }
}

では、実際に使ってみましょう🖐️

const editor = new Editor("Hello, world!");
const caretaker = new EditorCaretaker();

console.log(`Initial content: ${editor.getContent()}`);
caretaker.save(editor);

editor.setContent("Hello, Memento Pattern!");
console.log(`Updated content: ${editor.getContent()}`);
caretaker.save(editor);

editor.setContent("Hello, readers!");
console.log(`Updated content: ${editor.getContent()}`);
// Don't save "Hello, readers!".

caretaker.undo(editor);
console.log(`Content after undo: ${editor.getContent()}`);

caretaker.redo(editor);
console.log(`Content after redo: ${editor.getContent()}`);