Elm 0.19の練習（インタラクティブな似顔絵を作ろう）

ソースコードはこちらに全部あります。
https://github.com/naga3/elm-tutorial

Elmとは

ElmはWebのフロントエンドを作るのに向いている言語です。JavaScriptやHTMLに変換されます。

大変分かりやすい日本語ガイドがありますので、こちらを参照すれば基本的な部分はマスターできます。
https://guide.elm-lang.jp/

対象バージョンはElm 0.19です。

インストール

こちらを参照してElm本体をインストールしてください。
https://guide.elm-lang.jp/install.html

適当なディレクトリを作り、elm initを実行すれば最低限のプロジェクトが作られます。

VS Code拡張

Extensionは複数ありますが、非推奨のものもあるので、最新のこちらを導入します。
https://marketplace.visualstudio.com/items?itemName=Elmtooling.elm-ls-vscode

Hello World

src/Hello.elmというファイルを以下の内容で作ります。

module Hello exposing (main)

import Html exposing (text)


main =
    text "Hello, world"

elm reactorを実行すればブラウザで確認できます。簡単ですね。

画像をインタラクティブに動かしてみる

公式でSVGがサポートされているのでインストールします。

elm install elm/svg

src/Ellipse.elmというファイルを以下の内容で作ります。

module Ellipse exposing (main)

import Browser
import Html
import Html.Attributes as HtmlAttr
import Html.Events as HtmlEvent
import Svg
import Svg.Attributes as SvgAttr


main =
    Browser.sandbox { init = init, update = update, view = view }


type alias Model =
    { width : String
    , height : String
    }


init : Model
init =
    Model "100" "100"


type Msg
    = Width String
    | Height String


update : Msg -> Model -> Model
update msg model =
    case msg of
        Width width ->
            { model | width = width }

        Height height ->
            { model | height = height }


view : Model -> Html.Html Msg
view model =
    Html.div []
        [ Html.div []
            [ Html.text "幅"
            , Html.input
                [ HtmlAttr.type_ "number"
                , HtmlAttr.value model.width
                , HtmlEvent.onInput Width
                ]
                []
            ]
        , Html.div []
            [ Html.text "高さ"
            , Html.input
                [ HtmlAttr.type_ "number"
                , HtmlAttr.value model.height
                , HtmlEvent.onInput Height
                ]
                []
            ]
        , Svg.svg
            [ SvgAttr.width "500"
            , SvgAttr.height "500"
            , SvgAttr.viewBox "0 0 500 500"
            ]
            [ Svg.ellipse
                [ SvgAttr.cx "100"
                , SvgAttr.cy "100"
                , SvgAttr.rx model.width
                , SvgAttr.ry model.height
                , SvgAttr.fill "hotpink"
                ]
                []
            ]
        ]

フォームで楕円のサイズをインタラクティブに変更できます。

The Elm Architectureでは、モデルを定義して、それを介してあらゆるデータをやり取りします。

initは初期化、viewは見た目、updateは変更があったときの処理です。

type Msg
    = Width String
    | Height String

Msg型はWidth関数かHeight関数のどちらかを持つという定義です。
Msg, Width, Heightは、内部で定義したものなので名前は何でもいいです。

HtmlEvent.onInput Width
HtmlEvent.onInput Height

onInput関数で入力された文字列はMsg型としてupdateに渡されます、

    case msg of
        Width width ->
            { model | width = width }

update関数でパターンマッチングを行い、型の種類に応じてモデルの適切なフィールドに値を入れています。

詳しくはこちらが大変分かりやすいので参考にしてみてください。
https://guide.elm-lang.jp/architecture/buttons.html