Elm入門と実践 - 買い物カートを作ってアーキテクチャ「TEA」を学ぶ

前述のとおり、Cartモジュールの最も重要な責務は、カートに関するビジネスルールを集約することです。これに付随して、カートのHTMLを組み立てるのに必要な数値（税額、配送料、合計額など）を計算することもまた、重要な責務となります。

こうしたロジックは、すべてこのモジュール内にInternalな関数として凝集させます。Internalな関数として閉じ込めることで、各種計算の責務がすべてこのCartモジュールだけで完結しているということが自明になります。今後もし何らかの仕様変更が起きて、カートで必要な数値の計算ロジックに変更があったとしても、変更範囲をこのひとつのモジュールに閉じることができるのです。

-- internals


{-| 現在選択されている商品一覧をdivのリストにする
-}
viewProductNames : Products.Products -> ProductIds -> List (Html msg)
viewProductNames products productIds =
    products
        |> Products.getByIdSet productIds
        |> List.map (\{ name, id } -> div [] [ text (String.concat [ "#", id, " ", name ]) ])


{-| 合計の税額を計算する
-}
totalTaxes : Products.Products -> ProductIds -> Int
totalTaxes products productIds =
    products
        |> Products.getByIdSet productIds
        |> List.foldl (\{ price } acc -> acc + truncate (toFloat price * 0.08)) 0


{-| 税と配送料を抜いた小計を計算する
-}
subTotal : Products.Products -> ProductIds -> Int
subTotal products productIds =
    products
        |> Products.getByIdSet productIds
        |> List.foldl (\{ price } acc -> acc + price) 0


{-| 送料を計算する。1500円を上限配送料とする。
-}
totalShipping : Products.Products -> ProductIds -> Int
totalShipping products productIds =
    let
        price =
            ceiling (toFloat (subTotal products productIds) / 500) * 500
    in
    if price < 1500 then
        price

    else
        1500

View

Modelに計算されたすべてのデータが反映されるため、Viewではなにも計算をせずデータをただHTMLへ変換するだけです。

-- view


view : msg -> Products.Products -> Cart -> Html msg
view onPurchaseMsg products (Cart cart) =
    div
        [ class "section cart" ]
        [ h2
            [ class "title" ]
            [ text "現在のカート" ]
        , div
            [ class "block selection" ]
            [ div [] (viewProductNames products cart.productIds) ]
        , div
            [ class "seperator" ]
            []
        , div
            [ class "block subtotal" ]
            [ span
                [ class "label" ]
                [ text "小計:" ]
            , span
                [ class "value" ]
                [ text (String.concat [ "¥", String.fromInt cart.subTotal ]) ]
            ]
        , div
            [ class "block shipping" ]
            [ span
                [ class "label" ]
                [ text "送料:" ]
            , span
                [ class "value" ]
                [ text (String.concat [ "¥", String.fromInt cart.shipping ]) ]
            ]
        , div
            [ class "block tax" ]
            [ span
                [ class "label" ]
                [ text "税:" ]
            , span
                [ class "value" ]
                [ text (String.concat [ "¥", String.fromInt cart.taxes ]) ]
            ]
        , div
            [ class "block total" ]
            [ span
                [ class "label" ]
                [ text "合計:" ]
            , span
                [ class "value" ]
                [ text (String.concat [ "¥", String.fromInt cart.total ]) ]
            ]
        , div
            [ class "actions" ]
            [ button
                [ class "purchase"
                , onClick onPurchaseMsg
                ]
                [ text "購入" ]
            ]
        ]

適切に設計されたアプリケーションのModelはViewのコードに現れます。Viewの中でModelのデータを複雑に計算しているとしたら、それはModelのデータ構造の設計を見直す必要があるでしょう。

Modelのデータに文字を付け加えたり、case文でパターンマッチによるHTMLの出し分けをしている程度になっているのが、Viewの責務としては理想です。

モジュールのつなぎこみ(App.elm)

Model

このAppモジュールでは、先程定義したモジュールの繋ぎこみと、カスタム型による画面の状態を定義しています。型の定義を見ると、今回のECカートには「ロード中」「ロード完了」「決済完了」の3つの画面があることが分かります。

-- model


type alias Session =
    { products : Products.Products
    , cart : Cart.Cart
    }


type Model
    = Loading
    | Loaded Session
    | Purchased Session


init : () -> ( Model, Cmd Msg )
init _ =
    ( Loading, Products.fetch ProductFetched )

Update

update関数では、メッセージごとに現在のModelの状態の組み合わせを処理します。Elmの場合、ここでModelの状態とメッセージの組み合わせの網羅性チェックが行われます。

-- update



type Msg
    = ProductFetched (Result Http.Error Products.Products)
    | AddProductToCart String
    | Purchase
    | BackToProducts


update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
    case msg of
        ProductFetched products ->
            case model of
                Loading ->
                    ( Loaded
                        { products = Result.withDefault Products.empty products
                        , cart = Cart.empty
                        }
                    , Cmd.none
                    )

                Loaded _ ->
                    ( model, Cmd.none )

                Purchased _ ->
                    ( model, Cmd.none )

        AddProductToCart id ->
            case model of
                Loading ->
                    ( model, Cmd.none )

                Loaded session ->
                    ( Loaded
                        { session
                            | cart = Cart.add id session.products session.cart
                        }
                    , Cmd.none
                    )

                Purchased _ ->
                    ( model, Cmd.none )

        Purchase ->
            case model of
                Loading ->
                    ( model, Cmd.none )

                Loaded session ->
                    ( Purchased session, Cmd.none )

                Purchased _ ->
                    ( model, Cmd.none )

        BackToProducts ->
            case model of
                Loading ->
                    ( model, Cmd.none )

                Loaded _ ->
                    ( model, Cmd.none )

                Purchased { products } ->
                    ( Loaded
                        { products = products
                        , cart = Cart.empty
                        }
                    , Cmd.none
                    )    

update関数は画面状態とメッセージの組み合わせが増えることで、掛け算的にパターンマッチの行数が増えていきます。その際、適切な範囲でアンダースコアを使った省略記法を組み合わせるとよいでしょう。

View

Modelの状態に応じてcase文でパターンマッチし、HTMLを返します。各モジュールで定義されていたview関数も、ここで呼び出されます。

-- view


view : Model -> Browser.Document Msg
view model =
    { title = "ECサイト"
    , body =
        case model of
            Loading ->
                [ div [] [ text "Loading..." ] ]

            Loaded loaded ->
                [ div
                    [ class "banner" ]
                    [ h1
                        [ class "title" ]
                        [ text "ECサイト" ]
                    ]
                , div
                    [ class "contents" ]
                    [ Products.view AddProductToCart loaded.products
                    , Cart.view Purchase loaded.products loaded.cart
                    ]
                ]

            Purchased ->
                [ div
                    [ class "contents purchased" ]
                    [ div
                        [ class "container" ]
                        [ div
                            [ class "title" ]
                            [ text "Thank You!" ]
                        , button
                            [ class "back"
                            , onClick BackToProducts
                            ]
                            [ text "商品一覧へもどる" ]
                        ]
                    ]
                ]
    }

Main

ここまでで定義されたすべての関数をdocument関数へ渡します。

-- main


main : Program () Model Msg
main =
    Browser.document
        { init = init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }

【発展編】LocalStorageとの連携

さて、ここまでのコードで今回の目的となるカートのアプリケーションは一旦完成です。しかし、より実践的かつ実用的なアプリケーション開発の場では、Elmだけでは達成できない仕様に遭遇することがあります。

たとえば、Elm単体ではブラウザAPIを経由してLocalStorageやWebSocketなどの仕組みを直接使うことができません。Elmではこうした状況に対するエスケープハッチとしてPortという仕組みが用意されています。Portを使用することで、Elmの型安全性を破壊することなく、JavaScriptの潤沢な資産を利用できるのです。

この章では発展編として、LocalStorageを用いたカート情報の永続化機能のコードを紹介します。Portを使用し、JavaScriptサイドとの型安全な連携がどのように表現されるかに注目してください。

状態操作に関する仕様が少々複雑になってきましたので、状態遷移図を用意し整理します。

状態遷移図だけでは、どのようなタイミングで状態が更新されるのかが分かりません。WebAPIの呼び出しや、JavaScript側へLocalStorageに対するデータ取得依頼が発生するタイミングを整理したシーケンス図を以下に示します。ElmからJavaScriptへ伸びる矢印のデータの流れがPortを用いる部分です。

以降は主要なコードの変更箇所を見ていきます。

Cartモジュールの変更箇所

LocalStorageと連携するためにPortをCartモジュール内に定義します。この部分の実装でポイントとなるのは、JavaScriptとの入出力に使われるデータの型をValue型としていることです。

-- ports


port persistOnLocalStorage : Encode.Value -> Cmd msg


port loadOnLocalStorage : () -> Cmd msg


port loadedOnLocalStorage : (Encode.Value -> msg) -> Sub msg

もちろんStringやIntなどのプリミティブ型をPort越しに入出力することも可能ですが、JavaScript側のデータ構造や型がElm側の定義と異なる際、ランタイムエラーとなってしまうデメリットがあります。これでは充分に型安全性が担保されているとは言えません。

ElmではPortにValue型を使うことで、JavaScriptとのデータのやり取りにデコーダとエンコーダを適用でき、型による安全性が担保されるのです。今回の実装では、専用のエンコーダとデコーダをローカルな関数として次のように定義しておきます。

-- internals


encode : ProductIds -> Encode.Value
encode productIds =
    Encode.list Encode.string (Set.toList productIds)


decode : Products.Products -> Decode.Decoder Cart
decode products =
    Decode.succeed (List.foldl (\id cart -> Tuple.first (add id products cart)) (Tuple.first empty))
        |> Pipeline.required "ids" (Decode.list Decode.string)

定義されたPort群は次にようにラップされた関数から呼ばれます。loaded関数はsubscriptionとしてAppモジュール側で呼び出される際に、外部から任意のMsgを渡せるようになっています。

loaded : Products.Products -> (Cart -> msg) -> msg -> Sub msg
loaded products onLoaded onLoadingFailed =
    loadedOnLocalStorage
        (\value ->
            value
                |> Decode.decodeValue (decode products)
                |> Result.map onLoaded
                |> Result.withDefault onLoadingFailed
        )


load : Cmd msg
load =
    loadOnLocalStorage ()

カートに商品を追加するadd関数と空のカートデータを生成するempty関数では、永続化を行うPortを呼び出します。

empty : ( Cart, Cmd msg )
empty =
    ( Cart
        { productIds = Set.empty
        -- ...
        }
    , Set.empty
        |> encode
        |> persistOnLocalStorage
    )


add : String -> Products.Products -> Cart -> ( Cart, Cmd msg )
add productId products (Cart cart) =
    let
        nextProductIds =
            Set.insert productId cart.productIds

        -- ...
    in
    ( Cart
        { productIds = nextProductIds
        -- ...
        }
    , nextProductIds
        |> encode
        |> persistOnLocalStorage
    )

Appモジュール

Modelには、LocalStorageからのCartデータの取得待ちの状態（LoadedProducts）表現するバリアントが増えました。商品一覧のデータのみがデータとして存在していることを表現するため、Products型のデータだけを持っています。

先の状態遷移図にあるとおり、LocalStorageからのデータが取得され次第LoadedAllへと遷移します。

type Model
    = Loading
    | LoadedProducts Products.Products
    | LoadedAll Session
    | Purchased Session

LocalStorageからのカート情報の取得に成功／失敗した際に呼ばれるMsgも増えました。

type Msg
    = ProductFetched (Result Http.Error Products.Products)
    -- ...
    | CartLoaded Cart.Cart
    | CartLoadingFailed

JavaScript側からの入力を受け付けるために、Cart側で定義したSubscriptionの関数をApp側で繋ぎこみます。

-- subscriptions


subscriptions : Model -> Sub Msg
subscriptions model =
    case model of
        Loading ->
            Sub.none

        LoadedProducts products ->
            Cart.loaded products CartLoaded CartLoadingFailed

        LoadedAll _ ->
            Sub.none

        Purchased _ ->
            Sub.none

Cartモジュール内で定義したPortはJavaScript側での実装が必要です。

const app = Elm.App.init()

app.ports.loadOnLocalStorage.subscribe(() => {
  app.ports.loadedOnLocalStorage.send(
    JSON.parse(localStorage.getItem("ids"))
  )
})

app.ports.persistOnLocalStorage.subscribe(ids => {
  localStorage.setItem("ids", JSON.stringify({ ids }))
}) 

Elmでは異なるプログラミング言語との連携において、FFI（Foreign Function Interface）のように言語の中に別の言語を埋め込むような手段をあえて採用していません。ElmにおけるPortも、JavaScriptの世界とElmの世界をつなぐPub/Subインターフェイスのように感じられます。

ここにはふたつの理由があります。ひとつは、やはり型安全性を担保することにあります。JavaScriptの世界と比べると、やはりElmの世界は方安全性が高いです。FFIを採用してElmの中にJavaScriptを書いてしまうと、結果的にElmの特性である型安全な世界が壊れてしまいます。Portというインターフェイスのみを経由してデータをやりとりし、Elm側ではデコーダのような仕組みを持つことで、安全性が守られているのです。

もうひとつは、Portの設計思想に影響を与えたポータビリティの考え方です。仮にElmが他の言語とのブリッジングを必要とするのであれば、ホストとなる言語はElmのPortのインターフェイスを実装するだけです。ElmはJavaScript以外の言語と将来的に相互運用できるようにも設計されているのです。

さいごに

今回の記事では初歩的なElmアプリケーションと、より実践的なアプリケーションのコードをご紹介しました。本稿を参考に、皆さんご自身がElmを使ったアプリケーション開発を楽しんでもらえたら幸いです。

今回のテーマとなったカートアプリケーションには、まだまだカスタマイズの余地があります。たとえば、今回の実装では、Cartモジュールにおける合計や小計などの数値の扱いがすべてIntで統一されているため、今後の国際化対応でドルによる計算などを考慮する場合、小数点が扱えるFloat型が必要になります。このような国際化対応を考慮するのであれば、新しく価格の計算ロジックや数値情報をカプセル化したOpaque Typeを導入するのが適切かもしれません。

他にもSPAのようなルーティングを実装してみたり、画面遷移を幽霊型でより堅牢な実装にするなど、Elmの特性を生かす余地はまだまだ残されています。ぜひ、GitHub上でフォークし、それを元にカスタマイズしElmを楽しんでみてください。

もっとElmを学ぶために

日本にはElm-jpコミュニティがあり、Elm公式ドキュメントの翻訳や、不定期でのミートアップの開催など国内で活発なコミュニティ活動が行われています。興味を持った方は気軽にDiscordサーバに参加してみてください。初心者向けの質問チャンネルもあります。

また、TwitterでElmのことをつぶやいたり、ご自分のブログやQiitaでElmに関する記事を書いてみるのも最高におすすめです。 国内でもじわじわElmの人気が高まってきていると感じますが、インターネットに存在するElm関連リソースの多くは、まだ英語です。些細なことでも、Elmに関する情報を日本語で発信することは、きっと多くのElm入門者たちの支えになるでしょう。私も皆さんのアウトプットを楽しみにしています！

泉 征冶 （いずみ・せいや） @sy_izumi

Fringe81に2018年新卒で入社。以降、ピアボーナスプラットフォーム「Unipos」の開発に携わり、Scala、Golang、Elmに親しむ。2019年、パリで開催されたカンファレンス「elm Europe 2019」で日本人初の登壇を行う。
ブログ：Runner in the High