UIライブラリ開発はオブジェクト指向の方が効率がいいかもしれない——Reactの関数コンポーネントと比較する

// NodeBoard.tsx
type NodeData = {
  id: string;
  type: 'textbox' | 'display' | 'number' | 'condition' | 'calc';
  left: number;
  top: number;
  props: Record<string, unknown>;
};

function NodeBoard({ nodes }: { nodes: NodeData[] }) {
  return (
    <>
      {nodes.map((node) => {
        switch (node.type) {
          case 'textbox':
            return <TextBoxNode key={node.id} data={node} />;
          case 'display':
            return <DisplayNode key={node.id} data={node} />;
          case 'number':
            return <NumberNode key={node.id} data={node} />;
          case 'condition':
            return <ConditionNode key={node.id} data={node} />;
          case 'calc':
            return <CalcNode key={node.id} data={node} />;
        }
      })}
    </>
  );
}

// Node.ts
export default class Node {
  id: string;
  left = 30;
  top = 30;
  element: HTMLElement | null = null;
  props: NodeProps;

  constructor(props: NodeProps) {
    this.id = crypto.randomUUID();
    this.props = props;
  }

  move(dx: number, dy: number) {
    this.left += dx;
    this.top += dy;
    if (this.element) {
      this.element.style.left = `${this.left}px`;
      this.element.style.top = `${this.top}px`;
    }
  }

  remove() {
    this.element?.remove();
    this.element = null;
  }

  render(): HTMLElement {
    const el = document.createElement('div');
    el.classList.add('node');
    // ラベル・入出力の共通描画処理
    this.element = el;
    return el;
  }
}

// TextBoxNode.ts / ConditionNode.ts
export class TextBoxNode extends Node {
  constructor() {
    super({ label: 'Textbox', value: 'Hello' });
  }
}

export class ConditionNode extends Node {
  constructor() {
    super({ label: 'Condition', inputs: ['input1', 'input2'], outputs: ['true', 'false'] });
  }

  protected onInputChanged(value: unknown) {
    // 条件分岐に応じた出力の切り替えなど、この種類だけの処理
  }
}

// Board.ts
class Board {
  private nodes: Node[] = [];

  addNode(node: Node) {
    this.nodes.push(node);
    this.boardElement.appendChild(node.render());
  }

  moveAll(dx: number, dy: number) {
    for (const node of this.nodes) {
      node.move(dx, dy); // node.typeを一切見ていない
    }
  }
}

move(dx: number, dy: number) {
  this.left += dx;
  this.top += dy;
  if (this.element) {
    this.element.style.left = `${this.left}px`;
    this.element.style.top = `${this.top}px`;
  }
}

// IO.ts
class IO {
  value: unknown;

  update(v: unknown) {
    this.value = v;
  }
}

class OutputIO extends IO {
  private connections: IO[] = [];

  update(v: unknown) {
    super.update(v);
    for (const io of this.connections) {
      io.update(this.value); // 接続先への伝播はOutputIOだけの責務
    }
  }
}