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

2019年5月17日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使う。