The Elm Architectureをコードで触れてみた。

前回の記事でThe Elm Architecture(TEA)について勉強したので、実際にコードで触ってみることにした。

カウンターの例

Elmガイドにあるカウンターの例をなるべく答えをみずに書いてみる。

-- module 宣言
module Main exposing(..)

-- import 複数
import Browser
import Html exposing(..)
import Html.Attributes exposing(..)
import Html.Events exposing(onClick)


-- model は、Int
type alias Model = Int


-- init 関数の定義
init : Model
init = 0


-- メッセージの定義
type Msg = Increment | Decrement

-- update関数の定義
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 Increment] [ text "+" ] 
    , p [] [ text (String.fromInt model) ]
    , button [ onClick Decrement] [ text "-" ] 
    ]

-- main Browser.sandboxを使う
main  = Browser.sandbox {init = init , view = view ,  update = update}

Ellie: https://ellie-app.com/9SGDWtcs2Tva1

String.fromInt関数を使えばよかったけど、
「elm 数字 文字列 変換」のような検索をしてもぱっとみやりたいことはでてこないかった。

関連するモジュール（今回だったら、String)のパッケージのドキュメントを探したほうが効率がいいかも。

リセット機能を追加

Elmガイドに記載されている練習問題

練習問題: The Elm Architectureが優れていることの一つに、プロダクトに変更が必要な場合はとても簡単に拡張できることが挙げられます。あなたのプロダクトマネージャが"reset"機能を思い付いたとしましょう。新しいボタンはカウンタを0にリセットします。

この機能を追加するにはMsg型の実装部分にもどってもう一つの可能性のResetを追加しましょう。メッセージを受け取ったときに何をすべきかをupdate関数に記述して下さい。最後はviewにボタンを追加して下さい。

それでは、"reset"機能を実装してみましょう！

をやってみた。

-- module 宣言
module Main exposing(..)

-- import 複数
import Browser
import Html exposing(..)
import Html.Attributes exposing(..)
import Html.Events exposing(onClick)


-- model は、Int
type alias Model = Int


-- init 関数の定義
init : Model
init = 0


-- メッセージの定義

type Msg = Increment | Decrement | Reset

-- update関数の定義
update : Msg -> Model -> Model
update msg model =  
    case msg of 
        Increment -> 
            model + 1
        Decrement -> 
            model - 1 
        Reset -> 
            0 
   


-- view関数の定義
view :  Model -> Html Msg 
view model = div []
    [ button [ onClick Increment] [ text "+" ] 
    , p [] [ text (String.fromInt model) ]
    , button [ onClick Decrement] [ text "-" ] 
    , button [ onClick Reset] [ text "Reset" ]
    ]

-- main Browser.sandboxを使う
main  = Browser.sandbox {init = init , view = view ,  update = update}

Ellie: https://ellie-app.com/9SGWhszPRHba1

ハマりどころ

1. 関数の定義をやるときにすぐに = という記法が思いうかばない。 ->　「〇〇を定義」という言葉を「=」と脳内変換できるようにする。
2. 日本語でググってもどのモジュールを使っていいのかわからない。英語でググったほうが情報は多いがそれでも関連ありそうなパッケージ名を考えて検索しないといけない。
3. 関数のネストにまだなれていないため、式がめちゃくちゃになってしまいエラーがでる。 -> 解決先は丸括弧の対応付けをよく考える。ex) text String.fromInt 0 は誤り。正しくは、text (String.fromInt 0)

感想

サンプルコードに記載されているカウンタをコードを見ずに書いてみた。
コンパイルをするとどの点がおかしいかElmが知らせてくれるのでその都度ググりながら書いた。
まだElmの式の書き方や文法になれていないためおかしな書き方をしてしまうが、これはきっと慣れなのだろう。沢山コードを書いてくぞ！！