はじめに
日本語翻訳していただいた全ての人々に感謝.......
バージョン
v.7.2.0時点のドキュメント
学習メモ
勉強になった点や単なる感想についてまとめました。
今までは、共通のHTTPサービスを作成することによってスピナーの表示とかHTTPヘッダーの登録を行なっていたんですが、Angularの非同期バリデーションやインターセプターを利用する方法でも同じことができることを知ったのが一番の収穫だったと思います。
ライフサイクル
constructor()
の後にngOnInit()
が呼ばれる- Angular公式チームとしてはDIとローカル変数の初期化(つまり単純な処理)以外は
ngOnInit()
でやってほしいとのこと - コストが高い(呼び出し回数の多い)ライフサイクルメソッドの処理に注意...!
ngOnChanges()
とか...特にngDoCheck()
はかなりコストが高いので軽い処理しかやらせないこと
パイプ
- パイプには純粋パイプと不純パイプがあって、純粋パイプは値が変更された時にしか呼び出されない(オブジェクトの変更は検知できない)のに対して、不純パイプはコンポーネントの変更検知サイクル(ユーザのマウス移動など)の度に毎回呼び出される
- 不純パイプは純粋パイプと違ってオブジェクトに対して使える代わりに呼び出されまくるのでコストが高い。純粋パイプと不純パイプは
ngOnChanges()
に対するngDoCheck()
みたいな関係だと思っておけばよし async
パイプは不純なパイプなので扱いに注意- 以前、全 stateの値を
Observable
型で管理していたことがあってほぼ全ての項目にasync
パイプを使ってたら処理が激重になったことがあったけどasync
パイプの使い方に問題があったのかもしれない
- 以前、全 stateの値を
async
パイプはObservable
型だけじゃなくてPromiseにも実は使えるぞ
フォーム
- 非同期バリデーション(
AsyncValidator
)というものがあり、通常のバリデーションが完了したタイミングで呼び出される。スピナーの表示とかに利用するのが一般的とのこと - formの状態をリセットできる
reset()
メソッドが便利そう
HTTPClient
- RxJSに
retry()
メソッドというものがあるから、HTTPリクエストのリトライ処理が簡単に書けるとのこと - インターセプター(
HttpInterceptor
)というリクエスト直前とレスポンス直後に呼び出される仕組みがあって、共通ヘッダーの設定などに使える - ファイルのアップロードなどの重い処理で、進捗状況を表示できるようにする処理があるとのこと
Service WorkerとPWA
- Service WorkerもPWAも初めて知った。ページをキャッシュしてくれるからパフォーマンス上がるのね〜〜なるなる
- 素振りしてから本番投入してみたい
バージョニング
https://angular.jp/guide/releases#angularのバージョニング
メジャーバージョンを別のメジャーバージョンに更新する場合は、メジャーバージョンをスキップしないことをお勧めします。手順にしたがって、次のメジャーバージョンに段階的に更新し、各ステップでテストし、検証します。たとえば、バージョン4.x.xからバージョン6.x.xに更新する場合は、まず最新の5.x.xリリースに更新することをお勧めします。5.x.xに正常に更新した後には、6.x.xに更新できます
ほえ〜〜そうなん?めんどいから一気に上げてた....
チートシート
ngSwitch
って初めて知った。ngIfElse
書きまくるよりも綺麗にまとまりそう
あとがき
最近Vue.jsの公式ドキュメントを基礎部分だけ読んだんですけど、Angularのそれよりも圧倒的にボリュームが少なかったのでここら辺がAngularは学習コストが高いと言われるゆえんなのかな...と感じました。基礎部分で学習することが多いのが悪いことなのかは知りませんが