本文へ移動
rdlabo.dev
English

no-component-method-except-lifecycle

@Component 上のlifecycle以外のmethodを禁止する。許可するlifecycle methodは implements から導出する（プロパティは許可）。

  • ⭐️ このルールは plugin:@rdlabo/rules/recommended プリセットに含まれます。

@Component クラスは薄く保ちます。振る舞いは ViewModel（またはmodalの launch* ヘルパー）に置きます。

許可されるmethodは、implements に列挙したlifecycle interfaceと一致するものだけです。対応するinterfaceなしのlifecycle methodもエラーです。

プロパティは対象外です。readonly open = () => ... のようなarrow-functionフィールドも含みます。getter / setter と constructor は許可されます。

@Directive / @Injectable / 通常のクラスは検査しません。@rdlabo/rules/require-viewmodel および @rdlabo/rules/implements-ionic-lifecycle と併用します。

既存アプリにはComponent methodが多いことがよくあります。まず "warn" から始め、ViewModelへロジックを移してから "error" に切り替えるのが望ましいです。

ルール詳細

✅ 正しい: methodが implements と一致する

@Component({ selector: 'app-example', template: '' })
export class ExamplePage implements ViewWillEnter, ViewWillLeave, OnDestroy {
  readonly vm = new ViewModel(this);
  readonly open = () => launchOtherPage(this.helper, {});

  constructor() {}

  ionViewWillEnter() {
    this.vm.reload$.next();
  }

  ionViewWillLeave() {}

  ngOnDestroy() {}
}

❌ 誤り: implements なしのlifecycle method

@Component({ selector: 'app-example', template: '' })
export class ExamplePage {
  ionViewWillEnter() {} // error — needs implements ViewWillEnter
  ngOnDestroy() {} // error — needs implements OnDestroy
}

❌ 誤り: implementsしたinterfaceがmethodをカバーしていない

@Component({ selector: 'app-example', template: '' })
export class ExamplePage implements ViewWillEnter {
  ionViewWillEnter() {}
  ionViewWillLeave() {} // error — needs implements ViewWillLeave
}

❌ 誤り: Component上の任意method

@Component({ selector: 'app-example', template: '' })
export class ExamplePage implements ViewWillEnter {
  ionViewWillEnter() {}

  open() {
    // error
    launchOtherPage(this.helper, {});
  }
}

Interface → method の対応

Angular

implements メソッド
OnChanges ngOnChanges
OnInit ngOnInit
DoCheck ngDoCheck
AfterContentInit ngAfterContentInit
AfterContentChecked ngAfterContentChecked
AfterViewInit ngAfterViewInit
AfterViewChecked ngAfterViewChecked
OnDestroy ngOnDestroy

Ionic

implements メソッド
ViewWillEnter ionViewWillEnter
ViewDidEnter ionViewDidEnter
ViewWillLeave ionViewWillLeave
ViewDidLeave ionViewDidLeave
ViewWillUnload ionViewWillUnload

許可（報告しない）: constructor、get / set アクセサ、すべてのプロパティ。

オプション

{
  // Extra method names to allow (e.g. trackBy helpers during migration).
  additionalAllowedMethods?: string[];
}

'@rdlabo/rules/no-component-method-except-lifecycle': [
  'warn',
  { additionalAllowedMethods: ['trackById'] },
],

実装