中安拓也のブログ

プログラミングについて書くブログ

Angular公式ドキュメント(翻訳されている部分は)全部読む

はじめに

日本語翻訳していただいた全ての人々に感謝.......

angular.jp

バージョン

v.7.2.0時点のドキュメント

学習メモ

勉強になった点や単なる感想についてまとめました。

今までは、共通のHTTPサービスを作成することによってスピナーの表示とかHTTPヘッダーの登録を行なっていたんですが、Angularの非同期バリデーションやインターセプターを利用する方法でも同じことができることを知ったのが一番の収穫だったと思います。

ライフサイクル

  • constructor()の後にngOnInit()が呼ばれる
  • Angular公式チームとしてはDIとローカル変数の初期化(つまり単純な処理)以外はngOnInit()でやってほしいとのこと
  • コストが高い(呼び出し回数の多い)ライフサイクルメソッドの処理に注意...!
    • ngOnChanges()とか...特にngDoCheck()はかなりコストが高いので軽い処理しかやらせないこと

パイプ

  • パイプには純粋パイプと不純パイプがあって、純粋パイプは値が変更された時にしか呼び出されない(オブジェクトの変更は検知できない)のに対して、不純パイプはコンポーネントの変更検知サイクル(ユーザのマウス移動など)の度に毎回呼び出される
  • 不純パイプは純粋パイプと違ってオブジェクトに対して使える代わりに呼び出されまくるのでコストが高い。純粋パイプと不純パイプはngOnChanges()に対するngDoCheck()みたいな関係だと思っておけばよし
  • asyncパイプは不純なパイプなので扱いに注意
    • 以前、全 stateの値をObservable型で管理していたことがあってほぼ全ての項目にasyncパイプを使ってたら処理が激重になったことがあったけどasyncパイプの使い方に問題があったのかもしれない
  • 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は学習コストが高いと言われるゆえんなのかな...と感じました。基礎部分で学習することが多いのが悪いことなのかは知りませんが