この記事は ニフティグループ Advent Calendar 2021 15日目の記事です。
概要
システムからcsvで出力した階層構造を持つデータを手元で可視化したい！はよくある話だと思います。
今回はspread sheet上のデータで階層構造をパースして、見やすく表示することにします。
目指すゴール
以下のようなデータをテスト用として用意します。
想定としてはシステムから出力した値をスプレッドシート上に取り込んだ形です。
生データのままではどれがどのデータに依存しているのかがよくわかりません。
このデータを見やすく表示することを今回のゴールとします。
↓
データ全体
LABEL NAME PARENT
ROOT ルート
10 c1 ROOT
20 c2 10
30 c3 20
40 c4 30
50 c5 40
51 c51 50
52 c52 50
53 c53 50
54 c54 50
55 c55 50
56 c56 50
561 c561 56
562 c562 56
563 c563 56
564 c564 56
60 c6 40
601 c601 60
602 c602 60
603 c603 60
604 c604 60
61 c61 40
611 c611 61
612 c612 61
613 c613 61
614 c614 61
615 c615 61
62 c62 40
621 c621 62
622 c622 62
623 c623 62
624 c624 62
625 c625 62
626 c626 62
627 c627 62
628 c628 62
629 c629 62
70 c7 40
701 c701 70
702 c702 70
703 c703 70
704 c704 70
705 c705 70
706 c706 70
実装
今回はGASを使ってデータのパース、可視化をしていきます。
GASの使い方は【初心者向け】GASでニュース記事をSlackに通知するアプリを作ってみた～前編～ をご参照ください。
まずはスプレッドシートから値を読み込みます。
あとで扱いやすくするためにデータはオブジェクト型へ変換しておきます。
const sheet_id = '<シートID>'
const _spreadsheet = SpreadsheetApp.openById(sheet_id);
const input_sheet = _spreadsheet.getSheetByName('シート1');
const v = input_sheet.getRange("A2:AK45").getValues();
const data = v.map(x => {return {
label: String(x[0]),
name: x[1],
parent: String(x[2])
}})
上のデータを出力するとこんな感じです。
[{name=ルート, label=ROOT, parent=}, {parent=ROOT, name=c1, label=10}, {label=20, name=c2, parent=10}, {label=30, parent=20, name=c3}, {name=c4, parent=30, label=40}, {name=c5, label=50, parent=40}, {name=c51, parent=50, label=51}, {parent=50, name=c52, label=52}, {name=c53, label=53, parent=50}, {name=c54, parent=50, label=54}, {label=55, name=c55, parent=50}, {name=c56, parent=50, label=56}, {label=561, name=c561, parent=56}, {name=c562, label=562, parent=56}, {name=c563, label=563, parent=56}, {parent=56, name=c564, label=564}, {name=c6, label=60, parent=40}, {parent=60, name=c601, label=601}, {name=c602, parent=60, label=602}, {label=603, name=c603, parent=60}, {parent=60, label=604, name=c604}, {label=61, name=c61, parent=40}, {parent=61, name=c611, label=611}, {label=612, name=c612, parent=61}, {label=613, name=c613, parent=61}, {name=c614, parent=61, label=614}, {parent=61, name=c615, label=615}, {label=62, name=c62, parent=40}, {label=621, name=c621, parent=62}, {label=622, name=c622, parent=62}, {parent=62, label=623, name=c623}, {label=624, parent=62, name=c624}, {parent=62, label=625, name=c625}, {name=c626, parent=62, label=626}, {name=c627, label=627, parent=62}, {name=c628, label=628, parent=62}, {label=629, name=c629, parent=62}, {label=70, parent=40, name=c7}, {label=701, parent=70, name=c701}, {name=c702, parent=70, label=702}, {label=703, name=c703, parent=70}, {label=704, parent=70, name=c704}, {name=c705, label=705, parent=70}, {name=c706, parent=70, label=706}]
次にデータを処理していくわけですが、データは1つの親と複数の子を持ち、ループ関係がないことから木構造が向いてそうです。
というわけで木構造を定義します。
※参考：Javascript でツリー階層をデータで持たせる
class Node {
constructor(name, code) {
this.name = name;
this.code = code;
this.parent = null;
this.childrenArray = [];
}
addChild(childNode) {
this.childrenArray.push(childNode);
childNode.parent = this;
}
addChildren(childrenArray) {
childrenArray.forEach(x =>
this.addChild(x)
)
}
}
次はすべてのデータを先程定義した木に登録していきます。
function addAllData(tree, data) {
// 追加するデータがないなら終了
if (data.filter(d => d.parent == tree.code).length == 0) return;
// 親と今見ているノードが同じデータをすべて子として登録していく
tree.addChildren(data.filter(d => d.parent == tree.code).map(x => new Node(x.name, x.label)))
// 子を見ていく
tree.childrenArray.forEach(child => {
addAllData(child, data)
})
}
// 親要素がない=root要素を登録
trees = data.filter(x => !x.parent).map(x => new Node(x.name, x.label))
// すべてのデータをroot配下に再帰的に登録していく
trees.forEach(tree => {
addAllData(tree, data)
})
あとは深さ優先で値を出力していきます。
const output_sheet = _spreadsheet.getSheetByName('シート2');
function writeToSpreadsheetWithDfs(tree, depth=0) {
// シート上で階層構造を表現するために、子の深さに応じて空白を埋めた配列を用意する
let pad_array = new Array(depth+1).fill('', 0, depth)
// 配列の最後尾には出力する対象をいれておく
pad_array[pad_array.length -1] = tree.name
// シートの上からデータで埋めていく
output_sheet.appendRow(pad_array)
// 子がいなくなるまで再帰的にデータを出力していく
if (tree.childrenArray.length == 0) return;
tree.childrenArray.forEach(x => writeToSpreadsheetWithDfs(x, depth+1))
}
// root要素から深さ優先で値を出力していく
writeToSpreadsheetWithDfs(trees[0], 0)
結果
ここまでのプログラムを実行すると、下のような結果が得られます。
これでどのデータがどこに依存しているかがひと目で分かるようになりました！！
ここまでのプログラム全体
parse.js
const sheet_id = '<シートID>'
const _spreadsheet = SpreadsheetApp.openById(sheet_id);
const input_sheet = _spreadsheet.getSheetByName('シート1');
const output_sheet = _spreadsheet.getSheetByName('シート2');
function addAllData(tree, data) {
// 追加するデータがないなら終了
if (data.filter(d => d.parent == tree.code).length == 0) return;
// 親と今見ているノードが同じデータをすべて子として登録していく
tree.addChildren(data.filter(d => d.parent == tree.code).map(x => new Node(x.name, x.label)))
// 子を見ていく
tree.childrenArray.forEach(child => {
addAllData(child, data)
})
}
function writeToSpreadsheetWithDfs(tree, depth=0) {
// シート上で階層構造を表現するために、子の深さに応じて空白を埋めた配列を用意する
let pad_array = new Array(depth+1).fill('', 0, depth)
// 配列の最後尾には出力する対象をいれておく
pad_array[pad_array.length -1] = tree.name
// シートの上からデータで埋めていく
output_sheet.appendRow(pad_array)
// 子がいなくなるまで再帰的にデータを出力していく
if (tree.childrenArray.length == 0) return;
tree.childrenArray.forEach(x => writeToSpreadsheetWithDfs(x, depth+1))
}
function myFunction() {
const v = input_sheet.getRange("A2:AK45").getValues();
const data = v.map(x => {return {
label: String(x[0]),
name: x[1],
parent: String(x[2])
}})
// 親要素がない=root要素を登録
trees = data.filter(x => !x.parent).map(x => new Node(x.name, x.label))
// すべてのデータをroot配下に再帰的に登録していく
trees.forEach(tree => {
addAllData(tree, data)
})
// root要素から深さ優先で値を出力していく
writeToSpreadsheetWithDfs(trees[0], 0)
}
class Node {
constructor(name, code) {
this.name = name;
this.code = code;
this.parent = null;
this.childrenArray = [];
}
addChild(childNode) {
this.childrenArray.push(childNode);
childNode.parent = this;
}
addChildren(childrenArray) {
childrenArray.forEach(x =>
this.addChild(x)
)
}
}
まとめ
GASでスプレッドシートの内容をパースして、階層構造として出力しました。
図と比べると若干見づらいですが、階層構造としてはかなりわかりやすい形にできたので満足です。
今回は目で見るために全データをスプレッドシート上に出力しましたが、子孫探索を書いて特定のノードの下だけを全部出力するプログラムを書いても後で使えそうです。
最近 python ばっかり書いて js を書く機会が全然なかったので思い出すいい機会になりました。
GASがつかえるとスプレッドシートのデータをごにょごにょするのが、関数よりも簡単なので是非とも試してみてください。