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には型宣言が置いてないんだろう。分かりづらいからなんだろうか)
最速セットアップ
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