JavaScript: ツリー構造のデータを扱う (1)
ツリー構造をもつデータの例
ツリー構造をもつデータはさまざまな場面で出てきます。
ノードのクラスを作る
ノードのデータを格納する データモデル (model) についての話です。 GUI 上で操作する ビュー (view) の話ではありません。
ノードのクラス
class Node {
constructor(){
this.properties = {}; //ノードに関するデータを格納する連想配列。
this.nodelist = []; //子の Node を格納する配列。
}
}
- properties にはデータファイルなどに保存するデータをセットします。
properties は連想配列でキー名と値のペアのデータで格納します。
JavaScript 配列と連想配列
(補足) GUI 処理などで一時的につけるオブジェクトは properties には入れません。 - nodelist には子のノードがあればセットします。
◎補足:
・C# では下に相当します
using System;
using System.Collections.Generic;
public interface INode<T> {
IDictionary<string, T> properties { set; get; }
IList<INode> nodelist { set; get; }
}
・Java では下に相当します (大雑把)
public abstract class Node<T> implements java.io.Serializable {
Map<string, T> properties;
List<Node> nodelist;
//メソッド省略
}
・properties の値 <T> は
1) string
2) シリアライズ可能な配列、連想配列
(補足) JavaScript は int や bool などの原始型もセットできます。
シリアライズには JSON を使います。
JavaScript: JSON シリアライズ
サンプルのツリーデータを作る
Node のオブジェクトは new Node() で作ります。
例: let node = new Node();
node.propperties にノードに関するさまざまなデータを格納します。
例:
const p = node.propperties;
p.name = "ノードの名前";
p.text = "このノードに関するテキスト";
p.attribute1 = "ユーザー定義の属性など";
p.array1 = [ "配列の要素", "abc", "123" ];
p.map1 = { "キー":"値", "key1":"value1", "key2":"value2" };
...
キー名 (name, text, attribute1, array1, map1 など) はユーザーが
定義して適当な名前を付けます。
- サンプル : TestJS_node_create01.html
いろいろ
- 2階層以下の子ノードを持つとツリー構造になります。
子ノード が1階層までであれば、 配列を 1個だけ扱うリストオブジェクトとして使用できます。 - ツリーノードのデータを扱うときには再帰処理を多用します。
ファイル処理でフォルダ (ディレクトリ) をサブフォルダまで探索する話と同じです。 HTML や XML でも要素 (Element) を再帰探索する話がよく出てきます。
Node.js: コールバック処理