Phoenix with Elm をやってみた Part2

Elixir Elm Phoenix

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

まずは、css と 画像ファイルの追加を行っていきます。
下記のディレクトリにリンク先のファイルを配置していきます。

web/static/css/seatsaver.css
web/static/assets/images/seat.png

上記のファイルは画面表示のために使用するだけなので、特にきにする必要はありません。

今回は、Elmの標準的なアーキテクチャのパターンとしては下記のように
Model - Update - View の形式での記載を行っていきます。
それぞれ下記ように使用していくようです。

Model：アプリケーションの状態を保持する処理
Update：アプリケーションの状態の更新を行う処理
View：HTMLなどの表示の処理

import Html exposing (..)

-- MODEL

type alias Model = .....

-- UPDATE

update = ....

-- VIEW

view = ...

上記のように Model - Update -View の順番に記載していくのが標準的なパターンのようです。
こちらは guide.elm-lang.org の The Elm Architecture にも記載されております。

さて、今回の更新内容ですが VIEWの追加のみを行っていきます。
VIEWはHTMLなどの表示の処理を実施しますので "Woo hoo, I'm in a View" を表示するように変更します。
昨日、記載していた SeatSaver.elm を変更していきます。

web/elm/SeatSaver.elm

main =
  view

-- VIEW

view =
  Html.text "Woo hoo, I'm in a View"

昨日のコードでは、main にて Html.text を呼び出しておりましたが、今回のソースコードでは view で呼び出しを行っております。
違いとしては、それぐらいとなります。

昨日と同じく、 iex -S mix phoenix.server の実行後に
http://localhost:4000 にアクセスし、 Woo hoo, I'm in a View と表示されていれば成功です。
css と 画像の追加を行っていた場合には Woo hoo, I'm in a View の周りに灰色の枠も追加されているかと思います。

以上となります。
さて、Elm のアーキテクチャに合わせて記載方法の変更を行うようになってきました。
次はどのような変更を行っていくのでしょうか。