はじめに (対象読者・この記事でわかること)

この記事は、TypeScriptを使ってアプリケーション開発をしている方、特にAPIから取得したデータやユーザー設定など、複数の情報源から得られるツリー構造データを扱っている開発者を対象にしています。

この記事を読むことで、異なる配列に存在するツリー構造データを、IDをキーとして効率的かつ安全に結合・マージする具体的な方法がわかります。UIコンポーネントの表示データ生成や、複雑な設定データの統合など、実務でツリー構造の操作が必要になった際に、自信を持って対応できるようになるでしょう。複数のデータソースから得られたツリー構造を統合する必要があるケースは多く、単純な結合では子要素の重複や不整合が発生しやすいため、IDベースでのマージ戦略と再帰的な処理の理解が重要です。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - TypeScriptの基本的な型定義と操作 - JavaScriptの配列操作（map、filter、findなど） - ツリー構造の基本的な概念（親、子、ノードなど）

複雑なツリー構造データの結合・マージが必要な背景と課題

Webアプリケーション開発において、データは常に単一のソースから提供されるとは限りません。例えば、以下のようなシナリオが考えられます。

  1. カテゴリ構造とユーザー選択状態のマージ:

    • バックエンドから全カテゴリのツリー構造データが提供される。
    • ユーザーが過去に選択したカテゴリのツリー構造データが別のAPIから取得される。
    • これらのデータをマージし、全カテゴリを表示しつつ、ユーザー選択済みのカテゴリにはチェックマークを付ける、といったUIを構築する場合。

  2. デフォルト設定とユーザーカスタマイズのマージ:

    • アプリケーション全体で利用するデフォルトのメニュー構造や設定ツリーが存在する。
    • 特定のユーザーがカスタマイズしたメニューや設定が、デフォルト設定の一部を上書きする形で提供される。
    • 最終的な表示のためには、両方のツリーを適切にマージする必要がある。

これらのケースでは、単に配列を結合するだけでは不十分です。ノードのIDをキーとして、既存のノードを更新したり、新しいノードを追加したり、場合によっては特定のノードを削除したりといった、より洗練されたマージ戦略が求められます。特にツリー構造の場合、親ノードだけでなく子ノード、孫ノードといった階層構造全体を考慮した再帰的な処理が必要となり、実装が複雑になりがちです。

TypeScriptでツリー構造配列を効率的にマージする実装方法

ここでは、TypeScriptを使って、異なるツリー構造の配列をIDを基に効率的に結合・マージする具体的な手順とコード例を解説します。

ステップ1: 基本的なツリー構造の型定義とサンプルデータの作成

まずは、ツリー構造を表現するための型を定義します。ここでは、各ノードがid、name、そしてオプションでchildren（子ノードの配列）を持つと仮定します。

Typescript

interface TreeNode {
  id: string;
  name: string;
  children?: TreeNode[];
  // 必要に応じて他のプロパティを追加
  selected?: boolean; // マージによって設定される可能性のあるプロパティ
}

// サンプルデータ1: マスターとなるツリー構造
const masterTree: TreeNode[] = [
  {
    id: '1',
    name: 'カテゴリA',
    children: [
      { id: '1-1', name: 'サブカテゴリA-1' },
      { id: '1-2', name: 'サブカテゴリA-2', children: [{ id: '1-2-1', name: 'アイテムA-2-1' }] },
      { id: '1-3', name: 'サブカテゴリA-3' },
    ],
  },
  {
    id: '2',
    name: 'カテゴリB',
    children: [{ id: '2-1', name: 'サブカテゴリB-1' }],
  },
  {
    id: '3',
    name: 'カテゴリC',
  },
];

// サンプルデータ2: マージしたい追加情報を持つツリー構造
// 例えば、ユーザーが選択したカテゴリ
const userSelections: TreeNode[] = [
  {
    id: '1',
    name: 'カテゴリA', // マスターと同じ名前でもOK
    selected: true,
    children: [
      { id: '1-1', name: 'サブカテゴリA-1', selected: true },
      // 1-2は選択されていないが、子要素の1-2-1は選択されている可能性もある
      { id: '1-2', name: 'サブカテゴリA-2', children: [{ id: '1-2-1', name: 'アイテムA-2-1', selected: true }] },
      // 新しいノード（マスターにはない）を追加するケースも考慮
      { id: '1-4', name: '新規サブカテゴリA-4', selected: true },
    ],
  },
  {
    id: '2',
    name: 'カテゴリB',
    children: [{ id: '2-1', name: 'サブカテゴリB-1', selected: true }],
  },
  {
    id: '4',
    name: '新規カテゴリD', // マスターにはない新しいカテゴリ
    selected: true,
    children: [{ id: '4-1', name: '新規サブカテゴリD-1', selected: true }],
  },
];

ステップ2: 再帰的なツリーマージ関数の実装

ツリー構造をマージするためには、再帰的な関数が必要です。この関数は、masterTree（基準となるツリー）のノードをベースに、userSelections（追加情報を持つツリー）のノードを適用していきます。

考慮すべき主なシナリオは以下の通りです。 1. ノードの更新: masterTreeに存在するノードがuserSelectionsにも存在する場合、userSelectionsのノードのプロパティ（例: selected）でmasterTreeのノードを更新します。 2. ノードの追加: userSelectionsに存在するノードがmasterTreeに存在しない場合、そのノードをmasterTreeに追加します。 3. 子ノードの再帰的マージ: 各ノードの子ノードに対しても、同じマージ処理を再帰的に適用します。

Typescript

/**
 * 2つのツリー構造の配列をマージする関数。
 * baseNodesを基準とし、additionalNodesの情報を適用します。
 * ノードのIDが一致する場合、additionalNodesのプロパティで上書きし、子要素を再帰的にマージします。
 * additionalNodesにのみ存在するノードは、baseNodesに追加されます。
 *
 * @param baseNodes 基準となるツリーノードの配列
 * @param additionalNodes 追加情報を持つツリーノードの配列
 * @returns マージされた新しいツリーノードの配列
 */
function mergeTreeNodes(baseNodes: TreeNode[], additionalNodes: TreeNode[]): TreeNode[] {
  // 元の配列を変更しないように、baseNodesをディープコピーして操作する
  const mergedNodes: TreeNode[] = JSON.parse(JSON.stringify(baseNodes));

  // 追加ノードを効率的に検索するため、IDをキーとするMapを作成
  const additionalNodesMap = new Map<string, TreeNode>();
  additionalNodes.forEach(node => additionalNodesMap.set(node.id, node));

  // 基準ノードを巡回し、追加ノードの情報を適用する（更新と子ノードの再帰マージ）
  mergedNodes.forEach(baseNode => {
    const additionalNode = additionalNodesMap.get(baseNode.id);

    if (additionalNode) {
      // additionalNodeのプロパティをbaseNodeにマージ（例: selectedプロパティ）
      // ここではselectedプロパティを例にしていますが、必要に応じて他のプロパティもマージ可能です。
      if (additionalNode.selected !== undefined) {
        baseNode.selected = additionalNode.selected;
      }
      // additionalNodeのnameプロパティで上書きするかどうかは要件による
      // baseNode.name = additionalNode.name;

      // 子ノードが存在すれば再帰的にマージ
      if (baseNode.children && additionalNode.children) {
        baseNode.children = mergeTreeNodes(baseNode.children, additionalNode.children);
      } else if (!baseNode.children && additionalNode.children) {
        // baseNodeには子がないが、additionalNodeにはある場合、子を追加
        baseNode.children = JSON.parse(JSON.stringify(additionalNode.children));
      }

      // additionalNodeが処理されたことをマーク (またはMapから削除)
      additionalNodesMap.delete(baseNode.id);
    }
  });

  // additionalNodesMapに残っているのは、baseNodesに存在しない新規ノード
  // これらをmergedNodesに追加する
  additionalNodesMap.forEach(newNode => {
    mergedNodes.push(JSON.parse(JSON.stringify(newNode)));
  });

  return mergedNodes;
}

// マージの実行
const mergedTree = mergeTreeNodes(masterTree, userSelections);

// 結果の確認 (コンソール出力など)
console.log(JSON.stringify(mergedTree, null, 2));

マージ結果のイメージ

上記コードを実行すると、masterTreeをベースとしてuserSelectionsの情報がマージされた新しいツリー構造が生成されます。

Json

[
  {
    "id": "1",
    "name": "カテゴリA",
    "children": [
      { "id": "1-1", "name": "サブカテゴリA-1", "selected": true },
      {
        "id": "1-2",
        "name": "サブカテゴリA-2",
        "children": [{ "id": "1-2-1", "name": "アイテムA-2-1", "selected": true }]
      },
      { "id": "1-3", "name": "サブカテゴリA-3" },
      { "id": "1-4", "name": "新規サブカテゴリA-4", "selected": true } // userSelectionsから追加
    ],
    "selected": true
  },
  {
    "id": "2",
    "name": "カテゴリB",
    "children": [{ "id": "2-1", "name": "サブカテゴリB-1", "selected": true }]
  },
  {
    "id": "3",
    "name": "カテゴリC"
  },
  {
    "id": "4",
    "name": "新規カテゴリD",
    "selected": true,
    "children": [{ "id": "4-1", "name": "新規サブカテゴリD-1", "selected": true }]
  } // userSelectionsから追加
]

ハマった点やエラー解決

1. 参照渡しによる意図しない副作用

JavaScript（およびTypeScript）ではオブジェクトは参照渡しされるため、直接baseNodesを変更してしまうと、元のデータソースに影響を与えてしまいます。特に、マージ処理で一部のノードのプロパティを変更したり、子ノード配列を上書きしたりする場合に問題となります。

解決策: 処理を開始する前に、基準となる配列（baseNodes）をディープコピーすることが重要です。JSON.parse(JSON.stringify(baseNodes)) は手軽なディープコピー方法ですが、Dateオブジェクトや関数などが含まれる場合には注意が必要です。より堅牢な方法としては、再帰的なコピー関数を自作するか、structuredClone() API (ブラウザ、Node.js 17+) を利用するのが良いでしょう。

Typescript

// JSON.parse(JSON.stringify()) を使用したディープコピー
const mergedNodes: TreeNode[] = JSON.parse(JSON.stringify(baseNodes));

// structuredClone() を使用した場合 (互換性に注意)
// const mergedNodes: TreeNode[] = structuredClone(baseNodes);

2. 再帰処理の無限ループやスタックオーバーフロー

ツリー構造に循環参照が含まれる場合や、再帰関数の終了条件が適切でない場合、無限ループに陥ったり、スタックオーバーフローが発生したりする可能性があります。

解決策: * ツリー構造に循環参照がないことを前提とするか、循環参照を検出・回避するロジックを組み込む（通常、APIから取得するデータには循環参照は含まれないことが多い）。 * 再帰関数のベースケース（終了条件）を明確にする。今回のmergeTreeNodes関数では、childrenプロパティが存在しない場合が暗黙的な終了条件となります。

3. マージ順序と優先順位の問題

masterTreeとuserSelectionsのどちらのプロパティを優先するかによって、結果が変わります。今回の実装ではuserSelectionsのプロパティを優先してmasterTreeのノードを更新していますが、要件によっては逆の優先順位が必要な場合もあります。

解決策: マージ関数内でプロパティを更新するロジックを、要件に合わせて明示的に記述します。例えば、baseNode.nameは変更しないが、baseNode.selectedはadditionalNode.selectedで上書きする、といった具体的なルールを設定します。

4. IDの一意性

idプロパティがツリー内で一意でない場合、マージ処理が意図しない結果を招く可能性があります。例えば、異なる階層に同じIDのノードが存在する場合などです。

解決策: * データソース側でIDの一意性を保証する。 * IDが一意でない可能性がある場合は、idと親ノードのIDを組み合わせた複合キーを使用するなどの代替戦略を検討する。

解決策

上記で示したmergeTreeNodes関数は、これらの課題の多くに対応しています。 - JSON.parse(JSON.stringify(baseNodes))によるディープコピーで、参照渡しによる副作用を防いでいます。 - 再帰処理はchildrenが存在しないノードで自然に終了するため、無限ループのリスクは低い（ただし、循環参照がないことが前提）。 - additionalNodesMapを使用することで、additionalNodesにしか存在しないノードも効率的に特定し、mergedNodesに追加できるようになっています。 - プロパティの優先順位は、if (additionalNode.selected !== undefined) { baseNode.selected = additionalNode.selected; }のように、コード内で明示的に定義しています。これにより、どのプロパティを上書きし、どのプロパティを維持するかを細かく制御できます。

この実装は、汎用的なツリー構造のマージ処理として多くのシナリオに適用できるでしょう。

まとめ

本記事では、TypeScriptにおける複雑なツリー構造の配列を、IDをキーとして効率的に結合・マージする方法を実践的なコード例と共に解説しました。

  • IDベースでのノード特定: ツリー構造内のノードを一意に識別するためには、idプロパティをキーとすることが不可欠です。
  • 再帰的な処理の重要性: ツリー構造の階層的な性質上、親ノードだけでなく子ノードに対しても同じマージロジックを適用するために、再帰関数が非常に有効です。
  • 更新、追加のシナリオへの対応: 基準となるツリーに情報を適用しつつ、追加された新しいノードも適切に組み込む柔軟なマージ戦略が必要となります。
  • ディープコピーと不変性の考慮: 元のデータを破壊しないため、ディープコピーを用いて新しいツリーを生成する「不変性」を意識した実装が堅牢なコードにつながります。

この記事を通して、複数のデータソースから得られるツリー構造データもTypeScriptで自信を持って扱えるようになったことでしょう。UIコンポーネントの表示データ生成や、複雑な設定データの統合など、様々な場面でこのテクニックが役立つはずです。

今後は、マージのパフォーマンス最適化（特に大規模なツリーの場合）や、特定の条件でのノード削除、ユーザー権限に応じたノードのフィルタリングといった、発展的な内容についても記事にする予定です。

参考資料