Elm-messages
提供:Dev Guides
エルム-メッセージ
メッセージはElmアーキテクチャのコンポーネントです。 これらのコンポーネントは、アプリケーションのインターフェイスとのユーザーの対話に応じて、ビューによって生成されます。 メッセージは、アプリケーションの状態を変更するユーザー要求を表します。
構文
--Message Syntax
type Message = some_message1 |some_message2 ...|some_messageN
イラストレーション
次の例は、単純なカウンターアプリケーションです。 ユーザーが[追加]ボタンと[減算]ボタンをクリックすると、アプリケーションは変数の値をそれぞれ1ずつ増やしたり減らしたりします。
アプリケーションには4つのコンポーネントがあります。 コンポーネントは以下のとおりです-
メッセージ
この例のメッセージは次のようになります-
type Message = Add | Subtract
モデル
モデルは、アプリケーションの状態を表します。 カウンターアプリケーションでは、モデル定義を以下に示します。カウンターの初期状態はゼロになります。
model = 0
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 "+"]
]
更新
このコンポーネントには、ビューによって生成された各メッセージに対して実行されるコードが含まれています。 これは以下の例に示されています-
update msg model =
case msg of
Add -> model+1
Subtract -> model-1
すべてを一緒に入れて
- ステップ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
}
ステップ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
ステップ4 *- *indexl を開き、以下のように機能することを確認します-