フロントエンドエンジニアへ！スパゲッティ解消法！ (自分なりのNote）

1. ビューとロジックは分けます
2. ロジックから書きます
   • よくやりがちなのが、実装をビューから書き始めること。
   • まずはモデルのCRUDやそれを操作(フィルター、ソートetc)するメソッドを定義します
3. それをビュー側が使うようにします

(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ライブラリのあらゆる操作から、データを変更するメソッドを呼んであげる(以下例)

例)

1. クリックやキーボードのイベントでn列のフィルターをXXXとXXXで行う
2. 変更されたデータを反映するために、ビュー側(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の意味なし！！！