Elmに入門してみた その3
Elmに入門してみたのでそのメモです。
今回は、The Elm Architectureについて簡単にまとめます。
その1はこちら
その2はこちら
The Elm Architecture Elmは言語が特定のアーキテクチャ推奨しているという珍しい一面があります。
そのアーキテクチャですが大きく分けて以下の三つの部品からなります.
Model – アプリケーションの状態を管理する Update – 状態を更新するためのロジック View – HTMLで状態を表示するためのロジック ソースコードをみるとわかりやすいと思いますので、今回はgithubで公開されている簡単なサンプルを取り上げて見ていきます。
The Elm Architectureについてのサンプル実装はこちらです。
https://github.com/evancz/elm-architecture-tutorial/
このサンプルの中からボタンをクリックのものを今回は見ていきます。
+ボタンと-ボタンが表示され、それぞれ押されるたびにModelの数値がincrement/decrementされるというものです。\
実際の動きはこんな感じ。
短いのでソースコード全文を載せます。
import Browser import Html exposing (Html, button, div, text) import Html.Events exposing (onClick) main = Browser.sandbox { init = init, update = update, view = view } -- MODEL type alias Model = Int init : Model init = 0 -- UPDATE type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 -- VIEW view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (String.
blog.foresta.me