JavaScriptの再帰関数でJSONをlabel・children形式のツリー構造に変換する方法

変換前のJSONオブジェクト

まず、次のような入れ子（ネスト）構造を持つJSONオブジェクトを例として見てみましょう。

const obj = {
    "context": {
        "device": {
            "localeCountryCode": "AX",
            "datetime": "3047-09-29T07:09:52.498Z"
        },
        "currentLocation": {
            "country": "KM",
            "lon": -78789486
        }
    }
};

目指す変換結果：labelとchildrenによるツリー構造

ここで必要なのは、上記のようなオブジェクトを受け取り、各キー名を「label」に、その配下にある要素を「children」に格納した形式へと組み替えるJavaScriptの再帰関数です。APIレスポンスや設定ファイルなどを、ツリービューのような階層UIで扱いたい場合に役立つ変換パターンです。

期待される出力イメージは次のとおりです。

const output = {
    "label": "context",
    "children": [
        {
            "label": "device",
            "children": [
                {
                    "label": "localeCountryCode"
                },
                {
                    "label": "datetime"
                }
            ]
        },
        {
            "label": "currentLocation",
            "children": [
                {
                    "label": "country"
                },
                {
                    "label": "lon"
                }
            ]
        }
    ]
};

末端の値（文字列や数値などのプリミティブ）には子要素がないため、「label」だけを持つノードになります。

再帰関数の実装例

この変換を行うコードは次のようになります。

const obj = {
    "context": {
        "device": {
            "localeCountryCode": "AX",
            "datetime": "3047-09-29T07:09:52.498Z"
        },
        "currentLocation": {
            "country": "KM",
            "lon": -78789486
        }
    }
};

const transformObject = (obj = {}) => {
    // 値がオブジェクトの場合のみ処理を行う
    if (obj && typeof obj === 'object') {
        return Object.keys(obj).map((el) => {
            // 各キーの値に対して再帰呼び出し
            const children = transformObject(obj[el]);
            return children ? {
                label: el,
                children: children
            } : {
                label: el
            };
        });
    }
};

console.log(JSON.stringify(transformObject(obj), undefined, 4));

コードのポイント

• 型チェック：typeof obj === 'object'で対象がオブジェクトかどうかを判定し、プリミティブ値に到達した時点で再帰を終了します。
• キーの走査：Object.keys()ですべてのキーを取得し、map()で各キーに対応するノードを生成します。
• 再帰呼び出し：各キーの値に対して自身を再度呼び出します。戻り値が存在すればそれをchildrenに設定し、存在しなければlabelのみのノードとして返します。

実行結果

コンソールには次のように出力されます。map()の戻り値は配列になるため、実際の結果は最上位のオブジェクトを1要素だけ持つ配列になります。

[
    {
        "label": "context",
        "children": [
            {
                "label": "device",
                "children": [
                    {
                        "label": "localeCountryCode"
                    },
                    {
                        "label": "datetime"
                    }
                ]
            },
            {
                "label": "currentLocation",
                "children": [
                    {
                        "label": "country"
                    },
                    {
                        "label": "lon"
                    }
                ]
            }
        ]
    }
]

このように、再帰を使えば任意の深さのネストを持つJSONでも、同じロジックで柔軟にツリー構造へ変換できます。階層の深さに応じて処理を書き分ける必要がないのが再帰処理の大きな強みです。