ababup1192 · May 5, 2019 11:01
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 </head>

 <body>
  <div>
    <input id="left" value="0">
    +
    <input id="right" value="0">
  </div>
  <p id="result">0</p>
  <button id="calc">calc</button>

  <script>
    const left = document.getElementById("left");
    const right = document.getElementById("right");
    const calc = document.getElementById("calc");

    calc.addEventListener('click', (e) => {
      const leftValue = parseInt(left.value);
      const rightValue = parseInt(right.value);

      if (!Number.isNaN(leftValue) && !Number.isNaN(rightValue)) {
        result.innerHTML = String(leftValue + rightValue);
      } else {
        result.innerHTML = '数値だけを入力してください。';
      }
    });
  </script>
 </body>

 </html>
diff --git a/Main.elm b/Main.elm
 port module Main exposing (Model, Msg(..), init, main, update, view)

 import Browser
 import Browser.Navigation as Nav
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)



 -- ---------------------------
 -- MODEL
 -- ---------------------------


 type alias Model =
    { left : String
    , right : String
    , result : String
    }


 init : () -> ( Model, Cmd Msg )
 init _ =
    ( { left = "0"
      , right = "0"
      , result = "0"
      }
    , Cmd.none
    )



 -- ---------------------------
 -- UPDATE
 -- ---------------------------


 type Msg
    = UpdateLeft String
    | UpdateRight String
    | Calc


 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg ({ left, right } as model) =
    case msg of
        UpdateLeft l ->
            ( { model | left = l }, Cmd.none )

        UpdateRight r ->
            ( { model | right = r }, Cmd.none )

        Calc ->
            case ( String.toInt left, String.toInt right ) of
                ( Just lValue, Just rValue ) ->
                    ( { model | result = String.fromInt <| lValue + rValue }, Cmd.none )

                ( _, _ ) ->
                    ( { model | result = "数値だけを入力してください。" }, Cmd.none )



 -- ---------------------------
 -- VIEW
 -- ---------------------------


 view : Model -> Html Msg
 view { left, right, result } =
    div [ class "container" ]
        [ div []
            [ input [ value left, onInput UpdateLeft ] []
            , text "+"
            , input [ value right, onInput UpdateRight ] []
            ]
        , p [] [ text result ]
        , button [ onClick Calc ] [ text "calc" ]
        ]



 -- ---------------------------
 -- MAIN
 -- ---------------------------


 main : Program () Model Msg
 main =
    Browser.document
        { init = init
        , update = update
        , view =
            \m ->
                { title = "足し算"
                , body = [ view m ]
                }
        , subscriptions = \_ -> Sub.none
        }
diff --git a/Test.elm b/Test.elm
 module Tests exposing (updateTest)

 import Expect exposing (Expectation)
 import Fuzz exposing (Fuzzer, int, list, string)
 import Main exposing (..)
 import Test exposing (..)
 import Test.Html.Event as Event
 import Test.Html.Query as Query
 import Test.Html.Selector exposing (containing, tag, text)


 updateTest : Test
 updateTest =
    describe "updateのテスト" <|
        [ describe "計算が成功する"
            [ test "1+1=2である" <|
                \() ->
                    update Calc (Model "1" "1" "0")
                        |> Tuple.first
                        |> .result
                        |> Expect.equal "2"
            , test "5+3=8である" <|
                \() ->
                    update Calc (Model "5" "3" "0")
                        |> Tuple.first
                        |> .result
                        |> Expect.equal "8"
            ]
        , describe "計算が失敗する"
            [ test "a+1=数値だけを入力してください。" <|
                \() ->
                    update Calc (Model "a" "1" "0")
                        |> Tuple.first
                        |> .result
                        |> Expect.equal "数値だけを入力してください。"
            , test "1+a=数値だけを入力してください。" <|
                \() ->
                    update Calc (Model "1" "a" "0")
                        |> Tuple.first
                        |> .result
                        |> Expect.equal "数値だけを入力してください。"
            , test "a+b=数値だけを入力してください。" <|
                \() ->
                    update Calc (Model "a" "b" "0")
                        |> Tuple.first
                        |> .result
                        |> Expect.equal "数値だけを入力してください。"
            ]
        ]
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>

	<body>
	<div>
	<input id="left" value="0">
	+
	<input id="right" value="0">
	</div>
	<p id="result">0</p>
	<button id="calc">calc</button>

	<script>
	const left = document.getElementById("left");
	const right = document.getElementById("right");
	const calc = document.getElementById("calc");

	calc.addEventListener('click', (e) => {
	const leftValue = parseInt(left.value);
	const rightValue = parseInt(right.value);

	if (!Number.isNaN(leftValue) && !Number.isNaN(rightValue)) {
	result.innerHTML = String(leftValue + rightValue);
	} else {
	result.innerHTML = '数値だけを入力してください。';
	}
	});
	</script>
	</body>

	</html>
	port module Main exposing (Model, Msg(..), init, main, update, view)

	import Browser
	import Browser.Navigation as Nav
	import Html exposing (..)
	import Html.Attributes exposing (..)
	import Html.Events exposing (..)



	-- ---------------------------
	-- MODEL
	-- ---------------------------


	type alias Model =
	{ left : String
	, right : String
	, result : String
	}


	init : () -> ( Model, Cmd Msg )
	init _ =
	( { left = "0"
	, right = "0"
	, result = "0"
	}
	, Cmd.none
	)



	-- ---------------------------
	-- UPDATE
	-- ---------------------------


	type Msg
	= UpdateLeft String
	\| UpdateRight String
	\| Calc


	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg ({ left, right } as model) =
	case msg of
	UpdateLeft l ->
	( { model \| left = l }, Cmd.none )

	UpdateRight r ->
	( { model \| right = r }, Cmd.none )

	Calc ->
	case ( String.toInt left, String.toInt right ) of
	( Just lValue, Just rValue ) ->
	( { model \| result = String.fromInt <\| lValue + rValue }, Cmd.none )

	( _, _ ) ->
	( { model \| result = "数値だけを入力してください。" }, Cmd.none )



	-- ---------------------------
	-- VIEW
	-- ---------------------------


	view : Model -> Html Msg
	view { left, right, result } =
	div [ class "container" ]
	[ div []
	[ input [ value left, onInput UpdateLeft ] []
	, text "+"
	, input [ value right, onInput UpdateRight ] []
	]
	, p [] [ text result ]
	, button [ onClick Calc ] [ text "calc" ]
	]



	-- ---------------------------
	-- MAIN
	-- ---------------------------


	main : Program () Model Msg
	main =
	Browser.document
	{ init = init
	, update = update
	, view =
	\m ->
	{ title = "足し算"
	, body = [ view m ]
	}
	, subscriptions = \_ -> Sub.none
	}
	module Tests exposing (updateTest)

	import Expect exposing (Expectation)
	import Fuzz exposing (Fuzzer, int, list, string)
	import Main exposing (..)
	import Test exposing (..)
	import Test.Html.Event as Event
	import Test.Html.Query as Query
	import Test.Html.Selector exposing (containing, tag, text)


	updateTest : Test
	updateTest =
	describe "updateのテスト" <\|
	[ describe "計算が成功する"
	[ test "1+1=2である" <\|
	\() ->
	update Calc (Model "1" "1" "0")
	\|> Tuple.first
	\|> .result
	\|> Expect.equal "2"
	, test "5+3=8である" <\|
	\() ->
	update Calc (Model "5" "3" "0")
	\|> Tuple.first
	\|> .result
	\|> Expect.equal "8"
	]
	, describe "計算が失敗する"
	[ test "a+1=数値だけを入力してください。" <\|
	\() ->
	update Calc (Model "a" "1" "0")
	\|> Tuple.first
	\|> .result
	\|> Expect.equal "数値だけを入力してください。"
	, test "1+a=数値だけを入力してください。" <\|
	\() ->
	update Calc (Model "1" "a" "0")
	\|> Tuple.first
	\|> .result
	\|> Expect.equal "数値だけを入力してください。"
	, test "a+b=数値だけを入力してください。" <\|
	\() ->
	update Calc (Model "a" "b" "0")
	\|> Tuple.first
	\|> .result
	\|> Expect.equal "数値だけを入力してください。"
	]
	]