**ゼミナールB　　　EP20088　羽柴優介**
# 　プロジェクト2: ポインタのドラッグで図形を動かせるウェブページを関数型言語Elmで実現する
---
目標
-
- 関数型言語Elmについて知る
- 実際に動かしてみる
---
## 実践
ElmはJavaScriptにコンパイルされる関数型言語です。WebサイトやWebアプリの作成に役立つ。

---

まず[下記のサイト](https://elm-lang.org/)の「インストーラーをダウンロード」からElmをダウンロードする。
ダウンロード後、コンピューターでターミナルを開き、サイトの指示に従って、エルムを初期化した。

elm init

---
ここでElmリアクターという知らない単語が出てきたので調べた。

**Elmリアクター**

ターミナルをあまりいじらずにElmプロジェクトを構築するのに役立ちます。下記のように、プロジェクトのルートで実行するだけです。

elm reactor

---

また先ほどのサイトの遊び場というところで実際にどのようなモノがあるか確認した。
コードを下記に示す

module Main exposing (..)

-- Press buttons to increment and decrement a counter.
--
-- Read how it works:
--   https://guide.elm-lang.org/architecture/buttons.html
--


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


update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]


-- Press a button to draw a random card.
--
-- Dependencies:
--   elm install elm/random
--

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



-- MAIN


main =
  Browser.element
    { init = init
    , update = update
    , subscriptions = subscriptions
    , view = view
    }



-- MODEL


type alias Model =
  { card : Card
  }


init : () -> (Model, Cmd Msg)
init _ =
  ( Model Three
  , Cmd.none
  )


type Card
  = Ace
  | Two
  | Three
  | Four
  | Five
  | Six
  | Seven
  | Eight
  | Nine
  | Ten
  | Jack
  | Queen
  | King



-- UPDATE


type Msg
  = Draw
  | NewCard Card


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Draw ->
      ( model
      , Random.generate NewCard cardGenerator
      )

    NewCard newCard ->
      ( Model newCard
      , Cmd.none
      )


cardGenerator : Random.Generator Card
cardGenerator =
  Random.uniform Ace
    [ Two
    , Three
    , Four
    , Five
    , Six
    , Seven
    , Eight
    , Nine
    , Ten
    , Jack
    , Queen
    , King
    ]



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Draw ] [ text "Draw" ]
    , div [ style "font-size" "12em" ] [ text (viewCard model.card) ]
    ]


viewCard : Card -> String
viewCard card =
  case card of
    Ace -> "🂡"
    Two -> "🂢"
    Three -> "🂣"
    Four -> "🂤"
    Five -> "🂥"
    Six -> "🂦"
    Seven -> "🂧"
    Eight -> "🂨"
    Nine -> "🂩"
    Ten -> "🂪"
    Jack -> "🂫"
    Queen -> "🂭"
    King -> "🂮"

サイト上でクリックすることで表示を変化させることが出来ることを確認できた

---

今回はElmに軽く触れた。
次回はElmをまだよく理解できていないので、もっと理解し、自分で簡単なプログラムを作る。