JavaScript: ElmのTEAっぽいことを素のJSでやってみた



素のJSでアプリを書いていて、「あーだりぃ...これってElmっぽくならないかな?」と思ったわけで。

まずは基本的なとこから、っていうことで、[Ellie](https://ellie-app.com)を開くと最初に出てくるカウンターのサンプルに、追加でリセットボタンをつけたやつ  https://ellie-app.com/9SX5Fqtg7cZa1
これを素のJSで何とかできないかやってみました。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="ttatsf" data-slug-hash="oNYjGMy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="counter">
  <span>See the Pen <a href="https://codepen.io/ttatsf/pen/oNYjGMy">
  counter</a> by ttatsf (<a href="https://codepen.io/ttatsf">@ttatsf</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



あれ?何かいい感じじゃない?
意外とシンプルでした。これだったらいろいろ応用できるかも。

ひとつずつ見ていきます。

# model
ほぼ同じ。

```js
// Elm:
initialModel : Model
initialModel =
    { count = 0 }

// JavaScript:
const init =  
  {count: 0}
```


# update
ほとんど同じ。

```js
//Elm:
type Msg
    = Increment
    | Decrement
    | Reset

update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { model | count = model.count + 1 }

        Decrement ->
            { model | count = model.count - 1 }
        Reset ->
            initialModel

// JavaScript:
const Inc = Symbol("increment")
const Dec = Symbol("decrement")
const Reset = Symbol("reset")

const update = msg => model => 
  msg === Inc ? 
    {...model, count: model.count + 1}

  : msg === Dec ? 
    {...model, count: model.count - 1}

  : msg === Reset ? 
    init

  : model
```
ここはほぼそっくり。
素のJSでは Symbolを使って msg を表現している。


# view
かなり違う。

```js
// Elm:
view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        , button [ onClick Reset ] [ text "reset" ]
        ]

// JavaScript:
document.body.insertAdjacentHTML(
  'beforeend'
  , 
`    <button type="button"id="b0">+1</button>
    <div id="d0"></div>
    <button type="button"id="b1">-1</button>
    <button type="button"id="b2">reset</button>
`
  )

const view = model => { 
  document.querySelector("#d0").textContent = 
    model.count.toString()
}
```
Elmでは、独自の関数を使って

1. 静的な要素の配置
2. 動的な要素の書き換え
3. イベントリスナーの登録

を、一気に宣言的にやってしまっている。

素のJSでは、1.は html で直書きするか innerHTML/insertAdjacentHTML で、3.はonclick/addEventLister でやって、2.だけ view 関数としてここで定義している。

# main
今回のキモ。

```js
// Elm:
main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

// JavaScript:
const browserSandBox = 
  model => msg => {
    model = update( msg )( model )
    view( model )
  }

const sendMsg = 
  browserSandBox(init)

sendMsg(Reset)

document.querySelector("#b0")
  .addEventListener('click', 
                    _ => sendMsg(Inc)
                   )

document.querySelector("#b1")
  .addEventListener('click',  
                    _ => sendMsg(Dec)
                   )

document.querySelector("#b2")
  .addEventListener('click',  
                    _ => sendMsg(Reset)
                   )
```
Elmでは、init, view, update を登録すれば、いい感じにしてくれます。何をどうしてるかはわからない。ブラックボックスです。

素のJSでどうしたら実現できるかな?と考えました。やりたいことは：

1. model と msg を取得して
2. その msg で model を更新して
3. その model を 保存して
4. html要素を書き換える

ということ。あれ? なんだかできそうだな?
2., 3., 4. を関数で表すと：

```js
model => msg =>{
  model = update( msg )( model )
  view( model )
}
```
これを browserSandBox ということにして、model (=init) を部分適用した関数  

```js
const sendMsg = 
  browserSandBox(init)
```
(狭義のクロージャでもある)を、addEventListener('click',... で適当な msg 引数で登録すればいいんじゃね? -> できたー!

# まとめ
素のJSでもTEAっぽいことができる。クロージャを使えばね。


もっといいやりかた、ちゃんとしたやりかたがあるよっていうのがあればコメントお願いします。