【Angular】双方向bindの変数をまとめたい。

1 先に結論
- 1.1 サンプルコード
2 経緯
- 2.1 コンポーネント内の変数の種類を再確認
3 まとめ

先に結論

コーディング規約としては以下の３つ

import文とコンポーネントクラスの間に双方向Bindで使用する変数をまとめたModelクラス宣言
コンポーネントクラスの変数宣言としてmodel変数を定義しModelクラスをnewする
template(画面)に表示するための関数の接頭文字はmodelとする

サンプルコード

import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';

// !! 双方向Bindで使用する変数をクラス化する
class Model {
  id: number;
  name: string;
  clazz: InClazz;
  clazzList: InClazz[];
  pattern1: string;
}

@Component({
  selector: 'app-hoge',

・・・・
export class HogeComponent implements OnInit {
  // !! newすることでクラス内変数はundefined状態にする
  model = new Model();

・・・・
・・・・

  // !! template(画面)に表示するための関数の接頭文字は`model`とする
  modelId(): string {
    return this.id + "だぜ！！";
  }

import { Component, OnInit } from '@angular/core';

import { environment } from '../../environments/environment';

// !! 双方向Bindで使用する変数をクラス化する

class Model {

id: number;

name: string;

clazz: InClazz;

clazzList: InClazz[];

pattern1: string;

}

@Component({

selector: 'app-hoge',

・・・・

export class HogeComponent implements OnInit {

// !! newすることでクラス内変数はundefined状態にする

model = new Model();

・・・・

// !! template(画面)に表示するための関数の接頭文字は`model`とする

modelId(): string {

return this.id + "だぜ！！";

}

経緯

oc-noteもそうだがスパゲッティだぜ！！！

仕様書もなく行き当たりばったりで作成した結果、見るに堪えないコードになった。その中でユーザー入力による値の変化が起きる双方向bind変数の管理がしにくく、ネーミングルールなども決めていなかったため無駄な苦労をした。

コンポーネント内の変数の種類を再確認

コンポーネントクラス内で宣言する変数の役割を再確認してみた。

[(ngModel)]、{{}}で使用するBIND変数
function間で使用する変数(状態flg、interval値、使い回すfsやdialogなど)
定数

大雑把だがこの3種類になると思う。先と同じことを記載するが「ユーザー入力による値の変化が起きる双方向bind変数」は便利だが、管理をしていないと面倒になる。さらにコード補完機能を使用しても、BIND対象の変数を探すのが面倒だった。そこでBIND変数は纏めておくべきかと思った。

まとめ

最上位部分に双方向BINDする(される？)一覧があれば確認もしやすく、template内で使用する[(ngModel)]、{{}}は必ずmodelがつくためコード補完も簡単になる。

表示用の変数も接頭文字にmodelをつけることにより、表示用のfunctionだとすぐに分かるようになる(はず)し、コード補完も楽々だ！！

実際はある程度の大きなプロジェクトで使用してみないとわからないけどね！！！