Dev日記

プログラミング学習のまとめなど

肥大化するModelTreeとどう戦うか(が分かっていない)

だんだんelmのサンプルが大きくなってきました。Natigationも導入し、いわゆるSPA化してます。

ここで問題になってきたのが、「どう巨大なTreeを管理するか」

言語の難しさの壁を越えたら次は他言語でもあるあるな問題に遭遇しました。

現在のページは

  • トップページ(巨大)
  • ニュース詳細ページ
  • ユーザ情報ページ
  • 設定ページ

サンプルなので、あまりアプリ自体の仕様については無視してください。※実際はこれの倍ぐらいあります

当初はこんな Model-Tree でした

+- root
  +- pageType:ページ種別(enum相当)
  +- accountInfo : ユーザ情報
  +- topPageModel
  +- newsDetailModel
  +- userInfoModel
  +- settingModel

ページごとの状態を一括でルートの下にぶらさげていました。

当然ながら非表示のページもぶらさがっており、効率悪いわけです。


そこで次のようにしてみました

type PageType
  = Top TopPageModel
  | NewsDetail NewsDetailModel
  | UserInfo UserInfoModel
  | Setting SettingModel


type alias Model =
  { accountInfo: AccountInfo
  ,  pageType : PageType
  }

ページごとにEnum化して状態を保持、今のページと関連する状態を紐づけてみたわけです。

が、これはこれで面倒。わざわざ update や view で case判定 する必要がでてきました。

それはまだ何とかなったのですが、次に「ページ戻る」で戻った先の内容がクリアされてしまう問題が発生。

LocationChangedのたびに Page の Modelを作り直していたためですね。

とはいえ、以前の状態は破棄済みなのでどうしてくれよう…なにかキャッシュを作るべきか否か。

でもそれそれで巨大なTreeになるので、それなら最初のほうがいいんじゃないか? と思い最初のパターンに戻りました。


このへん、型について安全な言語であるがゆえの悩みかもしれませんね。

逆に動的型付けだと、ここのTreeに何があるか分からず別の悩みがあるのですが….

そんなわけで全く答えがでてません。Reduxのプロジェクトを一度眺めてみるとよさそうですね。

CombinedReducer相当のものを自作すべきか

※他者ライブラリ利用は勉強にならないので今回は利用を禁じています


にしてもElmのすごいところは、規模が大きくなるたびにフォルダ構造やモデル構造を別物にしてるのに、「ちゃんと動く」ことですね。

もちろんJava等では当然かもしれませんが、フロントエンドでこれができているのがすごいです。

一方で 欠点が IDE ですね。VSCodeでもAtomでもIDE補完が貧弱でちょっときびしい。(※Eclipse程度を要求してます)

またリファクタリング機能もないです。例のフォルダ移動、修正はすべて人力書き換えですからね…(もちろん一括置換は使ってますが)

もはや IDE は言語の機能と呼べると思います。最近だと TypeScript や Kotlin が広まったのは言語として優れているのはもちろん、IDEが強力だったというのも大きいと思っています。Microsoft,JetBrainsともにIDE開発会社ですしね。

言語としては正直大きな不満はないので、今後はこちらの進化も期待したいです。