4歳娘「パパ、20歳以上のユーザーを抽出して？」

#### 続編もよろしくやで！

+ [**ワイ「なに！？型のズレを吸収できるやと！？」**](https://qiita.com/Yametaro/items/af7dde38c6523dba110c)
+ [**ワイ「なに！？flatMap()で有給取り放題やと！？」**](https://qiita.com/Yametaro/items/b922479f3c70d3b089fd)

## ある日、ピクニックで訪れた山にて

娘（**4歳**）「パパ、見て！」

ワイ「なんや、娘ちゃん」

娘「あそこに、**家族風のオブジェクト**が落ちてるよ！」


```javascript:JavaScript
const family = {
    mother: {
        name: "よめ太郎",
        age: 35
    },
    father: {
        name: "やめ太郎",
        age: 37
    },
    daughter: {
        name: "娘ちゃん",
        age: 4
    }
};
```

ワイ「おお、ほんまや！」
ワイ「mother、father、daughterの3人家族やな！」

娘「せっかくだから、この中から**20歳以上のユーザーを抽出**してみようよ！」

ワイ「おお！**せっかく**やからな！」
ワイ「やってみよか！」
ワイ「でも、家族のことを**ユーザー**って呼ぶのはやめてな！」
ワイ「そんで、ええと」
ワイ「大人だけを抜き出したオブジェクトを作ればええんやったな！」
ワイ「ほな、やってみるで！」

```javascript:JavaScript
const otona = {};

Object.keys(family).forEach(key => {
    const person = family[key];

    if (person.age >= 20) {
        otona[key] = person;
    }
});
```

娘「わぁ、すごい！」
娘「パパ、このコードがどういう意味だか説明して？」

ワイ「おお、ええで！」
ワイ「まず」

```javascript:JavaScript
const otona = {};
```

ワイ「`otona`って名前の**空オブジェクト**を作るんや」
ワイ「そこに、`family`の中から**20歳以上の人間だけ**を詰め直していくんや」

娘「うんうん」

ワイ「そのためにまず」
ワイ「`Object.keys(family)`を使って」
ワイ「`family`というオブジェクトの、**key名**たちを配列として取得するんや」

娘「オブジェクトの、key名たちを取得・・・」
娘「ってことはつまり、`Object.keys(family)`は」
娘「`["mother", "father", "daughter"]`と同じってことだね！」

ワイ「その通りや！」
ワイ「せやから、↓こんなイメージや」

```javascript:JavaScript
["mother", "father", "daughter"].forEach(key => {
    /* 省略 */
});
```

ワイ「↑こんな感じで、配列の`forEach`メソッドを使って」
ワイ「`mother`、`father`、`daughter`と順番に回しながら」
ワイ「**if文**で20歳以上かどうか調べて」
ワイ「20歳以上の人間だけを`otona`オブジェクトに**詰め詰め**していくんや」

```javascript:JavaScript
["mother", "father", "daughter"].forEach(key => {
    // keyには "mother" か "father" か "daughter" が入ってくる。
    const person = family[key];

    if (person.age >= 20) {
        otona[key] = person;
    }
});
```

ワイ「↑こんな感じやな」

娘「なるほど〜」

ハスケル子「イマイチですね」

ワイ「**！？**」

## ハスケル子も来ていた

ワイ「おお、ハスケル子ちゃん」
ワイ「ハスケル子ちゃんもこの山に遊びに来とったんか」

ハスケル子「はい、私もこの山に**関数拾い**に来ていました」

ワイ「おお、ほんまに好きやな〜」
ワイ「ところで、さっきのコードの何がイマイチなん？」

ハスケル子「うまくは言えませんが、私ならこう書きます」

```javascript:JavaScript
const otona =
    Object.fromEntries(
        Object.entries(family)
            .filter(([, person]) => person.age >= 20)
    );
```

ワイ「`Object.fromEntries()`に`Object.entries()`・・・」
ワイ「何なん、このメソッドたち・・・？」

ハスケル子「`Object.entries()`は、オブジェクトから配列を作ってくれるやつです」

ワイ「**オブジェクト**から**配列**を作る・・・？」

ハスケル子「はい」
ハスケル子「例えば、`Object.entries(family)`は・・・」

```javascript:JavaScript
[
    ["mother", { name: "よめ太郎", age: 35 }],
    ["father", { name: "やめ太郎", age: 37 }],
    ["daughter", { name: "娘ちゃん", age: 4 }],
]
```

ハスケル子「↑これと同じ意味になります」

ワイ「へぇ〜、オブジェクトからこんな感じの配列を生成してくれるんや・・・」
ワイ「じゃあ、もう一つの`Object.fromEntries()`はどんなメソッドなん？」

ハスケル子「`Object.fromEntries()`は、さっきの`Object.entries()`の逆ですね」
ハスケル子「さっき`Object.entries()`で作った配列を`Object.fromEntries()`に渡してあげると」
ハスケル子「元のオブジェクトに戻ります」
ハスケル子「つまり・・・」

```javascript:JavaScript
const obj = Object.fromEntries(
        Object.entries(family)
    );
```

ハスケル子「↑こうすると、変数`obj`には`family`そのままのオブジェクトが入るってことです」

ワイ「ふーん」
ワイ「オブジェクトから一回配列を作って、その配列からまたオブジェクトを作る」
ワイ「そんなことして何が嬉しいん？」

ハスケル子「一度配列にすることによって」
ハスケル子「配列の持っている`filter()`やら`map()`やらのメソッドを使って」
ハスケル子「好きなように整形できるのが嬉しいですね」
ハスケル子「今回であれば、20歳以上の人間だけを抽出したい訳ですから」
ハスケル子「`filter()`メソッドが使えるじゃないですか」

```javascript:JavaScript
Object.entries(family)
    .filter(([, person]) => person.age >= 20)
```

ハスケル子「↑こうしてフィルターしてやるんです」
ハスケル子「そうすると・・・」

````javascript:JavaScript
[
    ["mother", { name: "よめ太郎", age: 35 }],
    ["father", { name: "やめ太郎", age: 37 }],
]
````

ハスケル子「↑こんな配列が出来上がります」
ハスケル子「この配列を`Object.fromEntries()`でオブジェクトに戻してあげると」

````javascript:JavaScript
{
    mother: {
        name: "よめ太郎",
        age: 35
    },
    father: {
        name: "やめ太郎",
        age: 37
    }
};
````

ハスケル子「↑このように、20歳以上の人間だけが入ったオブジェクトになってる」
ハスケル子「っていう訳ですね」

ワイ「おお〜」

## まとめ
+ `Object.entries()`を使うと**オブジェクトから配列を生成**できる。  
+ `Object.fromEntries()`を使うと**配列を元にオブジェクトを生成**できる。
+ オブジェクトから一度配列に変換することで、**配列の持っている便利なメソッドたち**を使える。
+ オブジェクトを**色々と整形したい時**に便利。

ワイ「・・・↑こういうことやな！ハスケル子ちゃん」

ハスケル子「そんな感じです」

ワイ「おおきにやで！」
ワイ「また一つ賢くなったわ！」

**〜おしまい〜**

## 続編もよろしくやで！

+ [**ワイ「なに！？型のズレを吸収できるやと！？」**](https://qiita.com/Yametaro/items/af7dde38c6523dba110c)
+ [**ワイ「なに！？flatMap()で有給取り放題やと！？」**](https://qiita.com/Yametaro/items/b922479f3c70d3b089fd)