では「再帰を使ったツリー構造の変換」の実用例として、JSONをHTMLリストに変換する処理を見てみましょう。これは実務で「メニュー表示」や「階層データの可視化」によく使われます。
例：JSON → HTMLリスト
入力データ（JSON）
const data = {
name: "Root",
children: [
{ name: "Child 1" },
{
name: "Child 2",
children: [
{ name: "Grandchild 1" },
{ name: "Grandchild 2" }
]
},
{ name: "Child 3" }
]
};
再帰でHTMLに変換
function jsonToHtml(node) {
let html = `<li>${node.name}`;
if (node.children && node.children.length > 0) {
html += "<ul>";
for (const child of node.children) {
html += jsonToHtml(child); // 再帰で子要素を処理
}
html += "</ul>";
}
html += "</li>";
return html;
}
const htmlList = `<ul>${jsonToHtml(data)}</ul>`;
console.log(htmlList);
出力イメージ（HTML）
<ul>
<li>Root
<ul>
<li>Child 1</li>
<li>Child 2
<ul>
<li>Grandchild 1</li>
<li>Grandchild 2</li>
</ul>
</li>
<li>Child 3</li>
</ul>
</li>
</ul>
✅ ポイント
- 再帰が自然にフィットする理由
- JSONの「children」がさらに同じ形のデータを持つ → 木構造
- 再帰なら「子があればもう一度呼ぶ」でシンプルに書ける
- ループだけで書こうとすると「深さごとにfor文をネスト」する必要があり、柔軟性がなくなる
👉 これで「JSON → HTMLリスト変換」という実務的な応用を見られました。
