先に結論
コーディング規約としては以下の3つ
- import文とコンポーネントクラスの間に双方向Bindで使用する変数をまとめた
Model
クラス宣言 - コンポーネントクラスの変数宣言として
model
変数を定義しModelクラスをnewする - template(画面)に表示するための関数の接頭文字は
model
とする
サンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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だとすぐに分かるようになる(はず)し、コード補完も楽々だ!!
実際はある程度の大きなプロジェクトで使用してみないとわからないけどね!!!