はじめに
アプリを設計する基本となるらしい「Elmアーキテクチャ」なるものについて。
Elmアーキテクチャ
形はこんな感じ
Elmアーキテクチャ
module 〜〜
import 〜〜
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, update = update
, view = view
}
-- MODEL
(Modelを作る)
-- UPDATE
(画面から入力とかあったときにMsgを受け取ってその結果どうModelを更新するか)
-- VIEW
(HTMLとか見た目を書く)
よく分からないと思うので具体例を挙げる。
例は画面上部に文字列が表示されてその下に３つボタンがあって、押すボタンによって表示文字列が変わる。
コードと地の文を行ったり来たりすると分かりにくいかと思うので説明はコード内にコメントで書いた。
Dog.elm
module Main exposing (Model)
import Browser
import Html exposing (..)
import Html.Events exposing (onClick)
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, update = update
, view = view
}
-- MODEL
type alias Model = -- Modelという型を作る。Intの別名はModel型です
Int -- くらいの意味。
init : Model -- Modelの初期値は０。
init =
0
-- UPDATE
type Msg -- Msg型というのは左記３パターンのうちのどれかを取る。
= OrdinalDog
| SpecialDog
| ScaryDog
update : Msg -> Model -> Model -- Msgと現在のModelを引数として受け取り
update msg model = -- 新しいModelを返す。
case msg of
OrdinalDog -> -- ボタンを押したときにMsgを受け取るが
0 -- 受け取る値は「OrdinalDog」ならば
-- 新モデルは０
SpecialDog -> -- 「SpecialDog」ならば新モデルは1
1 -- 「ScaryDog」ならば新モデルは2となる。
ScaryDog ->
2
-- VIEW
view : Model -> Html Msg
view model =
div []
[ div [] [ text (dogFunc model) ] -- 下記dogFunc関数にmodelを渡したときに返される文字列を表示する。
, button [ onClick OrdinalDog ] [ text "普通の犬" ] -- クリック時に「OrdinalDog」がmsgとして受け取られる。
, button [ onClick SpecialDog ] [ text "可愛い犬" ] -- クリック時に「SpecialDog」がmsgとして受け取られる。
, button [ onClick ScaryDog ] [ text "怖い犬" ] -- クリック時に「OrdinalDog」がmsgとして受け取られる。
] -- ボタンをクリックするとMsgとして「〜〜Dog」がうけとられ
-- UPDATEのところでModelが更新される
-- 更新されたModelがdogFuncの引数となって文字列が得られる。
dogFunc : Model -> String
dogFunc model =
case model of
0 ->
"わん"
1 ->
"わんわんわんわんわんぺろぺろぺろぺろく〜〜〜んぺろぺろぺろぺろぺろ"
2 ->
"がるるるるるる"
_ ->
"......"
試し方
- 適当なディレクトリを作る。
-
elm initする。 - srcというディレクトリができているのでsrc内にDog.elmを置く。
-
elm make src/Dog.elm --output=dog.htmlする。(--outputは必須ではないが指定しないとindex.htmlという名前でコンパイルされる。) - dog.htmlが出来るのでブラウザで開く。