Elm-コマンド

前の章では、Elmアーキテクチャのさまざまなコンポーネントとその機能について説明しました。ユーザーとアプリケーションは、メッセージを使用して互いに通信します。

アプリケーションが外部サーバー、API、マイクロサービスなどの他のコンポーネントと通信する必要がある例を考えてみましょう。ユーザーリクエストを処理します。これは、Elmのコマンドを使用して実現できます。メッセージとコマンドは同義ではありません。メッセージはエンドユーザーとアプリケーション間の通信を表し、コマンドはElmアプリケーションが他のエンティティと通信する方法を表します。コマンドは、メッセージに応答してトリガーされます。

次の図は、複雑なElmアプリケーションのワークフローを示しています-

ワークフロー

ユーザーはビューと対話します。ビューは、ユーザーのアクションに基づいて適切なメッセージを生成します。更新コンポーネントはこのメッセージを受信し、コマンドをトリガーします。

構文

コマンドを定義するための構文は以下のとおりです-

type Cmd msg

ビューによって生成されたメッセージはコマンドに渡されます。

図

次の例では、APIにリクエストを作成し、APIからの結果を表示します。

アプリケーションはユーザーから番号を受け取り、それをNumbers APIに渡します。このAPIは、数値に関連する事実を返します。

アプリケーションのさまざまなコンポーネントは次のとおりです-

Httpモジュール

ElmのHttpモジュールは、HTTPリクエストの作成と送信に使用されます。このモジュールはコアモジュールの一部ではありません。このパッケージをインストールするには、elmパッケージマネージャーを使用します。

API

この例では、アプリケーションはNumbers APIと通信します（「http://numbersapi.com/#42」）。

View

アプリケーションのビューには、テキストボックスとボタンが含まれています。

view : Model -> Html Msg
view model =
   div []
      [ h2 [] [text model.heading]
      ,input [onInput Input, value model.input] []
      , button [ onClick ShowFacts ] [ text "show facts" ]
      , br [] []
      , h3 [][text model.factText]
      ]

モデル

モデルは、ユーザーが入力した値と、APIによって返される結果を表します。

type alias Model =
   { heading : String
   , factText : String
   , input :String
   }

メッセージ

アプリケーションには、次の3つのメッセージがあります-

ShowFacts
入力
NewFactArrived

_Show Facts_ボタンをクリックすると、_ShowFacts_メッセージが更新メソッドに渡されます。ユーザーがテキストボックスに値を入力すると、_Input_メッセージがupdateメソッドに渡されます。最後に、Httpサーバーの応答を受信すると、_NewFactArrived_メッセージが更新に渡されます。

type Msg
   = ShowFacts
   |Input String
   | NewFactArrived (Result Http.Error String)

更新

updateメソッドは、モデルとコマンドオブジェクトを含むタプルを返します。ユーザーが[ファクトの表示]ボタンをクリックすると、メッセージが更新プログラムに渡され、更新プログラムがNumbersAPIを呼び出します。

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
   case msg of
      Input newInput ->
      (Model "NumbersApi typing.." "" newInput ,Cmd.none)
      ShowFacts ->
         (model, getRadmonNumberFromAPI model.input)

      NewFactArrived (Ok newFact) ->
         (Model "DataArrived" newFact "", Cmd.none)

      NewFactArrived (Err _) ->
      (model, Cmd.none)

ヘルパー機能

ヘルパー関数_getRandomNumberFromAPI_はNumbersAPIを呼び出し、ユーザーが入力した番号をそれに渡します。 APIによって返された結果は、モデルの更新に使用されます。

getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
   let
      url =
         "http://numbersapi.com/"++newNo
   in
      Http.send NewFactArrived (Http.getString url)

Sr. No.	Method	Signature	Description
1	Http.getString	getString : String → Request String	Create a GET request and interpret the response body as a String.
2	Http.send	send:(Result Error a → msg) → Request a → Cmd msg	Send a Http request.

main

これがElmプロジェクトのエントリポイントです。

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

すべてを一緒に入れて

ステップ1 *-CommandAppフォルダーとCommandDemo.elmファイルを作成します。

ステップ2 *-コマンド_elm package install elm-lang/http_を使用してhttpモジュールをインストールします。

ステップ2 *-以下に示すようにCommandDemo.elmの内容を入力します-

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

-- MODEL
type alias Model =
   { heading : String
   , factText : String
   , input :String
   }

init : (Model, Cmd Msg)
init =
   ( Model "NumbersAPI" "NoFacts" "42"-- set model two fields
   , Cmd.none -- not to invoke api initially
   )

-- UPDATE

type Msg
   = ShowFacts
   |Input String
   | NewFactArrived (Result Http.Error String)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
   case msg of
      Input newInput ->
      (Model "NumbersApi typing.." "" newInput ,Cmd.none)
      ShowFacts ->
         (model, getRadmonNumberFromAPI model.input)

      NewFactArrived (Ok newFact) ->
         (Model "DataArrived" newFact "", Cmd.none)

      NewFactArrived (Err _) ->
         (model, Cmd.none)

- VIEW

view : Model -> Html Msg
view model =
   div []
      [ h2 [] [text model.heading]
      ,input [onInput Input, value model.input] []
      , button [ onClick ShowFacts ] [ text "show facts" ]
      , br [] []
      , h3 [][text model.factText]
      ]

-- SUBSCRIPTIONS

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

-- HTTP

getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
   let
      url =
      "http://numbersapi.com/"++newNo
   in
      Http.send NewFactArrived (Http.getString url)

ステップ4 *-コマンドを実行します。

C:\Users\dell\elm\CommandApp> elm make .\CommandDemo.elm

これにより、以下に示すようにhtmlファイルが生成されます。

htmlを生成

Elm-commands

目次