初心者が Elm 0.19 で 2048 を作るまで Part 2

## 前回

[Part 1](https://qiita.com/n4o847/items/2e8c2a83fa998bd0af06)


## 第５段階　スライド操作

いよいよゲーム本体の記述に入ります。

おそらく状態の遷移をちゃんと捉えることが重要なので、2048 で考えてみると、

```
次のターンへの遷移：　特定の方向にスライド　→　ランダムにタイルを置く
```

のように分解できます。

まずスライド操作を分解していきます。とりあえず 2048 の挙動を確認すると、右にずらしたときに

```
_ _ 2 2  =>  _ _ _ 4
_ 2 2 2  =>  _ _ 2 4
_ 4 2 2  =>  _ _ 4 4
2 2 2 2  =>  _ _ 4 4
```

のようになります。これは単に `map` するとかでは難しいので、`fold` を利用することを考えて、以下のような遷移を考えてみます。

|次のセル||待ち|完了|
|:-:|:-:|:-:|:-:|
|(初期状態)| | | |
|2|→|2| |
|2|→| |4|
|2|→|2|4|
|Empty|→|2|4|
|2|→| |4, 4|
|4|→|4|4, 4|
| |...| | |

つまり、やってくる次のセルに対して

- Empty は無視
- Tile だったら
  - 受け入れ可能か
  - マージ可能か

といった処理を考えればよいので、

```elm
type Accumulator
    = Waiting Cell (List Cell)
    | Done (List Cell)


accumulate : Cell -> Accumulator -> Accumulator
accumulate cell acc =
    if cell == Empty then
        acc

    else
        case acc of
            Waiting waiting done ->
                if waiting == cell then
                    Done (mergeCell cell waiting :: done)

                else
                    Waiting cell (waiting :: done)

            Done done ->
                Waiting cell done
```

`mergeCell` (s?) は２つのセルが `Tile` なら中身を足して返す関数です。（`Maybe.map2 (+)` の再生産ですね）

次は方向によって場合分けして `fold` していきますが、個人的にはこれが一番難関でした。

とりあえず動くところまでいったコードは、List の List に変換して、右方向なら上のやつを素直に適用、左なら revserse して右にたらい回し、上下なら transpose してたらい回し…… という感じなんですが、結構 dirty になってしまったのでコミットのリンクだけ貼っておきます。いい方法が浮かばないんですよね、そのうちリファクタリングしたい。

[ここまでのコミット](https://github.com/n4o847/elm-2048/tree/61293c2a62433f0b9c0ea2b3455f1fee8be09d0f)


## 第６段階　乱数の扱い

さて次は「ランダムな場所にランダムなタイルを置く」をやります。が、ランダムの扱いはまた面倒になります。というのも、純粋関数型言語では関数は同じ引数が与えられたら同じ結果を返さなければならず、Elm 自身はそのようなランダム性を扱えないからです（参考：https://qiita.com/sand/items/4efd8eeafd2c33778e08）。

というわけで `Msg` にこれを足していきますが、0.19 からライブラリが core から外されたので、インストールしないと使えません。

```
> elm install elm/random
```



```elm
import Random


-- タイルを置ける座標を集める
emptyPositionList : Board -> List Position
emptyPositionList board =
    board
        |> Array.map Array.toList
        |> Array.toList
        |> List.indexedMap (\i -> List.indexedMap (\j -> Tuple.pair ( i, j )))
        |> List.concat
        |> List.filterMap
            (\( position, cell ) ->
                case cell of
                    Tile n ->
                        Nothing

                    Empty ->
                        Just position
            )


-- タイルを置く場所をランダムに選ぶ
randomPosition : Board -> Maybe (Random.Generator Position)
randomPosition board =
    let
        positionList =
            emptyPositionList board
    in
    case positionList of
        [] ->
            Nothing

        head :: tail ->
            Just (Random.uniform head tail)


-- 置くタイルをランダムに選ぶ
randomTile : Random.Generator Cell
randomTile =
    Random.uniform (Tile 2) [ Tile 4 ]
```

`Random.uniform` が、空リストで `Maybe` になるのを防ぐために `a -> List a -> Generator a` になっているのは面白いですね。まあ結局 `Maybe` にしちゃってるんですが、ゲームオーバー時の処理につながるので後で変えましょう。

さて `Msg` と `update` にこれを加えていきます。

```elm
type Msg
    = Slide Direction
    | Put ( Position, Cell )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Slide direction ->
            let
                slidedBoard =
                    slideBoard direction model.board

                cmd =
                    if model.board == slidedBoard then
                        Cmd.none

                    else
                        randomPosition slidedBoard
                            |> Maybe.map (\position -> Random.pair position randomTile)
                            |> Maybe.map (Random.generate Put)
                            |> Maybe.withDefault Cmd.none
            in
            ( { model
                | board = slidedBoard
              }
            , cmd
            )

        Put ( position, cell ) ->
            ( { model
                | board = setBoard position cell model.board
              }
            , Cmd.none
            )
```

さて確認すると……　動きました！　汚いけどあとで直していきましょう。

![2048.gif](https://qiita-image-store.s3.amazonaws.com/0/62215/4b42df5f-dbc9-67f9-224c-3ee7c50ef03b.gif)

[ここまでのコミット](https://github.com/n4o847/elm-2048/tree/60c788c7475521f1f7ac72bf8398d3564081a833)


## 第７段階　初期盤面

どうやら 2048 は初期状態でタイルが２つ置かれるようですが、現状だと `init` に `Put` コマンドを書いても１つしか置けません。

そこで最初に考えたのは `Msg` を２回送るという方法ですが、色々見る限りこれは悪い方法らしいので、置ける場所をランダムに複数とってくるようにします。

とりあえず、リストから n 個の要素をランダムに取ってくる補助関数を作ります。

```elm
sample : Int -> List a -> Random.Generator (List a)
sample n list =
    if n <= 0 then
        Random.constant []

    else
        let
            indexedList =
                List.indexedMap Tuple.pair list
        in
        case indexedList of
            [] ->
                Random.constant []

            head :: tail ->
                Random.uniform head tail
                    |> Random.andThen
                        (\( index, element ) ->
                            let
                                omitted =
                                    List.take index list ++ List.drop (index + 1) list
                            in
                            Random.map ((::) element) (sample (n - 1) omitted)
                        )
```

これは時間計算量 O(n * (length list)) くらいになるけど、多分大丈夫でしょう。

あとは位置生成器とタイル生成器を統合する関数を作り

```elm
randomPositionedTiles : Int -> Board -> Random.Generator (List ( Position, Cell ))
randomPositionedTiles n board =
    let
        positionList =
            sample n (emptyPositionList board)

        tileList =
            Random.list n randomTile
    in
    Random.map2 (List.map2 Tuple.pair) positionList tileList
```

`init` を変更します。

```elm
init : () -> ( Model, Cmd Msg )
init _ =
    let
        emptyBoard =
            Array.repeat 4 <| Array.repeat 4 <| Empty
    in
    ( { board = emptyBoard
      }
    , randomPositionedTiles 2 emptyBoard
        |> Random.generate PutMany
    )
```

`PutMany (List ( Position, Cell ))` も適宜作ります。

これでやっと、初期状態でランダムな２つのタイルが置かれました。大したことないだろうと思ってたら割と詰まって、考えの改めが必要な回でした。

[ここまでのコミット](https://github.com/n4o847/elm-2048/tree/2d952204a0fe7807034c8db9875be80073d174cf)


## 第８段階　スコア

次はスコアを記録していきます。といってもここはあまり難しくないです。各関数の返り値にスコアの増分に関する情報を付けます。[差分を貼っておきます](https://github.com/n4o847/elm-2048/commit/2e395a18b50a98756cdd8cf3c8ff92edb9317cf6)。とりあえず Tuple で返すようにしましたが、 Elm において Tuple を多用するのはあまり良くないらしい？ので、まあそのうち変えましょう。

[ここまでのコミット](https://github.com/n4o847/elm-2048/tree/2e395a18b50a98756cdd8cf3c8ff92edb9317cf6)


## 第９段階　CSS

0.19 からスタイル指定が変更になって、

```elm
div
    [ style
        [ ("hoge", "100px")
        , ("fuga", "100px")
        ]
    ]
    []
```

だったのが

```elm
div
    [ style "hoge" "100px"
      style "fuga" "100px"
    ]
    []
```

に変更になりました。このように Elm 内に直接スタイルを記述する方針は CSS in Elm と呼ばれており、メリットもデメリットもそれぞれあるようですが、今のところ大した記述量じゃないし、CSS ファイルを別個で取り込めるまでに至っていないので、とりあえず直書きします。

![4096.gif](https://qiita-image-store.s3.amazonaws.com/0/62215/373a522c-9f63-0dcb-a4f0-198673ebcff9.gif)

いい感じですね。データに応じてスタイルを変えられたり、コンポーネントとしてまとめられるのは強みではあります。

[ここまでのコミット](https://github.com/n4o847/elm-2048/tree/9f2b1128f1414fae6cc1c5b506943cdec7b5c376)


## 第１０段階　終了条件

- これ以上動かせなくなった
- 2048 ができあがった

の２つの条件を判定していきます。

```diff
 type alias Model =
     { board : Board
     , score : Int
+    , over : Bool
+    , won : Bool
     }
```

```elm
stuck : Board -> Bool
stuck board =
    [ Left, Right, Up, Down ]
        |> List.all
            (\direction ->
                Tuple.first (slideBoard direction board)
                    == board
            )


won : Board -> Bool
won board =
    toListBoard board
        |> List.any (List.any ((==) (Tile 2048)))
```

（前者は全方向動かすのを試しているので恐らく効率が悪いです。）

`update` と `view` もこれを使って書き換えます。これで大体完成です！

[ここまでのコミット](https://github.com/n4o847/elm-2048/tree/b4bc1ece34f2d908ee9bf89da5ce28da002902d2)


## 大体完成

```
> elm make src/Main.elm --optimize --output=main.html
```

で HTML を吐くことができます。

これで遊べるようにはなりました。まだファイル分割や `Html.Keyed` を使ったアニメーションなど課題は考えられますが、一旦完成ということにします。


## 感想

良いと思った点

- JavaScript を意識しなくてよい。
- 関数型といっても、関数型言語の中では学習コストが低いように思える。
- 実行時エラーが無かった。あるとしたらロジックのミスぐらいだったので、ロジックに集中できる。
- Elm Architecture に従って作っていけば、結構ごちゃごちゃしない。
- 標準で VDOM だし、パッケージを探せば割と色々な便利機能がある。
- reactor などの周辺ツールが整っている。公式に formatter がある。

悩んだ点

- 逆に JavaScript で楽だったことが Elm で極端に面倒になることはある。特に JSON や Random の扱いとか。
- CSS はどうするのか、ただこれは JavaScript のフレームワーク全般で課題になっていることではありそう。
- なんだかんだで webpack とかと組み合わせなきゃいけないのかなあというもやもや。
- （言語の問題ではないが、） elm-format するときにしょっちゅう `Access violation in generated code when reading ~~~` みたいなエラーが出てきて、何故かソースコードに追記されるので消さなければならずイライラした。Windows のせいらしいが未だよくわかってない。
- バージョンアップが破壊的（個人的にはそこまで気にしてはいない）


結局この良さが言語自体によるものなのか Elm Architecture によるものなのか周辺環境によるものなのかはわかりませんが、相乗的なものではあると思います。

これから使ってみようかな、と思えるような言語でした。