Elm-messages

エルム-メッセージ

メッセージはElmアーキテクチャのコンポーネントです。 これらのコンポーネントは、アプリケーションのインターフェイスとのユーザーの対話に応じて、ビューによって生成されます。 メッセージは、アプリケーションの状態を変更するユーザー要求を表します。

構文

--Message Syntax
type Message = some_message1 |some_message2 ...|some_messageN

Copy

イラストレーション

次の例は、単純なカウンターアプリケーションです。 ユーザーが[追加]ボタンと[減算]ボタンをクリックすると、アプリケーションは変数の値をそれぞれ1ずつ増やしたり減らしたりします。

アプリケーションには4つのコンポーネントがあります。 コンポーネントは以下のとおりです-

メッセージ

この例のメッセージは次のようになります-

type Message = Add | Subtract

Copy

モデル

モデルは、アプリケーションの状態を表します。 カウンターアプリケーションでは、モデル定義を以下に示します。カウンターの初期状態はゼロになります。

model = 0

Copy

View

ビューは、アプリケーションの視覚要素を表します。 ビューには2つのボタン（）と（-）が含まれます。 ユーザーがそれぞれ「」ボタンと「-」ボタンをクリックすると、「追加」および「減算」メッセージがビューによって生成されます。 その後、モデルの変更された値がビューに表示されます。

view model =
-- invoke text function
h1[]
[   div[] [text "CounterApp from finddevguides" ]
   ,button[onClick Subtract] [text "-"]
   ,div[][text (toString model)]
   ,button[onClick Add] [text "+"]
]

Copy

更新

このコンポーネントには、ビューによって生成された各メッセージに対して実行されるコードが含まれています。 これは以下の例に示されています-

update msg model =
case msg of
Add -> model+1
Subtract -> model-1

Copy

すべてを一緒に入れて

• ステップ1 *-フォルダー_MessagesAppとファイルMessagesDemo.elm_を作成します

• ステップ2 *-次のコードをelmファイルに追加します-

import Html exposing (..)
import Html.Events exposing(onClick)

model = 0 -- Defining the Model

--Defining the View

view model =
   h1[]
   [  div[] [text "CounterApp from finddevguides" ]
      ,button[onClick Subtract] [text "-"]
      ,div[][text (toString model)]
      ,button[onClick Add] [text "+"]
   ]

--Defining the Messages

type Message = Add | Subtract

--Defining Update

update msg model =
case msg of
   Add -> model+1
   Subtract -> model-1

-- Define the main method
main =
   beginnerProgram
   {
      model=model
      ,view=view
      ,update=update
   }

Copy

ステップ3 *-ターミナルで elm makeコマンド*を実行します。 * elm makeコマンド*はコードをコンパイルし、上記で作成した.elmファイルからHTMLファイルを生成します。

C:\Users\dell\elm\MessagesApp> elm make .\MessageDemo.elm
Some new packages are needed. Here is the upgrade plan.

   Install:
      elm-lang/core 5.1.1
      elm-lang/html 2.0.0
      elm-lang/virtual-dom 2.0.4

Do you approve of this plan? [Y/n] y
Starting downloads...

   ΓùÅ elm-lang/html 2.0.0
   ΓùÅ elm-lang/virtual-dom 2.0.4

ΓùÅ elm-lang/core 5.1.1
Packages configured successfully!
Success! Compiled 38 modules.
Successfully generated indexl

Copy

ステップ4 *- *indexl を開き、以下のように機能することを確認します-

elm makeコマンド