【Angular】色々書きながら調べて困ったこと、わかったこと
Contents
Angular使い始めてまだ2ヶ月くらいだけど
- チュートリアルは何度かやっていましたが、仕事でAngularで使いはじめて2ヶ月くらいたったので、それまでに困った事とか調べてわかったことをまとめておきます。
- これからAngular使うよって方はぜひ参考にして見てください。
addEventListenerじゃなくて@HostListner使うんだよ
- 最初はaddEventListener使ってキーボードイベントとかマウスイベントの処理書いてたけど、Angularには@HostListnerっていう素晴らしいデコレータがあって、こっち使ったほうがいいらしい。
- addEventListener使うときには以下注意しなきゃいけないらしい
- リスナーを正しく登録しないといけない。どのエレメントに対して、とか気をつけなければいけない事が増える。
- addしたら必ずremoveしないといけない。メモリリークしちゃうよ。なんでかっていうと、SPAだとページの切替時に再読み込み行われないから、イベントリスナーが解除されないから。
- DOM APIを直接扱うのはベストプラクティスではない。
- 言われた通りに@HostListner使ってみたけど、ちょっと大変だった。
- イベント登録できるのが、window、document、hostElementのどれかで、この画面のこのエレメントにだけ登録したいんだよな〜ってときにはそれComponentとして部品化して、その中で@HostListner書いていかないとうまく動かない。
- ただそうやって作っていくと、ああ、Angularってこうやって書いていくものなのか、ってちょっとわかっていく気がする。
どこまで共通化するか悩む
- これはまだ答え出せていないんだけど、上で書いたような@HostListnerのイベント処理とかも共通化できたりするんですが、それらを含めてどこまで共通化すべきか悩みます。
- ってかこれはAngularに限らない話ですね。。。
- 書きながら、これ共通化しすぎちゃうと、コード見たときに動きわかんなくなるなぁとか、色々考えながら動かしながらうまく共通化していきます。
ディレクトリ構成が悩み
- 特にこれといった構成は決まっていないので、悩む。
- 今の所は以下のような構成
- 画面構成のディレクトリ
- サービスクラス用のディレクトリ(通信系、共通サービス系)
- 共通して利用したいディレクトリ
- ヘッダー、フッター、サイドメニューなどの共通モジュール系
- モーダル画面などの部品系
- そのほかutilityとか
- 今の所(2ヶ月くらい)は問題なく上の構成でスムーズに進んでいる模様。
Ngrxって使うべき?
- 状態管理するためのものらしい。
- 現在仕事でこれ利用すべきかどうか検討してくれ、と言われているので、来週あたりにまとめて記事にしようと思います。
constructorとngOnInitって何が違うの?
- Angularにおいては、基本的にngOnInitを利用すべき。
- @Inputがconstructorでの処理の後に評価されちゃうので、何も考えずに初期化処理していくとundefinedだよって怒られる可能性ある。
- けど何も考えずに初期化処理したいので、ngOnInit使う。