Elmアーキテクチャを知る
こまきちElmアーキテクチャを知るきっかけになったスライド
Elmアーキテクチャを知るためのサイト
詳しくはこちらを参照
こまきちそもそもElmとは
Elm は JavaScript にコンパイルできる関数型プログラミング言語です。 ウェブサイトやウェブアプリケーションを作るのに役立ちます。Elm はシンプルであること、簡単に使えること、高品質であることを大切にしています。
こまきちこのアーキテクチャは、Elmの歴史の中から自然に生まれてきました。誰かがこれを「発明した」というより、コードの中にこの基本的なパターンが常にあることを初期のElmプログラマが発見したということです。示し合わせたわけでもないのに、誰でもコードをよりよく設計できるパターンが現れてくるなんて、なんだかちょっと不気味ですね！
みんなこのアーキテクチャに行き着くなんてあるんだなぁ。
MVVCは誰かが発表したもの、マイクロサービスもそんな感じのようだし結構すごいことな気がする
参考：
こまきちElm では、プログラムは必ず3つのパーツに分解できます。
Model — アプリケーションの状態
View — 状態を HTML に変換する方法
Update — メッセージを使って状態を更新する方法
言うなればMVU。Updateは状態更新のようなものか。
こまきちSample Code
module Main exposing (..)
-- Press buttons to increment and decrement a counter.
--
-- Read how it works:
-- https://guide.elm-lang.org/architecture/buttons.html
--
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
-- MAIN
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.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
Elmは初期値を画面に描画することから始まります。そこから以下のループに入ります。
1.ユーザーからの入力を待ちます
2.updateにメッセージを送ります
3.新しいModelを生成します
4.view関数を呼び出して新しいHTMLを取得します
5.画面上に新しいHTMLを表示します
6.繰り返します！
これがThe Elm Architectureの本質です。
ほう。
こまきちこれも読む
こまきち比べてみるとElmアーキテクチャパターンでは一方向でありシンプルに保たれるが、MVVMのViewModelには順方向・逆方向の流れが存在し、二つの流れがViewModelの中で組み合わされた場合ViewModelが複雑性を増す
こういう一方向か双方向かって問題、これに限らずよく聞くな
こまきちElmアーキテクチャでは副作用をコマンドやサブスクリプションと呼ばれるもので取り扱う。これにより参照透過性が保たれ、関数における副作用によるバグが無くなりテストも書きやすくなる。
一方MVVMでは、というかMVVMが実装されるオブジェクト指向言語などでは副作用を注意して取り扱う必要がある。副作用が発生する操作はModelレイヤーにおいて行うことであり、Modelレイヤー内で工夫して実装する。
こまきちElmアーキテクチャではビジネスロジックはUpdate関数から呼ばれる関数で実装される。それにより状態遷移が発生する。状態遷移はUpdate関数でしか行えないのでロジックがView関数など別のところに漏れ出すことが無い。
MVVMはModelで実装するのであるが、これは規約であり間違ってViewModelにロジックを書いてしまう間違いを起こす。ModelとViewModelの役割を把握すること、そしてその処理がビジネスロジックなのかViewの状態を作りだす処理なのかをただしく判断することが必要である。
こまきちWPFなどのMVVMに必要なバインディング機構を持った環境であればMVVMが役に立つだろう。ViewModelにはViewに状態を伝達する役割はない。これはバインディングを利用するためである。
WPS…Windows Presentation Foundation
マイクロソフトが開発した、.NET Framework 3.0以降に含まれるユーザインタフェースサブシステム