プログラマーへの道 #87 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。 動画内で実装したソースコードも載せています。

今回の動画で実装したソースコード

前回との差分は以下です。

https://github.com/tio-iis/memo-server/pull/14/files

動画時点の全体ソースコードは以下です。

https://github.com/tio-iis/memo-server/tree/8bfd36fe656a2fa3491a9f7b8334042c638a9f24

Object.values() について

メモ帳アプリのバックエンドサーバは以下のようなJSONを返します。

{
    "1643444953392": {
        "ID": 1643444953392,
        "Title": "aaaa",
        "Body": "bbbb",
        "CreatedAt": "2022-01-29T17:29:13+09:00",
        "UpdatedAt": "2022-01-29T17:29:13+09:00"
    },
    "1643446076726": {
        "ID": 1643446076726,
        "Title": "bbbb",
        "Body": "cccc",
        "CreatedAt": "2022-01-29T17:47:56+09:00",
        "UpdatedAt": "2022-01-29T17:47:56+09:00"
    }
}

メモのIDがキーとなり、そのキーに対応して、ID, Title, Body, CreatedAt, UpdatedAt を持つオブジェクトがひも付きます。 ここで私が欲しかったのは、キーに紐づくオブジェクトでした。 これにはメモの情報がすべて含まれるので、このオブジェクトを配列として抽出できれば、forEach() で1つ1つのメモをHTMLとして表示することができます。 ちなみに、上記のオブジェクトをそのまま forEach() で回すことはできません。 forEach() を利用できるのは配列やMapといった特定の型のみです。

キーに紐づくオブジェクト（値）を取得するために利用したのが、Object.values() です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values