Node.jsでMySQLからSELECTした際のフォーマットを変えたい

Question

Node.js、React初心者です。Node.jsでAPIを作成し、画面側のReactからAPIを叩くような環境を作りました。
Node.jsでMySQLからSELECTした際に、親テーブルと子テーブルを結合しているのですが、子の情報のところにも親テーブルの情報が格納されていて、フロント側でループなどで処理する際に扱いづらく困っています。
なにかオプションを設定すれば良い感じに整形してくれるのでしょうか？
forで回して整えることはできると思いますが、SELECTの度にそんなこともしてられませんし・・
一般的にはどのようにしているのかなども、教えていただけますと幸いです。
すみませんがよろしくお願いいたします。

以下、例です。

main

id	name
1	親A
2	親B

sub

id	main_id	name
1	1	子1
2	1	子2
3	2	子3

const sql = "SELECT * FROM main LEFT JOIN sub ON main.id = sub.main_id";
    db.query(sql, (err, result) => {
        console.log(result); 
    });

以下のように、親Aが結合した子の数分、繰り返し格納されてしまう

[
  {"id":1,"name":"親A","main_id":1,"name":"子1"}, 
  {"id":1,"name":"親A","main_id":1,"name":"子2"},
  {"id":2,"name":"親B","main_id":2,"name":"子3"}
]

仮にPHPでしたら、イメージですが以下のようになると思います。
厳密にこのフォーマットでなくても良いですが、このような形で取得できれば処理しやすいです。

  [0]=>
  array(3) {
    ["id"]=>
    int(1)
    ["name"]=>
    string(4) "親A"
    ["sub"]=>
    array(2) {
      [0]=>
      array(2) {
        ["main_id"]=>
        int(1)
        ["name"]=>
        string(4) "子1"
      }
      [1]=>
      array(2) {
        ["main_id"]=>
        int(1)
        ["name"]=>
        string(4) "子2"
      }
    }
  }
  [1]=>
  array(3) {
    ["id"]=>
    int(1)
    ["name"]=>
    string(4) "親B"
    ["sub"]=>
    array(2) {
      ["main_id"]=>
      int(2)
      ["name"]=>
      string(4) "子3"
    }
  }
}

上記の連想配列をjson化

[
  {"id":1,"name":"親A",
    "sub":[
      {"main_id":1,"name":"子1"},
      {"main_id":1,"name":"子2"}]
  },{"id":1,"name":"親B","sub":{"main_id":2,"name":"子3"}}
]

Answer 1

仮にPHPでしたら、イメージですが以下のようになると思います。

それは優秀なORマッパー使ってるだけです
PHPでもPDO等を使ってSQL直打ちで実行するとそうなります。

でもPHPのWebフレームワークだと何かしらのORマッパーが用意されているイメージありますね。
Node.jsに移行した時、Express.jsやmysqlのしょぼさシンプルさにびっくりした記憶があります。

forで回して整えることはできると思いますが、SELECTの度にそんなこともしてられませんし・・

アイデアとしては2つです。

• ORマッパーを導入して使ってみる
• group-byを覚える

前者のORマッパーは調べたら出てきました。
参考記事: Node.jsにてMySQLのORM:sequelize - Qiita

また、SailsのようにORマッパーを内蔵したWebフレームワークも存在します。
これはRuby on Railsを意識して作ったフレームワークですので、そこそこ気に入るような機能があるかもしれません。
参考記事: Waterline: SQL/noSQL Data Mapper (ORM/ODM) - Sails公式サイト

私個人ではORマッパーを利用していませんので、
どの程度使えるか、外部結合等の機能は使えるのか？などは知りませんが、
その辺含めて調査してみてください。

---

さて、後者の「group-byを覚える」の解説して締めようと思います。

確かにわざわざfor文なんて使ってられません。
何故か？for文で展開するだけで3行消費して可読性に負荷が掛かるからです。
でも同じことが1行で書けるようになればどうでしょう？

JavaScriptでは関数型プログラミングのエッセンスを流用した
メソッドチェーンを利用した値の加工テクニックが存在してて、コードの行数削減に役立ちます。
しかしJavaScriptのネイティブには配列を加工するメソッドが少ないので、
慣れるまで難解なreduce等を使う事になります。
(この辺RubyやPythonは充実してるんですけどね)

そこでライブラリの力を利用してgroup-byを連れてきます。
関数型プログラミング言語とか、ガチOOP言語だと結構用意してくれてる印象ありますね。
PHPの配列関数を眺めた感じそういうのなかったです。
PHPのreduceは筋が悪いのでforeachになりそうですね、たしかにやってられん。

JavaScript/Node.jsではLodashのライブラリがメジャーですかね。
参考サイト: groupBy - Lodash
Ramda.jsやJustがライバルになります。

Online Lodash Testerというサイトで確認してみましょう。
JavaScriptやJSONに於いてオブジェクトのキー名重複は許されないので、
sub.name等のようにしておきます、実際のSQL文でasによる別名指定等をしながら調整してみてください。

const arr = [
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子1"}, 
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子2"},
  {"id":2,"name":"親B","sub.main_id":2,"sub.name":"子3"}
];
result = _.groupBy(arr, it => it.id);

it => it.idという関数を使って配列の各要素からIDの数値を引っ張り出して、
そのIDが一致するもの同士で配列に投げ込んでいくという挙動をさせます。

結果を見てみます。

{
   "1": [
      {
         "id": 1,
         "name": "親A",
         "sub.main_id": 1,
         "sub.name": "子1"
      },
      {
         "id": 1,
         "name": "親A",
         "sub.main_id": 1,
         "sub.name": "子2"
      }
   ],
   "2": [
      {
         "id": 2,
         "name": "親B",
         "sub.main_id": 2,
         "sub.name": "子3"
      }
   ]
}

良好。
このままではまだ実用的な値になったとは言えないのでさらなる加工を施します。
オブジェクトの値だけ抽出(values)して二次元配列にしてから、
二次元配列にmapを使って整形します。

この時、Lodashのチェイン記法を使うときれいに記述出来ます。
参考記事: Lodashのチェーン記法について - Qiita

const arr = [
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子1"}, 
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子2"},
  {"id":2,"name":"親B","sub.main_id":2,"sub.name":"子3"}
];
result = _(arr)
  .groupBy(it => it.id)
  .values()
  .map(arr => ({
    id: arr[0].id,
    name: arr[0].name,
    sub: arr.map(it => ({
      main_id: it["sub.main_id"],
      name: it["sub.name"]
    }))
  }));

[
   {
      "id": 1,
      "name": "親A",
      "sub": [
         {
            "main_id": 1,
            "name": "子1"
         },
         {
            "main_id": 1,
            "name": "子2"
         }
      ]
   },
   {
      "id": 2,
      "name": "親B",
      "sub": [
         {
            "main_id": 2,
            "name": "子3"
         }
      ]
   }
]

だいたい要望どおりに仕上がったかと思います。

CRUDのシステムなら良かれと思った結合しまくると
全く関係のないデータにアクセスする余計なお世話になるケースもありますから
あまりに沢山の行を様々な観点で組み合わせるという事はそんなにないんじゃないかと思います。

実務ではこの程度がさっと書ければ十分ですかね。

---

【おまけ】LodashではなくネイティブのJSで頑張るとこうなります。

前述の章ではLodashで実装されているgourp-by機能を使いましたが、
JavaScriptにgroup-byはないのでreduceで頑張るしかありません。

また、汎用オブジェクトは好き勝手なキーを宣言できますので、
値を取り出すにはObject.values()を使う必要があります。
メソッドチェーンが途切れて少し不格好になりますね。

const arr = [
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子1"}, 
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子2"},
  {"id":2,"name":"親B","sub.main_id":2,"sub.name":"子3"}
];
const result = Object.values(
  arr.reduce((obj, it) => ({...obj, [it.id]: obj[it.id] ? [...obj[it.id], it] : [it]}), {})
).map(arr => ({
  id: arr[0].id,
  name: arr[0].name,
  sub: arr.map(it => ({
    main_id: it["sub.main_id"],
    name: it["sub.name"]
  }))
}));
console.log(JSON.stringify(result, null, 2));

[
  {
    "id": 1,
    "name": "親A",
    "sub": [
      {
        "main_id": 1,
        "name": "子1"
      },
      {
        "main_id": 1,
        "name": "子2"
      }
    ]
  },
  {
    "id": 2,
    "name": "親B",
    "sub": [
      {
        "main_id": 2,
        "name": "子3"
      }
    ]
  }
]

group-byを再現したreduce関数の中身は
ECMAScript2015以降のイディオムをガシガシ使ってる難解なコードで読めたものではありませんね。

またワンライナーにするため
毎回配列やオブジェクトを生成しまくる富豪的なプログラミングになっているので
同じ配列・オブジェクトを使いまわして処理速度向上させます。

const groupBy = cb => (obj, it) => {
  const key = cb(it);
  if (obj[key]) {
    obj[key].push(it);
  } else {
    obj[key] = [it];
  }
  return obj;
};

const arr = [
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子1"}, 
  {"id":1,"name":"親A","sub.main_id":1,"sub.name":"子2"},
  {"id":2,"name":"親B","sub.main_id":2,"sub.name":"子3"}
];
const result = Object.values(
  arr.reduce(groupBy(it => it.id), {})
).map(arr => ({
  id: arr[0].id,
  name: arr[0].name,
  sub: arr.map(it => ({
    main_id: it["sub.main_id"],
    name: it["sub.name"]
  }))
}));
console.log(JSON.stringify(result, null, 2));

実行結果を確認しましたが全く同様でした。
可読性を考えるとこの辺がバランス良いんじゃないかと思います。

Comments

[miyabi-sun]

長々と書きましたが、

PHPが得意でORマッパーでそういうのがあるなら、
Nginxのリバースプロキシを使ってフロントはNode.js+Reactでやるけど
APIに関してはPHPにお願いしてJSONを返すサーバにする。

これが一番一般的です。

Reactの根っこにあるJavaScriptがAjax叩いてJSON持って帰れるならなんでも良いって言ってるので
無理にNode.jsのバックエンドで頑張る必要はありません。
人や言語、ライブラリに限らず得意な奴にやらせるのが最善です、餅は餅屋ってね。

[mecab]

非常に参考になるご回答をありがとうございます・・！
ORマッパーがないからだったのですね。なぜこんな結果が返ってくるのか、
他の人はこれを処理しているのか？と思っていたので、スッキリしました。
サーバー側が一般的になにを使うのかもわかっていなかったので、Node.jsではなく
PHPを準備しようと思います。