正規化とは。

関係の正規化（かんけいのせいきか）は、関係データベース (リレーショナル・データベース) において、関係（リレーション）を正規形と呼ばれる形式に準拠させることにより、データの一貫性の維持と効率的なデータアクセスを可能にする関係設計を導くための方法である。正規形には様々なものが存在するが、いずれにせよ、正規化を行うことにより、データの冗長性と不整合が起きる機会を減らすことができる。
ウィキペディア関係の正規化

私も以前 Ruby on Rails の案件でデータベースの設計を行った際に「正規化」は経験しました。正規化を行うことによって、テーブル同士の関係性が「疎」になるので、SQL を駆使すればどんなデータでも引き出せるようになった記憶があります（ SQL 文は大の苦手でしたが…）。

その考えをフロントエンドの Redux にも導入しようというのが今回のお題です。

API から取得した一覧ページ用の JSON が以下のようだったとします。

[
  {
    "id": "aaa",
    "category": {
      "id": "aaa",
      "name": "history"
    },
    "tags": [{
      "id": "aaa",
      "name": "浜松"
    }, {
      "id": "bbb",
      "name": "関ヶ原"
    }],
    "title": "徳川家康について",
    "body": "徳川家康は徳川幕府の初代将軍である...."
  },
  ...
]

tags と category は詳細ページで、tags マスタと categories マスタから選択できるようにしたいです。つまり、一覧の JSON の tags と category はオブジェクトではなく、id の参照となったほうが扱いやすいです。正規化をします。

"tags": ["eee"],
"category": "bbb"

normalizer ライブラリを利用する

paularmstrong/normalizr: Normalizes nested JSON according to a schema

normalizr （ノーマライザ？）を利用すると、正規化が簡単にできます。このライブラリの目的を引用しておきます。

Motivation
公開されているかどうかに関わらず、多くのAPIは、深くネストされたオブジェクトを持つJSONデータを返します。このような構造のデータを使用することは、JavaScriptアプリケーション、特にFluxやReduxを使用しているアプリケーションでは非常に困難な場合が多いです。

Solution
Normalizrは、スキーマ定義付きのJSONを受け取り、辞書に集められたID付きのネストされたエンティティを返す、小さいながらも強力なユーティリティです。
https://github.com/paularmstrong/normalizr

まずはスキーマを定義します。スキーマとはデータ構造のことを意味します。

const tagSchema = new schema.Entity("tags");

const categorySchema = new schema.Entity("categories");

const postSchema = new schema.Entity("posts", {
  category: categorySchema,
  tags: [tagSchema]
});

引数 posts は、正規化されたレスポンス値のキー名となります。このスキーマを利用して正規化されると以下のような JSON が返却されます。

{ "posts": {...} }

インスタンス名は post と単数形なのですが、これは定義なので単数形なんだろうなと。

続いて正規化を実行します。

const normalized = normalize(posts, [postSchema]);

[postSchema] と配列になっている個所がよく間違えます。posts のデータ型が配列なので、ここも配列になります。第1引数には変換したいデータを、第2引数にはスキーマを与えます。結果は以下のようになります。

期待どおりの結果になりました。results にはオーダー順が、posts、categories、tags にはエンティティ群に、とデータがきれいに分離されました。categories と tags は、マスタ API から取得するので、ここでは利用しません。

posts と results は redux store などに保存しておきましょう。

一覧データを配列からオブジェクト構造に変換することによって、取り出したい値を posts[キー名] というシンプルな呼び出しで取得することができます。配列構造のままだと、取得したい値を都度 find する必要があり、計算負荷がかかってしまいます（とくに配列が長大な場合）。

ただ、一覧表示する場合は配列構造のまま利用したい場合もあります。そういう場合は、denormalize（デノーマライズ）を実行して、元に戻すことも可能です。

非正規化で利用するので、マスタ API から取得したデータも正規化しておきましょう。

const normalizedTag = normalize(tags, [tagSchema]);
console.log("normalizedTag", normalizedTag);

const normalizedCategory = normalize(categories, [categorySchema]);
console.log("normalizedCategory", normalizedCategory);

正規化したデータを元に戻す（非正規化）

posts エンティティ、tags エンティティ、categories エンティティを結合して元の JSON の形状を復元します。

const denormalized = denormalize(normalizedPost.result, [postSchema], {
  posts: normalizedPost.entities.posts,
  tags: normalizedTag.entities.tags,
  categories: normalizedCategory.entities.categories
});

復元できました。

ソースコード

Tag: normalize

Redux ストアを正規化する