simple-web-system technology

Webに関する技術をシンプルに扱うブログ

Elmの最初に書くと良さげなMain.elmを置いておく。ついでに環境構築最速セットアップも

Main.elm

自分がセットアップしたらいつも使ってるスニペット
src/Main.elmに置いておく

module Main exposing (main)

import Browser
import Html exposing (Html, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)



-- MAIN


main : Program () Model Msg
main =
    Browser.sandbox
        { init = init
        , update = update
        , view = view
        }



-- MODEL


type alias Model =
    { content : String
    }


init : Model
init =
    { content = "" }



-- UPDATE


type Msg
    = Change String


update : Msg -> Model -> Model
update msg model =
    case msg of
        Change newContent ->
            { model | content = newContent }



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
        , div [] [ text (String.reverse model.content) ]
        ]

中身は以下のサイトのサンプルを改変 guide.elm-lang.jp

改変した中身は先頭のModule宣言とmain関数の型宣言を追加したこと(なんでelm tutorialには型宣言が置いてないんだろう。分かりづらいからなんだろうか)

最速セットアップ

Mac前提
brewの箇所はOSと環境毎に置き換えて

brew install nodejs
npm install -g elm elm-test elm-format elm-live
brew cask install visual-studio-code
code --install-extension elmtooling.elm-ls-vscode

mkdir project-name && cd $_
elm init
touch src/Main.elm
code .
#  上記のスニペットを使用する
elm-live src/Main.elm -- --debug