This page covers Elm 0.18

複数のモジュール

アプリケーションはすぐに成長してしまいます。したがって、ファイルを1つのファイルに保存してしまうと、たちまち維持するのが難しくなるでしょう。

循環的な依存関係

直面するかもしれない別の問題は、循環依存です。たとえば、次のような場合があります。

  • Player型を定義するMainモジュール
  • Mainで宣言されたPlayer型をインポートする Viewモジュール
  • ビューをレンダリングする ViewをインポートするMain

このとき、循環的な依存が発生しています。

Main --> View
View --> Main

回避方法は?

この場合、 Player型をMainから MainViewの両方で読み込むことができるようにする必要があります。

Elmで循環的な依存関係を処理するには、アプリケーションをより小さなモジュールに分割するのが最も簡単です。この特定の例では、 MainViewの両方でインポートできる別のモジュールを作成できます。私たちは3つのモジュールを持つことになります:

  • メイン
  • ビュー
  • モデル(Player型を含む)

これで依存関係は次のようになります。

Main --> Models
View --> Models

これで循環依存はなくなりました。

messagesmodelscommandsutilitiesなどのモジュール用に別々のモジュールを作成してみてください。モジュールは通常、多くのコンポーネントからインポートされます。


小さなモジュールでアプリケーションを分割しましょう:

src/Messages.elm

module Messages exposing (..)


type Msg
    = NoOp

src/Models.elm

module Models exposing (..)


type alias Model =
    String

src/Update.elm

module Update exposing (..)

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


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

src / View.elm

module View exposing (..)

import Html exposing (Html, div, text, program)
import Messages exposing (Msg)
import Models exposing (Model)
import View exposing (view)

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

src / Main.elm

module Main exposing (..)

import Html exposing (Html, div, text, program)
import Messages exposing (Msg)
import Models exposing (Model)
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


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

コードはこちらにありますhttps://github.com/sporto/elm-tutorial-app/tree/018-03-multiple-modules


たくさんのモジュールを作成しましたが、簡単なアプリケーションには過剰でしょう。しかし、より大きなアプリケーションでは、分割すると作業がより簡単になります。

results matching ""

    No results matching ""