Port를 통한 Elm Record와 JavaScript Object의 호환성

Port를 통한 Elm Record와 JavaScript Object의 호환성을 시험해 보았습니다.

일반적으로 Port를 사용하면 Elm과 JavaScript 사이에서 자동으로 다음과 같은 데이터 변환이 수행됩니다. JavaScript Interop

Boolean – Elm と JSの両方に型は存在します。
String  – Elm と JSの両方に型は存在します。
Number  – Elm int と float は JS numbersに対応します
List    – Elm List はJS arrayに対応します
Array   – Elm ArrayはJS arrayに対応します
Tuple   – Elm TupleはJS array( fixed-length, mixed-type)に対応します
Record  – Elm RecordはJavaScript objectに対応します。
Maybes  – Elm の Nothing とJust 42 は、JSのnull と 42 に対応します。
Json    – Elm の Json.Encode.Value はJSのJSONに対応します。

이번에는 Elm Record가 정말로 JavaScript object에 대응하고 있는지를 검증해 보았습니다. 다음과 같은 Elm 레코드를 port에서 JavaScript로 전달하면 Elm 레코드가 JavaScript 객체로 변환됩니다. 자바스크립트 객체에서 약간의 수정을 하고 port를 통해 Elm으로 되돌려보자.

type alias Model =
  { name : String
  , age : Int
  , height : Float
  , married : Bool
  }

elm2js와 js2elm이라는 두 개의 포트에서 다음과 같은 변환이 이루어집니다.

           elm2js                    js2elm
Elm record   -->   JavaScript object   -->   Elm record

실제 실행 결과의 화면입니다. Elm HTML에서 name=오타니, age=23, height=193.6을 입력하면 Elm 레코드가 JavaScript 객체로 JavaScript에 전달되고 name=오타니-san, age=23+1, height=193.6+1.5의 JavaScript 객체로 업데이트되어 Elm으로 돌아갑니다. Elm 레코드가 "오타니-san - 24 - 195.1 - True"로 표시됩니다. 덧붙여서 married도 JavaScript로 False에서 True로 제대로 변경되고 있네요.

　 이하와 같은 흐름으로, Elm으로부터 건네받은 레코드가, JavaScript로 갱신되어 Elm에 되돌려집니다.

Elm         {name="大谷",age=23,height=193.6,married=False}  ==>
JavaScript  {name:"大谷",age:23,height:193.6,married:False}  ==>
JavaScript  {name="大谷"+"-san",age=23+1,height=193.6+1.5,married=! False}  ==>
JavaScript  {name:"大谷-san",age:24,height:195.1,married:True}  ==>
Elm         {name="大谷",age=24,height=195.1,married=True}

그럼 엘름의 코드를 봐.

Main.elm

port module PortsTest exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)

-- MAIN

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

-- MODEL
type alias Model =
  { name : String
  , age : Int
  , height : Float
  , married : Bool
  }

-- MSG

type Msg =
  AddName String
    | AddAge String
    | AddHeight String
    | ToJs
    | FromJs Model

-- INIT

init : (Model, Cmd Msg)
init =
  (Model "" -1 -1.0 False , Cmd.none)

-- UPDATE

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    AddName txt ->
      ( {model | name = txt }, Cmd.none )

    AddAge txt ->
      ( {model | age = getInt(txt) }, Cmd.none )

    AddHeight txt ->
      ( {model | height = getFloat(txt) }, Cmd.none )

    ToJs ->
      ( model, elm2js model )

    FromJs newmodel ->
      ( newmodel, Cmd.none )



getInt txt =
    case String.toInt(txt) of
        Ok i -> i
        _    -> -1

getFloat txt =
    case String.toFloat(txt) of
        Ok f -> f
        _    -> -1.0


-- OUTGOING PORT

port elm2js : Model -> Cmd msg

-- VIEW

view : Model -> Html Msg
view model =
  div []
      [ input [ placeholder "名前", onInput AddName ] []
      , input [ placeholder "年齢", onInput AddAge ] []
      , input [ placeholder "身長", onInput AddHeight ] []
      , button [ onClick ToJs ] [ text "ToJS" ]
      , div [] [ text model.name
               , text " - "
               , text <| toString model.age
               , text " - "
               , text <| toString model.height
               , text " - "
               , text <| toString model.married
               ]
      ]


-- INCOMING PORT

port js2elm : (Model -> msg) -> Sub msg

-- SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions model =
  js2elm FromJs

JavaScript의 코드는 다음과 같습니다.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="elm.js"></script>
    </head>
    <body>
    </body>
    <script type="text/javascript">
     function convert(myobject){
         return {
           name: myobject.name + "-san",
           age: myobject.age + 1,
           height: myobject.height + 1.5,
           married: ! myobject.married
         }
     }

     var app = Elm.PortsTest.fullscreen();
        app.ports.elm2js.subscribe(function(myobject) {
         console.log("myobject="+JSON.stringify(myobject));
         var newobject = convert(myobject);
         console.log("newobject="+JSON.stringify(newobject));
         app.ports.js2elm.send(newobject);
     });
    </script>
</html>

필요한 패키지를 설치합니다.

elm-package install elm-lang/html

컴파일합니다.

elm-make Main.elm --output elm.js

서버를 시작합니다.

elm-reactor -a=www.mypress.jp -p=3030

덧붙여서 ES6의 JavaScript object의 소멸을 사용하면, 이하와 같이 name만을 받도록(듯이) 쓸 수 있습니다.

index.html

#
        app.ports.elm2js.subscribe(function( {name} ) {
         console.log("name="+name);
#

또한 Elm에서 JavaScript로 그대로 변환없이 value(?)를 전달하는 예는 다음 과거 기사를 참조하십시오. Elm과 JavaScript 대화(Port) - Qiita

이번은 이상입니다.

Reference

이 문제에 관하여(Port를 통한 Elm Record와 JavaScript Object의 호환성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sand/items/afa678203c31c71580ea

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Port를 통한 Elm Record와 JavaScript Object의 호환성

Reference

좋은 웹페이지 즐겨찾기