【Angular】色々書きながら調べて困ったこと、わかったこと

2020年2月7日

Angular使い始めてまだ2ヶ月くらいだけど

  • チュートリアルは何度かやっていましたが、仕事でAngularで使いはじめて2ヶ月くらいたったので、それまでに困った事とか調べてわかったことをまとめておきます。
  • これからAngular使うよって方はぜひ参考にして見てください。

add​Event​Listenerじゃなくて@HostListner使うんだよ

  • 最初はadd​Event​Listener使ってキーボードイベントとかマウスイベントの処理書いてたけど、Angularには@HostListnerっていう素晴らしいデコレータがあって、こっち使ったほうがいいらしい。
  • add​Event​Listener使うときには以下注意しなきゃいけないらしい
    1. リスナーを正しく登録しないといけない。どのエレメントに対して、とか気をつけなければいけない事が増える。
    2. addしたら必ずremoveしないといけない。メモリリークしちゃうよ。なんでかっていうと、SPAだとページの切替時に再読み込み行われないから、イベントリスナーが解除されないから。
    3. DOM APIを直接扱うのはベストプラクティスではない。
  • 言われた通りに@HostListner使ってみたけど、ちょっと大変だった。
  • イベント登録できるのが、window、document、hostElementのどれかで、この画面のこのエレメントにだけ登録したいんだよな〜ってときにはそれComponentとして部品化して、その中で@HostListner書いていかないとうまく動かない。
  • ただそうやって作っていくと、ああ、Angularってこうやって書いていくものなのか、ってちょっとわかっていく気がする。

どこまで共通化するか悩む

  • これはまだ答え出せていないんだけど、上で書いたような@HostListnerのイベント処理とかも共通化できたりするんですが、それらを含めてどこまで共通化すべきか悩みます。
  • ってかこれはAngularに限らない話ですね。。。
  • 書きながら、これ共通化しすぎちゃうと、コード見たときに動きわかんなくなるなぁとか、色々考えながら動かしながらうまく共通化していきます。

ディレクトリ構成が悩み

  • 特にこれといった構成は決まっていないので、悩む。
  • 今の所は以下のような構成
    • 画面構成のディレクトリ
    • サービスクラス用のディレクトリ(通信系、共通サービス系)
    • 共通して利用したいディレクトリ
      • ヘッダー、フッター、サイドメニューなどの共通モジュール系
      • モーダル画面などの部品系
      • そのほかutilityとか
  • 今の所(2ヶ月くらい)は問題なく上の構成でスムーズに進んでいる模様。

Ngrxって使うべき?

  • 状態管理するためのものらしい。
  • 現在仕事でこれ利用すべきかどうか検討してくれ、と言われているので、来週あたりにまとめて記事にしようと思います。

constructorとngOnInitって何が違うの?

  • Angularにおいては、基本的にngOnInitを利用すべき。
  • @Inputがconstructorでの処理の後に評価されちゃうので、何も考えずに初期化処理していくとundefinedだよって怒られる可能性ある。
  • けど何も考えずに初期化処理したいので、ngOnInit使う。