はじめに
API開発を進めていく中でclassTransformerがかかわってくるところがあったので調べていると日本語記事があまり見つからなかったので備忘録を兼ねてこちらの記事を書くことにしました。
本記事はclass-transformer
の説明の導入部分についての記事になります。
自己紹介
はじめまして!
私は2022年4月から現在までCatallaxyという会社でエンジニアインターン生として勤務しているエンジニア志望の大学生です。
class-transformerを理解する前に
JavaScriptには、
- プレーンオブジェクト
- クラスオブジェクト
の2種類があり、これらの違いを知る必要あります。
プレーンオブジェクト
プレーンオブジェクトは、{}
を使って作られるオブジェクトのことで例えば以下の配列の各要素に見られるような形になります。(以下の形式は特にJSON形式
とも呼ばれます)
[
{
"id": 1,
"firstName": "Johny",
"lastName": "Cage",
"age": 27
},
{
"id": 2,
"firstName": "Ismoil",
"lastName": "Somoni",
"age": 50
},
{
"id": 3,
"firstName": "Luke",
"lastName": "Dacascos",
"age": 12
}
]
クラスオブジェクト
クラスオブジェクトはコンストラクターやプロパティ、メソッドを独自に定義したインスタンスのことになります。下のようなUser
クラスを定義する際にはclass
という文言をあらかじめ宣言します。
export class User {
id: number;
firstName: string;
lastName: string;
age: number;
getName() {
return this.firstName + ' ' + this.lastName;
}
isAdult() {
return this.age > 36 && this.age < 60;
}
}
生じてしまう問題
以下のように、上記のユーザー情報をプレーンオブジェクトとしてダウンロードして、独自に定義したクラスオブジェクトに変換したいという状況を考えます。
fetch('users.json').then((users: User[]) => {
・・・
});
このように書けばusers[0].id
やusers[0].firstName
などのようにプロパティを使うこはできてます。
しかし、ダウンロードしてきたプレーンオブジェクトのままではUser
クラスに定義したメソッド(users[0].getName()
やusers[0].isAdult()
)を使うことができず、実用上不都合が生じてしまいます。
つまり、ここでの問題は、「JSON形式などのようなプレーンオブジェクトを、独自に定義したクラスのインスタンスに変換できないの?」という問題です。
class-transformerによる解決
そこで、class-transformerの出番となります。
fetch('users.json').then((users: Object[]) => {
const realUsers = plainToClass(User, users);
・・・
});
このplainToClass()
という関数を用いることでrealUsers
という変数に格納された各ユーザーデータは自作のUser
クラスのインスタンスとなります。つまり、realUsers[0].getName()
やrealUsers[o].isAdult()
のようにUser
クラスに定義したメソッドを何の不便もなく使えるようになったというわけです。
最後に
API開発を進めるというタスクをする際にclass-transformerというライブラリは非常に有用なライブラリだということを開発を通して実感したので、自分の学びを共有できたら幸甚です。
また、当該ライブラリのplainToClass()
関数の詳細についてもう少し調べた記事もかければなと考えております。
参考