オブジェクトのサブセットを得る
オブジェクトから任意のプロパティのみを持ったオブジェクトを得る方法。
オブジェクトのサブセットを得る方法です。サブセットとは、あるオブジェクトのいち部分を切り取ったもので、ここで紹介する方法は、プロパティ名を指定してオブジェクトの一部分を切り出すものです。たとえば、次のような数多くのプロパティを持つオブジェクトがあるとき、ここから数個のプロパティだけを持つオブジェクトを作る方法です。
1
const profile = {
2
name: "suin",
3
twitter: "suin",
4
github: "suin",
5
country: "JP",
6
prefecture: "東京都",
7
city: "千代田区",
8
address: "丸の内2-4-1",
9
buiding: "丸ビル",
10
zipcode: "100-6390",
11
};
12
13
// 上の9つプロパティを持つオブジェクトから、下の6つのプロパティだけを抽出したオブジェクトを得たい
14
15
const address = {
16
country: "JP",
17
prefecture: "東京都",
18
city: "千代田区",
19
address: "丸の内2-4-1",
20
buiding: "丸ビル",
21
zipcode: "100-6390",
22
};
Copied!

方法1: 即時関数・分割代入・shorthand property nameの合わせ技

オブジェクトのサブセットを得る1つ目の方法は、即時関数と分割代入、そして、shorthand property nameを組み合わせる方法です。
1
const sns = (({ twitter, github }) => ({ twitter, github }))(profile);
2
//=> {
3
// "twitter": "suin",
4
// "github": "suin"
5
// }
Copied!
この方法のメリットとデメリットは次のとおりです。
    メリット
      外部ライブラリを必要としない。
    デメリット
      初見の読み手には意外性のあるコードに見える場合がある。
      即時関数の引数部分とshorthand property nameの2箇所に同じプロパティ名を書く必要があり冗長。
この書き方は、数個の少ないプロパティを抽出したいときは便利ですが、たくさんのプロパティを抽出しようとすると記述量が増え、徐々に大変さが出てきます。
抽出したいプロパティよりも、除きたいプロパティのほうが少ない場合は、次のような書き方で除きたいプロパティを指定するほうが簡単です。
1
const address = (({ name, twitter, github, ...rest }) => rest)(profile);
2
//=> {
3
// "country": "JP",
4
// "prefecture": "東京都",
5
// "city": "千代田区",
6
// "address": "丸の内2-4-1",
7
// "buiding": "丸ビル",
8
// "zipcode": "100-6390"
9
// }
Copied!
JavaScriptでは、deleteを使うとオブジェクトからプロパティを取り除けるので、上の書き方はまどろっこしいと思われるかもしれません。この書き方をするには理由があって、TypeScriptではdeleteの使い勝手が良くないからです。たとえば、profileオブジェクトからnameプロパティをdeleteするコードを書いただけでは、「Property 'name' does not exist on type ...」といったコンパイルエラーが発生してしまうのです。
1
const address = { ...profile };
2
delete address.name;
3
// ERROR: Property 'name' does not exist on type '{ country: string; prefecture: string; city: string; address: string; buiding: string; zipcode: string; }'.(2339)
Copied!

方法2: lodash.pick / lodash.omit

2つ目の方法はlodashを用いるものです。lodashはさまざまな便利関数を提供するライブラリで、その中のひとつにpickというオブジェクトのサブセットを得るための関数があります。
1
import _ from "lodash";
2
3
const sns = _.pick(profile, ["twitter", "github"]);
4
//=> {
5
// "twitter": "suin",
6
// "github": "suin"
7
// }
Copied!
lodash全体ではなく、pick関数だけが必要な場合は、パッケージlodash.pickを使うこともできます。この場合、次のようにしてpick関数を使います。
1
import pick from "lodash.pick";
2
3
const sns = pick(profile, ["twitter", "github"]);
Copied!
lodash.pickのメリットとデメリットは次のとおりです。
    メリット
      宣言的で読みやすい。
      記述量が少ない。
    デメリット
      ライブラリを導入する必要がある。
lodash.pickは抽出したいプロパティ名を指定する関数ですが、抽出したいプロパティより除外したいプロパティが少ない場合は、lodash.omitを使ったほうが便利です。
1
import _ from "lodash";
2
3
const address = _.omit(profile, ["name", "twitter", "github"]);
4
//=> {
5
// "country": "JP",
6
// "prefecture": "東京都",
7
// "city": "千代田区",
8
// "address": "丸の内2-4-1",
9
// "buiding": "丸ビル",
10
// "zipcode": "100-6390"
11
// }
Copied!
lodash、lodash.pickとlodash.omitのインストールは次のコマンドで行なえます。
1
# lodashのインストール
2
npm install lodash
3
npm install -D @types/lodash
4
5
# lodash.pickとlodash.omitのインストール
6
npm install lodash.pick lodash.omit
7
npm install -D @types/lodash.pick @types/lodash.omit
Copied!
最終更新 12d ago