Object.values()を使用してmapする

はじめに

JavaScriptやTypeScriptではmapというものをよく使うと思います．mapを使うときにObject.values()を使うとオブジェクトから値の配列を取り出しmapすることができたのでメモ程度ですが書いておきます．

例えば...

"monday" : {
  "date" : "2019-06-10T01:29:27.164Z",
  "attendance" : {
    "feeling_id" : "id_1",
    "is_input" : true
  },
  "leaving" : {
    "feeling_id" : "id_2",
    "is_input" : true
  }
},
"tuesday" : {
  "date" : "2019-06-11T01:29:27.164Z",
  "attendance" : {
    "feeling_id" : "id_3",
    "is_input" : true
  },
  "leaving" : {
    "feeling_id" : "id_5",
    "is_input" : true
  }
},
"wednesday" : {
  "date" : "2019-06-12T01:29:27.164Z",
  "attendance" : {
    "feeling_id" : "id_4",
    "is_input" : true
  },
  "leaving" : {
    "feeling_id" : "id_3",
    "is_input" : true
  }
},
"thursday" : {
  "date" : "2019-06-13T01:29:27.164Z",
  "attendance" : {
    "feeling_id" : "id_3",
    "is_input" : true
  },
  "leaving" : {
    "feeling_id" : "id_3",
    "is_input" : true
  }
},
"friday" : {
   "date" : "2019-06-14T01:29:27.164Z",
   "attendance" : {
     "feeling_id" : "id_2",
     "is_input" : true
   },
   "leaving" : {
     "feeling_id" : "id_5",
     "is_input" : true
   }
}

こんなデータがあった時，曜日は違うけどその中身は一緒だからmapを使って中身を使いたいと思ってもmapは使えない．そんな時に使うのがObject.values()です．

Object.values()とは？

objectに直接存在する列挙可能な値が配列要素の文字列に対応した配列を返します．プロパティの順序はマニュアル操作でオブジェクト内のプロパティに対してループさせた時の順序と同じになります．

と言われてもよくわからない

example.ts

var obj = { foo: "bar", baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

これを見てわかるように簡単にいうとobjectの中身を配列にして返してくれるものだ．
ではどうやって使うか...?

使い方

前述したデータを使うとき

WeekData.ts

type WeekData = {
  monday: {
    date: string;
    attendance: {
      feeling_id: string;
      is_input: boolean;
    };
    leaving: {
      feeling_id: string;
      is_input: boolean;
    };
  };
  tuesday: {
    date: string;
    attendance: {
      feeling_id: string;
      is_input: boolean;
    };
    leaving: {
      feeling_id: string;
      is_input: boolean;
    };
  };
  wednesday: {
    date: string;
    attendance: {
      feeling_id: string;
      is_input: boolean;
    };
    leaving: {
      feeling_id: string;
      is_input: boolean;
    };
  };
  thursday: {
    date: string;
    attendance: {
      feeling_id: string;
      is_input: boolean;
    };
    leaving: {
      feeling_id: string;
      is_input: boolean;
    };
  };
  friday: {
    date: string;
    attendance: {
      feeling_id: string;
      is_input: boolean;
    };
    leaving: {
      feeling_id: string;
      is_input: boolean;
    };
  };
};

export default WeekData;

上記のようなモデルを定義し，

Object.values(WeekData).map(day => ...)

とすると

mondayだったところが配列の0番目，tuesdayが１番目...というような配列として扱うことができるようになり，それをmapするとday.dateやday.attendance，day.leavingを使うことができる．

おわりに

今回はObject.values()を使ってみました．これを使うことで冗長なコードがスッキリするのでぜひ使ってみてください．