複数モジュール化していきます。

ソースの中身は違いますが、elm tutorialのやり方を真似してやっていくので参考にしてください。

今はこの状態ですが、

$ tree src
src
├── Main.elm
├── index.html
└── index.js

以下のように分けます。Main.elmをModels, Msgs, Update, Viewに分割します。

$ tree src
src
├── Main.elm
├── Models.elm
├── Msgs.elm
├── Update.elm
├── View.elm
├── index.html
└── index.js

elmアーキテクチャは以下のようなアプリケーションフローを持ちます。

（https://www.elm-tutorial.org/en/02-elm-arch/04-flow.html）

• programはMain.elmに
• updateはUpdate.elmに
• viewはView.elmに

それぞれ定義し、

• program, update, viewの間でやり取りするモデルをModels.elmに
• また送受信するメッセージをMsgs.elmに

それぞれ定義します。

Msgs.elm

module Msgs exposing (..)

type Msg
    = NoOp

Models.elm

module Models exposing (..)

type alias Model =
    String

Update.elm

module Update exposing (..)

import Models exposing (Model)
import Msgs exposing (Msg(..))

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

View.elm

module View exposing (..)

import Html exposing (Html, div, text)
import Models exposing (Model)
import Msgs exposing (Msg)

view : Model -> Html Msg
view model =
    div []
        [ text model ]

Main.elm

module Main exposing (..)

import Html exposing (program)
import Models exposing (Model)
import Msgs exposing (Msg)
import Update exposing (update)
import View exposing (view)


init : (Model, Cmd Msg)
init =
    ( "Hello", Cmd.none )

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

main : Program Never Model Msg
main =
    program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

で、もう一度yarn startで確認しましょう。同じようにHelloが表示されます。

では次回からこれを基礎に、施設情報をまとめるサイトを作っていきます。