Elmのチュートリアルを基に、どのように書いていくのかキーとなるポイントを説明します。
説明に使っているサイトやコード、動作については以下を参考にしています。
各要素の説明をして、チュートリアルの内容を見ていくことにします。
HTTPリクエストや非同期での処理を扱わない、単純なWebページを作る際に必要な要素は以下の4つです。
HTTPリクエストや非同期での処理を行う際も基本この4つは使うので、ここの理解をはっきりさせておきましょう。
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
ここでは動的なwebページを作る際に必要な要素を定義しています。
代入しているinitやupdate,viewは「–MAIN」より下の方で定義されています。
画面項目の初期状態。
画面項目の状態を更新する処理。
画面(HTML/CSSのようなもの)
-- MODEL
type alias Model = Int
init : Model
init =0
画面で使用するデータ（画面で管理したい値）を定義しています。
チュートリアルではボタンを押すことで数値をカウントするため数値を定義しています。
type alias Model = Int
Integerの値を格納するModelという型を定義しています。
文字列を格納する場合はIntの箇所をStringに変えれば良いです。
複数のtypeの型を定義する場合は{value1: Int, value2: String}のようにすれば、Integerのvalue1とStringのvalue2を持ったModelを定義できます。
※ Modelとなっていますが別に「Model」という名前にしなくても良いです。
init : Model
init =0
初期状態はModel型を使い、初期値には０を代入しています。
-- UPDATE
type Msg
= Increment
| Decrement
update : Msg -> Model -> Model
先ほど定義したMODELに対して変更を加える処理を定義しています。
type Msg= Increment| Decrement
MODELに変更を与える操作は「Increment」と「Decrement」しかないことを型で定義しています。
update : Msg -> Model -> Model
「updateはMsgとModelを引数にとって処理を行いModelを返す」ということを表しています。
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
updateの処理が記載されています。
case msg of
Increment ->
model + 1
msgがIncrementの場合はmodelの値に1加える。
case msg of
Decrement->
model – 1
msgがDecrementの場合はmodelの値から1引く。
いわゆるHTML/CSSの部分です。
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
view : Model -> Html Msg
viewはmodelを引数にとってHTMLとMsgを返すことを定義。
view model =
div []
[ button [ onClick Decrement ] [ text “-” ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text “+” ]
]
タグの名前とかはHTMLに合わせているので、どんなHTMLかは想像できそうです。
div [] [ text (String.fromInt model) ]
「<div>0</div>」を表現しています。
div[①][②]
①はdivに対するclassやstyleなどを指定できる。
②はdivの子要素を定義する場合に記載します。
onClickで先ほど定義したMsgの内容を指定するとクリック時にmodelの値を変更することができます。
ざっとチュートリアルに記載されている内容について解説をしました。
後はオンラインでの実行結果を確認しつつ、コードの雰囲気をつかんでみてください。
次回はチュートリアルの内容も含めて、ElmでTODOリストを作成していこうかと思います。
入会申込
ログイン
