Phoenix with Elm をやってみた Part3

Part2から続きまして Phoenix with Elm をためしてみましたのでメモ書きとして残しておきます。
本日は Phoenix with Elm の Adding a Model and enhancing the View を行っていきます。

今回はModelを追加して、Viewの表示を表示しやすくしていきます。
前回に記載されておりますが、Elmでは、Modelは アプリケーションの状態を保持する処理を行い、Viewにて処理した状態を表示するための処理を記載いたします。


ソースコードの流れから読んでいきましょう。ソースコードの全体に関しましては、Github上で確認することができます

main = 
  view init

main にて view を呼び出す際に view のパラメータとして init を付加して引き渡しております。
そのため、下記の init にて定義されている値が view に引き渡されることとなります。

init =
  [ { seatNo = 1, occupied = False }
  , { seatNo = 2, occupied = False }
  , { seatNo = 3, occupied = False }
  , { seatNo = 4, occupied = False }
  , { seatNo = 5, occupied = False }
  , { seatNo = 6, occupied = False }
  , { seatNo = 7, occupied = False }
  , { seatNo = 8, occupied = False }
  , { seatNo = 9, occupied = False }
  , { seatNo = 10, occupied = False }
  , { seatNo = 11, occupied = False }
  , { seatNo = 12, occupied = False }
  ]

init にて定義されている値が引き渡されるのはわかったかもしれませんが、その値の定義はどこで行われているかと言いますと、下記のコードの部分にて定義が行われております。

type alias Seat =
  { seatNo : Int
  , occupied : Bool
  }

type alias Model =
  List Seat

Modelとして List の Seat をまずは定義しております。
では、Seatの定義はと言いますと、 alias にて seatNo というInt型と occupied という Bool型の定義であることがコードから読み取れます。

最後に Viewにて引き渡されたモデルを ul や li タグにて表示するように記載されております。

view model =
  ul [ class "seats" ] (List.map seatItem model)

seatItem seat =
  li [ class "seat available" ] [ text (toString seat.seatNo) ]

いつもどおり iex -S mix phoenix.server の実行後に
http://localhost:4000 にアクセスしてみましょう。
List.map にて引き渡されたModelの個数分だけ表示を行っているため、下記の画像のように 12個分のシートが表示されるようになっております。


以上となります。
以前に追加した cssで表示が行われている部分もあり、目に見えない部分も多くあるとは思いますが、ElmにてModel と View での使用方法がわかる内容ではないかと思います。

それでは、次回の更新が続けられることを願い、お別れとなります。