Angularコーディングスタイル・ルールまとめ

自分でコードを書く際のルールをまとめていきます。

基本的なスタイルガイドとして

2016年執筆の記事だが

@Input

• 契約として必ず値が渡されることを求めるプロパティについては、Non-null アサーションオペレータ !を使ってプロパティが undefined じゃないことを明示的に示す

@Component({
  selector: "user-card"
})
class UserCardComponent {
  @Input() user!: User;

  ngOnInit() {
    if (this.user == null) {
      throw new Error("[user] is required");
    }

    this.someFunc(this.user); // no need `if` type guard
  }

  someFunc(user: User) {}
}

RxJs

Observable

購読について

• Store との接続や、リアルタイム DB との接続など、コンポーネントが Observable を購読する必要があるときは、コンストラクタで Observable の初期化をおこなう
• そしてコンポーネント内ではsubscribeせず、テンプレート内でasyncパイプを使って非同期ビューを構築する。

class UserListComponent {
  userList$: Observable<User[]>;

  constructor(store: Store) {
    this.userList$ = this.store.select(state => state.userList);
  }
}

• コンポーネント内でsubscribeする必要がある場合は、Observable の初期化だけをコンストラクタで行い、subscribeの開始はngOnInit以降にする。
• コンポーネントの初期化より先に値の解決が始まってしまい、変更検知のタイミング制御が困難なり、デバッグしにくくなるため。

Observable型の変数

末尾に$をつける

Subject

asObservable

• Service等で宣言したSubject型の変数を他のコンポーネントで使う場合はasObservableを使用する。
• Observable型の変数ではnextが使えないため、意図せず値が流れることを防ぐことができる

後々調べたいこと

• メソッド名にonをつけるかの基準

• 真偽値を判定するメソッド名