elm について：

JavaScript にコンパイルできる関数型プログラミング言語である。
elmを通して、ウェブサイトやウェブアプリケーションを作ることに役に立つ。
(どの環境も依存しない。)
て
elm の特徴：

実用上ランタイムエラーがでない
親切なエラーメッセージ
信頼性の高いリファクタリング
すべてのElmパッケージは自動的にセマンティックバージョニングが強制されている

elmの構造：

Model — the state of your application
Update — a way to update your state based on messages
View — a way to turn your state into HTML

インクリメントやデクリメントを行うカウンタを作成する。

-- Press buttons to increment and decrement and reset a counter.


import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)



-- MAIN


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



-- MODEL


type alias Model = Int


init : Model
init =
  0



-- 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 Reset ] [ text "reset" ]
    , button [ onClick Increment ] [ text "+" ]
    , button [ onClick Reset ] [ text "reset" ]
    ]

以上です。(11/17)

---

テキスト入力の内容を逆に表示するプログラム：

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


-- MAIN


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 ] []
    //String.fromInt関数で数字から文字列に変化する
    ,div[] [text(String.fromInt(String.length model.content))]
    //String.reverse関数で文字列を逆に変化する
    ,div [] [text (String.reverse model.content) ]
    ]

以上です。(11/24)

---

名前、パスワード、パスワード(確認用)のフィールドを持ったフォームを作成する。更に、パスワードの長さが8以上可動化を確認する。

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)


-- MAIN


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


-- MODEL


type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  }


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


-- UPDATE


type Msg
  = Name String
  | Password String
  | PasswordAgain String

//msgを受け取って、更新する
update : Msg -> Model -> Model
update msg model =
//msg3種類
  case msg of
    Name name ->
      { model | name = name }

    Password password ->
      { model | password = password }

    PasswordAgain password ->
      { model | passwordAgain = password }


-- VIEW


view : Model -> Html Msg`
view model =
  div []
    [ viewInput "text" "Name" model.name Name
    , viewInput "password" "Password" model.password Password
    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain
    , viewValidation model
    ]


//viewInput補助関数(HTML)
viewInput : String -> String -> String -> (String -> msg) -> Html msg
//画面にこのように表示される
viewInput t p v toMsg =
  input [ type_ t, placeholder p, value v, onInput toMsg ] []


//viewValidation補助関数(HTML)
viewValidation : Model -> Html msg
viewValidation model =
  if model.password == model.passwordAgain then
     if String.length model.password >= 8 then 
     div [ style "color" "green" ] [ text "OK" ]
     else 
     div [ style "color" "red" ] [ text "短い過ぎる" ]
  else 
  div [ style "color" "red" ] [ text "不一致" ]

以上です。(12/15)

---

import Browser
import Html exposing (..)
import Html.Events exposing (..)
import Html.Attributes exposing (..)


-- MAIN


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


type alias Model = 
    { x: Int 
    , y: Int 
    }

init : Model
init = { x = 0 , y = 0 }


-- UPDATE


type Msg = Move Int Int

update : Msg -> Model -> Model
update msg model =
  case msg of
    Move x y -> { x = x, y = y }
    
    
-- VIEW


view : Model -> Html Msg
view model =  
    div []
    [
      div 
        [   style "background" "pink" 
          , style "height"  "1000px"
          , style "width"  "1000px"
        ]
        [
        div 
        [ 
          style "background" "yellow" 
        , style "height"  "200px"
        , style "width"   "200px"
        ]
        [
        div [][text ("( x = " ++ String.fromInt model.x ++ ", y = " ++ String.fromInt model.y ++ ")")    
        ]
        ]
        ]
        ]

以上です。(12/22)