ポーラの回文

Webアプリケーション

Elmは、信頼できるWebアプリケーションを作るための楽しい言語です。エラーメッセージは親切で、性能も高く、アセットも小さく、そして実行時例外がありません。

おそらくElmで最も有名で、広くまねされているのがThe Elm Architectureです。これはWebアプリケーションを組み立てるためのシンプルなパターンで、ElmのWebアプリケーションはすべてこの形で書かれます。

中心となる考え方は、アプリケーションの状態を表すModel、そのモデルをupdateする方法、そしてモデルをviewする方法を軸にコードを組み立てるというものです。

Modelにはアプリケーションの状態、つまりアプリケーションが必要とするすべてのデータが入ります。テキストボックスと、そのテキストを逆にした文字を表示するテキストだけのシンプルなアプリケーションを想像すると、モデルは次のようになります。この例は、Elmガイドでも確認できます。

type alias Model =
  { text : String
  }

updateは、変化があったとき（たとえばユーザーがボタンをクリックしたとき）にMsgとともに呼び出される関数です。Msgと現在のModelを受け取り、新しいModelを返します。

type Msg
  = TextChanged String

update : Msg -> Model -> Model
update msg model =
  case msg of
    TextChanged newText ->
      { model | text = newText }

viewは、ブラウザーでユーザーに表示するHTMLを返す関数です。現在のModelを受け取り、Html Msg（ElmがHTMLを表すために使う型）を返します。

view : Model -> Html Msg
view model =
  Html.div []
    [ Html.input
      [ Html.Attributes.placeholder "Text to reverse"
      , Html.Attributes.value model.text
      , Html.Events.onInput TextChanged
      ]
      []
    , Html.div [] [ Html.text (String.reverse model.text) ]
    ]