複数モジュール化していきます。
ソースの中身は違いますが、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が表示されます。
では次回からこれを基礎に、施設情報をまとめるサイトを作っていきます。