セル

Posted on 4月 13, 2023

ここではHandsontableやTabulatorなどのフレームワークとしてのセルについて考える。

表示

最もシンプルなセルはユーザーの入力をそのまま格納し、その値を表示するセルだが、これだけでは収まらないケースが出てくる。

例えばセルをリスト形式で選ぶ際に内部で持っている値はidとして保持したく、なおかつidを表示用に変換しなければならない場合が当てはまる。

つまりセルでは表示用と内部で保持している値は一致することはあるが別であると考えるべきで、内部の値 -> (関数) -> 表示の値の仕組みが必要である。そしてこの関数を定義できる必要がある。

表示と同じでユーザーの入力をそのまま使用したくないケースは多々ある。よってユーザー入力も入力値 -> (関数) -> 内部の値の仕組みが必要であり、この関数を定義できる必要がある。

ここまででセルは関数を介して入力値を内部の値用に変換し、また内部の値を表示用に変換する機能を持つものであることが分かる。

ここで内部の値はセルの構成要素なのかという疑問が出てくる。言い換えると状態管理をテーブル編集フレームワークの責務にするべきかということで、例えばTabulatorは状態管理が一体化しているため、Reduxを使いたい時に状態の2重管理が発生してしまう。

セルは何列何行目かが分かればいいので、たとえフレームワーク側でデフォルトの状態管理ロジックをつくったとしても切り離せる設計の方が良く、テーブル編集フレームワークの責務にはしない方がいいと考える。