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 の使い分けも千差万別かと思われる。何かしらの参考になれば幸いである。

参考リンク

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy