Angularにおけるnullとundefinedの使い分け
課題
Javascript において、null と undefined はど扱っていけばいいのか。ということは考えていきたい。
null と undefined の詳細な違いはこちらを見ればわかるだろう。
注目ポイント
Angular は、web アプリケーションで、結局は view として表現していくために存在するもの。null と undefined もその観点において違いを書いてみる。
undefined の使い方
undefined は何もない状態である。この何もないというのは、実行時に値がないということだけではなく、永続機関から取得するものがないということである。Angular でおなじみの、AngularFirestore を使って例を出す。
コード例と説明
getByID$(account_id: string) {
return this.firestore.collection<Account>('accounts').doc<Account>(account_id).valueChanges();
}
上記の valueChanges()で返される型は、Observable<Account | undefined>である。undefined は、angular firestore の data を検索したときに、データベースに存在しなかったときに返される。このように、永続期間にデータとして存在しない時に undefined を使うという事をしたほうがよい。
null の使い方
undefined は何もない状態である。この何もないというのは、実行時に値がないということだけではなく、永続機関からまだ値が返ってこないということである。わかりやすくいうと、Loading 状態である。Angular でおなじみの、AngularFirestore を使って例を出す。
コード例と説明
const account$ =
return this.firestore.collection<Account>('accounts').doc<Account>(this.account_id).valueChanges();
}
<component [account]="account$ | async"></component>
typescript 上で定義された Observable を async pipe(詳しくはこちら)を通して component に値を流すことで、初期値は null 状態になる(詳しくはこちら)。つまり、component の account は、Observable<Account> | undefined | null>となる。初期値が null になることで、Loading 状態を作り出す事ができるのである。
使い分けのメリット
Component の状態を細かく出し分けする事ができる。現代のアプリケーションでは、UX が重要項目の一つにあり、一つの UI でも、UIStack(詳しくはこちら)を定義していかねばならない（はず）。非同期データを扱う UI になると、データがない状態、Loading 中である Stack を表現することは必須となる。上記の使い分けをすることで、それぞれの Stack の UI を一つの Componentに閉じ込める事ができ、非常に保守性の高いアプリケーション開発を行う事ができるのである。
例
値を取得
const account$ =
return this.firestore.collection<Account>('accounts').doc<Account>(this.account_id).valueChanges();
}
親 Component
<component [account]="account$ | async"></component>
子 Component
<ng-container *ngIf="account; else noValue">
<account></account>
</ng-container>
<ng-template #noValue>
<!---永続期間にデータが存在しなかった時に表示-->
<ng-container *ngIf="account === undefined; else loading">
<not-found></not-found>
</ng-container>
<!---Loading中の時に表示--->
<ng-template #loading>
<loading></loading>
<ng-template> </ng-template></ng-template
></ng-template>
まとめ
以上は私が実際にアプリケーションを開発をしてきた上で整理された事項である。また、必ずしも正しくはなく、null と undefined の使い分けも千差万別かと思われる。何かしらの参考になれば幸いである。
Discussion