JavaScriptで角括弧形式のオブジェクトキーをネストされたオブジェクトに変換する方法

JavaScriptでは、オブジェクト内のネストされた（入れ子になった）キーにアクセスする方法は主に2つあります。

まず、次のようなオブジェクトを例に考えてみましょう。

const obj = {
    object: {
        foo: {
            bar: {
                ya: 100
            }
        }
    }
};

このオブジェクトの深い階層にあるプロパティ「ya」にアクセスしたり値を更新したりする場合、次の2通りの記述方法があります。

アクセス方法の2つのスタイル

方法1：角括弧記法

obj['object']['foo']['bar']['ya']

方法2：ドット記法

obj.object.foo.bar.ya

どちらの書き方でも同じプロパティにたどり着くことができます。

ここで求められるのは、「object[foo][bar][ya]」のような角括弧形式で文字列として表されたネストキーのパスを受け取り、それをネストされたオブジェクト構造に変換するJavaScript関数を作成することです。このような変換は、フォームデータやクエリ文字列などをパースする際によく必要になります。

実装例

実際のコードは以下の通りです。

const obj = { "object[foo][bar][ya]": 100 };
const constructDotNotation = obj => {
    const keys = Object.keys(obj)[0].split('[').map(el => {
        return el.replace(']', '');
    });
    let res = {};
    keys.reverse().forEach(key => {
        if (Object.keys(res).length === 0){
            res[key] = obj[Object.keys(obj)[0]];
        }else{
            const temp = {};
            temp[key] = res;
            res = temp;
        };
    });
    return res;
};
console.log(JSON.stringify(constructDotNotation(obj), undefined, 4));

処理の流れを解説

1. キーの分割： split('[') を使って「object[foo][bar][ya]」を分割し、replace(']', '') で閉じ括弧を取り除きます。これにより ["object", "foo", "bar", "ya"] という配列が得られます。
2. 逆順での組み立て： キーの配列を reverse() で反転し、最も深い階層から順にオブジェクトを組み立てていきます。
3. ネスト構造の生成： 各ステップで現在の結果を一時オブジェクトに包み込み、外側へと積み重ねることで、目的のネスト構造を完成させます。

出力結果

コンソールには次のように出力されます。

{
    "object": {
        "foo": {
            "bar": {
                "ya": 100
            }
        }
    }
}

このように、角括弧形式のキー文字列を正しくネストされたオブジェクトへと変換できていることが確認できます。JSON.stringify の第3引数に4を指定しているため、インデント付きの整形された出力になっている点にも注目してください。