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

先に結論

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

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

サンプルコード

経緯

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

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

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

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

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

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

まとめ

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

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

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

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告