Elm_guide_Buttons
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ ...
#norelated
#contents
//----------------------------------------
*ボタン [#c13b2ac0]
-ボタン · An Introduction to Elm https://guide.elm-lang.j...
#code(haskell){{
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = init, update = update, view = ...
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
}}
パッと見、雰囲気だけは伝わりますが、個々の部分を見ていく...
UPDATEやVIEWの部分を見ると、関数の宣言方法が何となく分か...
-関数の型注釈を書いてから、関数を書く。
--型注釈は、「関数名：引数の型 -> 戻り値の型」という形で...
--関数は、「関数名 引数 = 関数の本体」という形で書ける。...
*練習問題 [#j76fd44c]
>練習問題: The Elm Architectureが優れていることの一つに、...
>この機能を追加するにはMsg型の実装部分にもどってもう一つ...
それでは、"reset"機能を実装してみましょう！
適当に勘でやったらうまくいった！
#code(haskell){{
-- UPDATE
type Msg
= Increment
| Decrement
| Reset
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
Reset ->
model - model
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
, div [] []
, button [ onClick Reset ] [ text "Reset" ]
]
}}
-Msg型に「Reset」も追加。
-case式に「Reset」も追加。
--最初model = 0にしたら、再代入不可のエラーになったけど、...
-- UNEXPECTED EQUALS -----------------------------------...
I was not expecting to see this equals sign:
55| model = 0
^
Maybe you want == instead? To check if two values are eq...
Note: I may be getting confused by your indentation. I t...
the `update` definition. Is this supposed to be part of ...
If so, the problem may be a bit before the equals sign. ...
to be indented exactly the same amount, so the problem m...
definition has too many spaces in front of it.
-view関数に「onClick Reset」のボタンも追加。
--改行の目的で「, div [] []」も追加してみた。
自分なりの工夫は、model - modelという計算式を入れたことか...
本当はどうやるのがスマートなのだろう？
終了行:
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ ...
#norelated
#contents
//----------------------------------------
*ボタン [#c13b2ac0]
-ボタン · An Introduction to Elm https://guide.elm-lang.j...
#code(haskell){{
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = init, update = update, view = ...
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
}}
パッと見、雰囲気だけは伝わりますが、個々の部分を見ていく...
UPDATEやVIEWの部分を見ると、関数の宣言方法が何となく分か...
-関数の型注釈を書いてから、関数を書く。
--型注釈は、「関数名：引数の型 -> 戻り値の型」という形で...
--関数は、「関数名 引数 = 関数の本体」という形で書ける。...
*練習問題 [#j76fd44c]
>練習問題: The Elm Architectureが優れていることの一つに、...
>この機能を追加するにはMsg型の実装部分にもどってもう一つ...
それでは、"reset"機能を実装してみましょう！
適当に勘でやったらうまくいった！
#code(haskell){{
-- UPDATE
type Msg
= Increment
| Decrement
| Reset
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
Reset ->
model - model
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
, div [] []
, button [ onClick Reset ] [ text "Reset" ]
]
}}
-Msg型に「Reset」も追加。
-case式に「Reset」も追加。
--最初model = 0にしたら、再代入不可のエラーになったけど、...
-- UNEXPECTED EQUALS -----------------------------------...
I was not expecting to see this equals sign:
55| model = 0
^
Maybe you want == instead? To check if two values are eq...
Note: I may be getting confused by your indentation. I t...
the `update` definition. Is this supposed to be part of ...
If so, the problem may be a bit before the equals sign. ...
to be indented exactly the same amount, so the problem m...
definition has too many spaces in front of it.
-view関数に「onClick Reset」のボタンも追加。
--改行の目的で「, div [] []」も追加してみた。
自分なりの工夫は、model - modelという計算式を入れたことか...
本当はどうやるのがスマートなのだろう？
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
