ある日、ピクニックで訪れた山にて
娘（4歳）「パパ、見て！」
ワイ「なんや、娘ちゃん」
娘「あそこに、家族風のオブジェクトが落ちてるよ！」
constfamily={mother:{name:"よめ太郎",age:35},father:{name:"やめ太郎",age:37},daughter:{name:"娘ちゃん",age:4}};ワイ「おお、ほんまや！」
ワイ「mother、father、daughterの3人家族やな！」
娘「せっかくだから、この中から20歳以上のユーザーを抽出してみようよ！」
ワイ「おお！せっかくやからな！」
ワイ「やってみよか！」
ワイ「でも、家族のことをユーザーって呼ぶのはやめてな！」
ワイ「そんで、ええと」
ワイ「大人だけを抜き出したオブジェクトを作ればええんやったな！」
ワイ「ほな、やってみるで！」
constotona={};Object.keys(family).forEach(key=>{constperson=family[key];if(person.age>=20){otona[key]=person;}});娘「わぁ、すごい！」
娘「パパ、このコードがどういう意味だか説明して？」
ワイ「おお、ええで！」
ワイ「まず」
constotona={};ワイ「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" が入ってくる。constperson=family[key];if(person.age>=20){otona[key]=person;}});ワイ「↑こんな感じやな」
娘「なるほど〜」
ハスケル子「イマイチですね」
ワイ「！？」
ハスケル子も来ていた
ワイ「おお、ハスケル子ちゃん」
ワイ「ハスケル子ちゃんもこの山に遊びに来とったんか」
ハスケル子「はい、私もこの山に関数拾いに来ていました」
ワイ「おお、ほんまに好きやな〜」
ワイ「ところで、さっきのコードの何がイマイチなん？」
ハスケル子「うまくは言えませんが、私ならこう書きます」
constotona=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()に渡してあげると」
ハスケル子「元のオブジェクトに戻ります」
ハスケル子「つまり・・・」
constobj=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()を使うと配列を元にオブジェクトを生成できる。- オブジェクトから一度配列に変換することで、配列の持っている便利なメソッドたちを使える。
- オブジェクトを色々と整形したい時に便利。
ワイ「・・・↑こういうことやな！ハスケル子ちゃん」
ハスケル子「そんな感じです」
ワイ「おおきにやで！」
ワイ「また一つ賢くなったわ！」
〜おしまい〜