プログラマ英語学習日記

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

関数型よく知らない人のelm失敗編(2) - module

つい先ほど、モジュールの「階層化」について知りました…厳密にはやり方が分かったといったほうが的確かも。

そりゃ普通に考えれば当然のことなので、あまり役に立たない気はしますが備忘録かねてまとめておきます

やっちゃった失敗

始めた当初は当然ながらelmのモジュールシステムについてよく知らなかったわけです。

初期の1ファイル完結型を終えたあと、こんな感じでフォルダを掘りました。

projDir
  +-src/
    +- model/
    +   +- Model.elm -- module Model
    +   +- Update.elm -- module Update
    +- view/
    +   +- View.elm  -- module View
    +- Msg.elm
    +- index.elm

そしてこのままビルドすると当然ながら、 model/view のフォルダは見れないわけです。ビルドエラーです。

そこでビルドエラーにあったメッセージ、 elm-package.jsonにないんじゃない? という言葉に従うまま elm-package にディレクトリを追加していきました。

//elm-package.json
source-directories : [
  "src/",
  "src/model",
  "src/view"
]

当時はこれが当たり前だと思っていました。えぇ、今にして思えばあきらかにおかしい。


しかし時は流れ、プロジェクトは肥大化していきます。

src/
  +- api/
      +- *.elm
  +- core/
      +- Msg.elm
  +- entity/
      +- *.elm
      +- user
         +- *.elm
  +- model/
      +- *.elm
      +- user
          +- *.elm
  +- update/
      +- *.elm
      +- user
          +- *.elm
  +- view/
      +- *.elm
      +- page/
         *.elm
      +- common/
         *.elm
  +- utils/
      +- *.elm
  +- index.elm

こんな感じです。これを 全部source-directoriesに追加 という馬鹿なことをしてました…

本当に開発当時はこれしか方法がないと思っていたのです。source-directories直下しか見てくれないと勘違いしてました。

公式 が動かないと思っていたのは当たり前です。source-directoriesに追加してたのですから…


これの何がキツイって重複排除のためにモジュール名が長くなるのと、管理が難しくなったことです。だんだんどのモジュールがどのフォルダにあるのか分かりづらくなっていきました。

その時、初めて source-directoriesをsrc のみにし、モジュール名をドットで区切るということを知りました。。。


そんなわけでフォルダ構造は今と一緒ですが、module名(ファイル名)は大幅に変わりました。

  • 以前 : TopPageUserStateView
  • 今 : View.Top.UserView

シンプル。スッキリ。なにより同一階層にあるものがすごく分かりやすくなりました。

同じように、 importが整理しやすくなりました。並び順が分かりやすくなったといいますか。

以前の例

--どういう順番でならべるべきか
--アルファベット順も不自然
import UserApi
import UserState
import Common
import CssUtils
import Msg
import Model
import ServiceApi

今:モジュールがあるのですっきりです。モジュール順に並べています。

--どういう順番でならべるべきか
--アルファベット順も不自然
import Api.UserApi
import Api.ServiceApi
import Core.Msg
import Model.Model
import Model.UserState
import Utils.Common
import Utils.CssUtils

アルファベット順に並べるだけで近いモジュールが並んでくれるので非常に分かりやすくなりました。


ただし弊害として、importが若干面倒です。

  • 以前: import TopPageUserStateView
  • 今: import View.Top.UserView as UserView

どうしても同じ名前が二重になってしまいます。とはいえ as で全く別の名前にすると混乱しますからね。難しいです。


ということで冷静に考えたら当たり前なモジュール命名規則でした。

そりゃJavaも一緒だろ、という感じです。えぇ、なんで全部src-dirに追加という馬鹿なことしてたのか…

こんなのにハマる人間は少ないかもしれませんが、始めたばかりのかたは一応気を付けてください