続編もよろしくやで！
ある日、ピクニックで訪れた山にて
娘（4歳）「パパ、見て！」
ワイ「なんや、娘ちゃん」
娘「あそこに、家族風のオブジェクトが落ちてるよ！」
const family = {
mother: {
name: "よめ太郎",
age: 35
},
father: {
name: "やめ太郎",
age: 37
},
daughter: {
name: "娘ちゃん",
age: 4
}
};
ワイ「おお、ほんまや！」
ワイ「mother、father、daughterの3人家族やな！」
娘「せっかくだから、この中から20歳以上のユーザーを抽出してみようよ！」
ワイ「おお！せっかくやからな！」
ワイ「やってみよか！」
ワイ「でも、家族のことをユーザーって呼ぶのはやめてな！」
ワイ「そんで、ええと」
ワイ「大人だけを抜き出したオブジェクトを作ればええんやったな！」
ワイ「ほな、やってみるで！」
const otona = {};
Object.keys(family).forEach(key => {
const person = family[key];
if (person.age >= 20) {
otona[key] = person;
}
});
娘「わぁ、すごい！」
娘「パパ、このコードがどういう意味だか説明して？」
ワイ「おお、ええで！」
ワイ「まず」
const otona = {};
ワイ「otonaって名前の空オブジェクトを作るんや」
ワイ「そこに、familyの中から20歳以上の人間だけを詰め直していくんや」
娘「うんうん」
ワイ「そのためにまず」
ワイ「Object.keys(family)を使って」
ワイ「familyというオブジェクトの、key名たちを配列として取得するんや」
娘「オブジェクトの、key名たちを取得・・・」
娘「ってことはつまり、Object.keys(family)は」
娘「["mother", "father", "daughter"]と同じってことだね！」
ワイ「その通りや！」
ワイ「せやから、↓こんなイメージや」
["mother", "father", "daughter"].forEach(key => {
/* 省略 */
});
ワイ「↑こんな感じで、配列のforEachメソッドを使って」
ワイ「mother、father、daughterと順番に回しながら」
ワイ「if文で20歳以上かどうか調べて」
ワイ「20歳以上の人間だけをotonaオブジェクトに詰め詰めしていくんや」
["mother", "father", "daughter"].forEach(key => {
// keyには "mother" か "father" か "daughter" が入ってくる。
const person = family[key];
if (person.age >= 20) {
otona[key] = person;
}
});
ワイ「↑こんな感じやな」
娘「なるほど〜」
ハスケル子「イマイチですね」
ワイ「！？」
ハスケル子も来ていた
ワイ「おお、ハスケル子ちゃん」
ワイ「ハスケル子ちゃんもこの山に遊びに来とったんか」
ハスケル子「はい、私もこの山に関数拾いに来ていました」
ワイ「おお、ほんまに好きやな〜」
ワイ「ところで、さっきのコードの何がイマイチなん？」
ハスケル子「うまくは言えませんが、私ならこう書きます」
const otona =
Object.fromEntries(
Object.entries(family)
.filter(([, person]) => person.age >= 20)
);
ワイ「Object.fromEntries()にObject.entries()・・・」
ワイ「何なん、このメソッドたち・・・？」
ハスケル子「Object.entries()は、オブジェクトから配列を作ってくれるやつです」
ワイ「オブジェクトから配列を作る・・・？」
ハスケル子「はい」
ハスケル子「例えば、Object.entries(family)は・・・」
[
["mother", { name: "よめ太郎", age: 35 }],
["father", { name: "やめ太郎", age: 37 }],
["daughter", { name: "娘ちゃん", age: 4 }],
]
ハスケル子「↑これと同じ意味になります」
ワイ「へぇ〜、オブジェクトからこんな感じの配列を生成してくれるんや・・・」
ワイ「じゃあ、もう一つのObject.fromEntries()はどんなメソッドなん？」
ハスケル子「Object.fromEntries()は、さっきのObject.entries()の逆ですね」
ハスケル子「さっきObject.entries()で作った配列をObject.fromEntries()に渡してあげると」
ハスケル子「元のオブジェクトに戻ります」
ハスケル子「つまり・・・」
const obj = Object.fromEntries(
Object.entries(family)
);
ハスケル子「↑こうすると、変数objにはfamilyそのままのオブジェクトが入るってことです」
ワイ「ふーん」
ワイ「オブジェクトから一回配列を作って、その配列からまたオブジェクトを作る」
ワイ「そんなことして何が嬉しいん？」
ハスケル子「一度配列にすることによって」
ハスケル子「配列の持っているfilter()やらmap()やらのメソッドを使って」
ハスケル子「好きなように整形できるのが嬉しいですね」
ハスケル子「今回であれば、20歳以上の人間だけを抽出したい訳ですから」
ハスケル子「filter()メソッドが使えるじゃないですか」
Object.entries(family)
.filter(([, person]) => person.age >= 20)
ハスケル子「↑こうしてフィルターしてやるんです」
ハスケル子「そうすると・・・」
[
["mother", { name: "よめ太郎", age: 35 }],
["father", { name: "やめ太郎", age: 37 }],
]
ハスケル子「↑こんな配列が出来上がります」
ハスケル子「この配列をObject.fromEntries()でオブジェクトに戻してあげると」
{
mother: {
name: "よめ太郎",
age: 35
},
father: {
name: "やめ太郎",
age: 37
}
};
ハスケル子「↑このように、20歳以上の人間だけが入ったオブジェクトになってる」
ハスケル子「っていう訳ですね」
ワイ「おお〜」
まとめ
-
Object.entries()を使うとオブジェクトから配列を生成できる。 -
Object.fromEntries()を使うと配列を元にオブジェクトを生成できる。 - オブジェクトから一度配列に変換することで、配列の持っている便利なメソッドたちを使える。
- オブジェクトを色々と整形したい時に便利。
ワイ「・・・↑こういうことやな！ハスケル子ちゃん」
ハスケル子「そんな感じです」
ワイ「おおきにやで！」
ワイ「また一つ賢くなったわ！」
〜おしまい〜