JavaScript:ツリー構造を作成するための構造：とてもシンプル

イントロダクション

JavaScript を使用してツリー構造を作成したかったのですが、インターネットを検索しても JavaScript の標準でツリー構造は用意されていないように見えました。

そこで、簡単なツリー構造を作成するために、ツリー構造の構成要素を保持するためのクラス的な役割を持つ存在（以下、treeNodeと呼ぶ）を定義してみました。

コード

treeNode は以下のように定義しました。

        // ツリー構造用データ
        // value : ノードが保持するデータ
        // childNodes : 子ノード
        function treeNode(value, childNodes) {
            this.value = value;
            this.childNodes = childNodes;
        }

treeNode はツリー構造の1つの構成要素です。
そこで、treeNode は値(value)と子ノード(childNodes)を保持します。

値は保持させたいものならなんでも入れられます。
子ノードは、treeNode の配列を入れます。

使用例

データの定義

以下のような形でツリー構造のデータを定義します。
今回は treeNode の value に文字列を持たせましたが、文字列ではないもの（数値、オブジェクトなど）でも持たせることができます。

        // ツリー構造
        var tree = new treeNode("Top", [
            new treeNode("Lebel1", [
                new treeNode("Lebel2-1"),
                new treeNode("Lebel2-2", [
                    new treeNode("Lebel3")
                ]),
                new treeNode("Lebel2-3"),
                new treeNode("Lebel2-4", [
                    new treeNode("Lebel3", [
                        new treeNode("Lebel4")
                    ])
                ])
            ])
        ]);

データへのアクセス

上記のツリーのデータ構造を表示するためには、以下のコードですべての要素を表示できます。

    // ツリー構造を表示
    writeTree(tree, 0);

    /*
    ツリー構造を表示

    tree : treeNode
    indent : 表示のインデント
    */
    function writeTree(tree, indent) {
        
        // インデントを表示
        for (var i = 0; i < indent; i++) {
            document.write("-");
        }

        // 現在のツリー要素の値を表示
        document.writeln(tree.value + "<br />");

        // 子ノードがあれば子ノードを表示
        if (tree.childNodes) {
            for (var i = 0; i < tree.childNodes.length; i++) {
                writeTree(tree.childNodes[i], indent + 1);
            }
        }
    }

このコードの実行結果は以下のようになります。

Top
-Lebel1
--Lebel2-1
--Lebel2-2
---Lebel3
--Lebel2-3
--Lebel2-4
---Lebel3
----Lebel4

ツリー構造のとおりに全データを表示できていることがわかります。

まとめ

treeNode という構造を作成することで、簡単にツリー構造を作成することが出来ました。
treeNode の子ノードを配列という形で持たせているので、子ノードの追加や削除は配列のメソッドを使用できるので、わざわざコードを書く必要が無く、楽です。

ツリー構造の動的な変更も可能なので、いろいろな用途に使用できます。