- ビューとロジックは分けます
- ロジックから書きます
- よくやりがちなのが、実装をビューから書き始めること。
- まずはモデルのCRUDやそれを操作(フィルター、ソートetc)するメソッドを定義します
- それをビュー側が使うようにします
(2)で定義するクラスとその使い方
class Table {...} // tableを操作するクラス
class TableColumn {...} // columnを司るクラス
class TableRow {...}
class TableColumnText extends TableColumn {...}
class TableColumnNumber extends TableColumn {...}
class TableColumnDate extends TableColumn {...}
class TableColumnBoolean extends TableColumn {...}
// ロジックから書く
const table = new Table(data)
table.getData // {...}
const dataFiltered = table.where('"C" == "活寿会_新宿" || "C" == "活寿会_渋谷"')
// ※列追加時にアルファベットが割り当てられる。Cは3列目
みたいな使い方ができるjsのライブラリを探してみる
★★注意★★
- Viewのライブラリが軸となってはいけない。
- 軸はデータであり、Viewはあくまでそれを表現するための器にすぎない。
- Viewライブラリのあらゆる操作から、データを変更するメソッドを呼んであげる(以下例)
例)
- クリックやキーボードのイベントでn列のフィルターをXXXとXXXで行う
- 変更されたデータを反映するために、ビュー側(dataGridなど)に対してリフレッシュ(=再描画)してあげる
その他の表現の提案
table.columns[4] //
table.columns[4].filterBy(['活寿会_新宿', '活寿会_渋谷'])
table.setFilterWith('"C" == "活寿会_新宿" || "C" == "活寿会_渋谷"')
jsの落とし穴
- dataがArrayのときdata.map()はdataが書き換えられるので注意
- プリミティブではないデータ型(ArrayやObjectなど)は参照渡しなので、代入先を変更すると代入元も変更される。これを避けるにはディープコピーやシャドウコピーをする必要がある
JSON.parse(JSON.stringify(dataTable))
useStateでprivateにしてるようで
jsはmapなど参照渡しで代入する前から変数が書き換えられているから、privateの意味なし！！！