Elmでディレクトリ構造エディタを作る

#はじめに
[動いているサイト](https://dir-tree.netlify.com/)
![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216927/9065f8a2-bcab-8f82-bc8a-5836e522797b.gif)
こんな感じの静的サイトを作ったという話です。(demoは少し古いですが)  
全体的にMonocleやOptionalと言った概念を理解していないところが出ていると思うので、ご容赦ください。


# 使ったもの
- [Elm](https://elm-lang.org/)
  - [tomjkidd/elm-multiway-tree-zipper](https://package.elm-lang.org/packages/tomjkidd/elm-multiway-tree-zipper/latest/)
  - [arturopala/elm-monocle](https://package.elm-lang.org/packages/arturopala/elm-monocle/latest/)
  - [elm-community/undo-redo](https://package.elm-lang.org/packages/elm-community/undo-redo/latest/)
- [Bulma](https://bulma.io/)

# [実装](https://github.com/care0717/dir-tree)
`src/Main.elm`に全てのロジックが書いてあります。なので上から解説していこうと思います。
## model定義~init

```Main.elm
-- MODEL

-- 階層構造的なID
type alias Id =
    List Int


-- 木構造のNodeに当たる部分, 今回valueはディレクトリ・ファイル名に相当
type alias NodeData =
    { id : Id, value : String }


-- Undo/Redo機能のためにUndoListで包んでいる
type alias Model =
    UndoList (Tree NodeData)


-- 最初は空
nodeTree : Tree NodeData
nodeTree =
    Tree { id = [], value = "" }
        []

-- 初期化
init : Model
init =
    UndoList.fresh nodeTree
```
model定義は[elm-monocle Lens/Optionalで多分木操作を隠蔽](https://qiita.com/ababup1192/items/a874a87f33b26650f969)を参考にしています。(いつもありがとうございます。)

## 更新処理(update)

```Main.elm
-- UPDATE


type Msg
    = Change Id String
    | Add Id
    | Delete Id
    | Reset
    | Undo
    | Redo
    | Save
    | CancelSave


update : Msg -> Model -> Model
update msg model =
    case msg of
        -- idで指定したnodeの値を変更する。1文字ずつUndoしたくないのでここではUndoListを更新しない。
        Change id value ->
            { model | present = model.present |> Optional.modify (setNodeById id) (\nd -> { nd | value = value }) }

        -- idで指定したnodeを削除する（子供も含めて）
        Delete id ->
            case
                List.reverse id
                    |> List.head
            of
                Just index ->
                    UndoList.new
                        (model.present
                            -- 指定されたnodeを削除するためには、親の子供を変更する必要がある
                            |> Optional.modify (parentId id |> setChildrenById) (\children -> removeElement index children)
                            |> resetRootId
                        )
                        model

                Nothing ->
                    model

        -- idで指定したnodeの下に子を追加する
        Add id ->
            UndoList.new
                (model.present
                    |> Optional.modify (addTreeById id) (\_ -> Tree { id = [], value = "" } [])
                    |> resetRootId
                )
                model

        -- model(木)を初期化する
        Reset ->
            UndoList.new (Tree { id = [], value = "" } []) model

        Undo ->
            UndoList.undo model

        Redo ->
            UndoList.redo model

        -- focus時に状態を保存しておく
        Save ->
            UndoList.new model.present model

        -- blur時に何も変更がなければSaveをcancelする
        CancelSave ->
            if model.present == (UndoList.undo model).present then
                if UndoList.lengthPast model == 1 then
                    UndoList.fresh model.present

                else
                    UndoList.new (UndoList.undo model).present (UndoList.undo model |> UndoList.undo)

            else
                model
```
ポイントは`Optional.modify`で、`変更する対象`+`変更`を与えると階層構造に対してよしなに変更してくれます。

## Optionalをゴリゴリするところ
```Main.elm
-- getterとsetterとIdを与えるとそれを変更できるものが返ってくる。
-- 自分でも何言ってるかわからないので、いい感じの解釈があれば教えて欲しいです。
getOptionalByGetterAndSetter : (Zipper a -> b) -> (b -> Zipper a -> Maybe (Zipper a)) -> Id -> Optional (Tree a) b
getOptionalByGetterAndSetter getFunc setFunc id =
    let
        goToZipper : Tree a -> Maybe (Zipper a)
        goToZipper tree =
            let
                goToNode zipper =
                    List.foldl (\idx mz -> mz |> Maybe.andThen (Zipper.goToChild idx)) (Just zipper) id
            in
            ( tree, [] ) |> goToNode

        -- 指定されたidのZipperを、dataで書き換える関数を用いて書き換え、Root Zipperに戻したもの
        replacedZipper tree data =
            goToZipper tree |> Maybe.andThen (setFunc data) |> Maybe.andThen Zipper.goToRoot

        -- 指定されたidのZipperからdataを得るgetter
        get tree =
            goToZipper tree |> Maybe.map getFunc

        -- 指定されたidのZipperのdataを書き換えるsetter, もし該当箇所が無ければ元のtreeを返す
        set data tree =
            Maybe.withDefault tree (Maybe.map treeOfZipper <| replacedZipper tree data)
    in
    Optional get set

-- Idを指定してTreeに子供を加えられるOptionalを返す
addTreeById : Id -> Optional (Tree a) (Tree a)
addTreeById =
    getOptionalByGetterAndSetter treeOfZipper Zipper.appendChild

-- Idを指定して子供を変更できるOptionalを返す
setChildrenById : Id -> Optional (Tree a) (Forest a)
setChildrenById =
    getOptionalByGetterAndSetter (treeOfZipper >> MultiwayTree.children) Zipper.updateChildren

-- Idを指定してNodeの値を変更できるOptionalを返す
setNodeById : Id -> Optional (Tree a) a
setNodeById =
    getOptionalByGetterAndSetter Zipper.datum Zipper.replaceDatum
```
`getOptionalByGetterAndSetter`を作ることで、子供を変更したり、値を変更したりするOptionalを簡単に作れるようになりました。

## IdをResetする
```Main.elm
resetRootId : Tree NodeData -> Tree NodeData
resetRootId tree =
    let
        -- 最初のIdを決めないと再帰できないので決めたのち、再帰関数(resetId)に渡す。
        newTree =
            Tree { id = [], value = (MultiwayTree.datum tree).value } (MultiwayTree.children tree)
    in
    resetId newTree


resetId : Tree NodeData -> Tree NodeData
resetId tree =
    let
        id =
            (MultiwayTree.datum tree).id

        newChildren =
            List.foldl
                (\child acc ->
                    let
                        -- 自分の直下の子供のIdは、自分のIdから決まる。
                        newChild =
                            Tree { id = id ++ [ List.length acc ], value = (MultiwayTree.datum child).value } (MultiwayTree.children child)
                    in
                    -- 子供のIdが決まったので孫のIdを再帰的に決めてもらう
                    acc ++ [ resetId newChild ]
                )
                []
                (MultiwayTree.children tree)
    in
    Tree (MultiwayTree.datum tree) newChildren
```
子供を加えたり、削除したりするとIdがめちゃくちゃになるので、そういう操作が入った時には毎回Idを初期化しています。(無駄な処理も多いので改善したい・ここでもOptionalを使えそう・・・？)

## PlaneTextへの変換
```Main.elm
tree2Plane : Tree NodeData -> String
tree2Plane tree =
    let
        -- 得られたディレクトリ構造のブロックの頭に、線(┣━ ・ ┃)を足す処理
        addHeader : String -> String
        addHeader s =
            case String.split "\n" s of
                first :: list ->
                    "\n├── " ++ first ++ List.foldl (\x acc -> acc ++ "\n│   " ++ x) "" list

                _ ->
                    ""

        -- 同じく線を足すが、最後尾は特別扱いしなければならない(┗━ を足す)
        addHeader4Last : String -> String
        addHeader4Last s =
            case String.split "\n" s of
                first :: list ->
                    "\n└── " ++ first ++ List.foldl (\x acc -> acc ++ "\n    " ++ x) "" list

                _ ->
                    ""
    in
    -- 最後尾を取りたいが、直接は取れないのでreverseしている
    case MultiwayTree.children tree |> List.reverse of
        last :: rest ->
            (MultiwayTree.datum tree).value
                ++ List.foldl
                    (\x acc ->
                        -- 子供のブロック（文字の塊）にHeaderを足して親に返していくという発想
                        acc ++ addHeader (tree2Plane x)
                    )
                    ""
                    (List.reverse rest)
                ++ addHeader4Last (tree2Plane last)

        _ ->
            (MultiwayTree.datum tree).value
```
`acc ++ addHeader (tree2Plane x)`の部分など`(tree2Plane x)`で完成したものが返ってくるという前提で組んでいくという、再帰関数的な思考に慣れるまで時間がかかりました。(小並感)

# まとめ
Optionalの概念をまだ深く理解してはいないですが、不変なものの一部を変更するという観点に置いて非常に便利なものだとは理解できました。周辺ライブラリも色々とあるので、こういったものはElmでシュッと作れて非常に良いですね。